@fluentui/react-progress 9.5.0 → 9.5.2

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Wed, 01 Apr 2026 15:50:22 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.2)
+
+Tue, 26 May 2026 09:33:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.1..@fluentui/react-progress_v9.5.2)
+
+### Patches
+
+- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.1)
+
+Thu, 23 Apr 2026 14:21:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.0..@fluentui/react-progress_v9.5.1)
+
+### Patches
+
+- fix: drop unnecessary dependencies from base hooks ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.0)
 
-Wed, 01 Apr 2026 15:50:22 GMT 
+Wed, 01 Apr 2026 15:52:42 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.17..@fluentui/react-progress_v9.5.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { MotionSlotProps } from '@fluentui/react-motion';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 

package/lib/components/ProgressBar/useProgressBar.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useFieldContext_unstable } from '@fluentui/react-field';
 import { motionSlot } from '@fluentui/react-motion';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
@@ -20,6 +19,11 @@ import { ProgressBarIndeterminateMotion } from './progressBarMotions';
     const state = useProgressBarBase_unstable(baseProps, ref);
     return {
         ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            indeterminateMotion: ProgressBarIndeterminateMotion
+        },
         color,
         shape,
         thickness,
@@ -72,7 +76,7 @@ import { ProgressBarIndeterminateMotion } from './progressBarMotions';
         components: {
             root: 'div',
             bar: 'div',
-            indeterminateMotion: ProgressBarIndeterminateMotion
+            indeterminateMotion: 'div'
         },
         root,
         bar

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 {\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"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport type * 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    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      indeterminateMotion: ProgressBarIndeterminateMotion,\n    },\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: 'div' },\n    root,\n    bar,\n  };\n};\n"],"names":["useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","indeterminateMotion","baseProps","state","useProgressBarBase_unstable","components","value","undefined","elementType","defaultProps","max","root","always","role","labelId","validationMessageId","hintId","filter","Boolean","join","bar"],"mappings":"AAAA;AAGA,SAASA,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;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBJ,qBAAqBV;QACvB;QACAO;QACAC;QACAC;QACAC,qBACEE,MAAMG,KAAK,KAAKC,YACZrB,WAAWe,qBAAqB;YAC9BO,aAAajB;YACbkB,cAAc,CAAC;QACjB,KACAF;IACR;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMH,8BAA8B,CACzCX,OACAC;IAEA,MAAMC,QAAQV;QAEOQ;IAArB,MAAMiB,MAAMpB,SAASG,CAAAA,aAAAA,MAAMiB,GAAG,cAATjB,wBAAAA,aAAa;IAClC,MAAMa,QAAQjB,WAAWI,MAAMa,KAAK,EAAEI;IAEtC,MAAMC,OAAOvB,KAAKwB,MAAM,CACtBzB,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLmB,MAAM;QACN,iBAAiBP,UAAUC,YAAY,IAAIA;QAC3C,iBAAiBD,UAAUC,YAAYG,MAAMH;QAC7C,iBAAiBD;QACjB,iBAAiB,EAAEX,kBAAAA,4BAAAA,MAAOmB,OAAO;QACjC,GAAGrB,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMoB,mBAAmB,IAAIpB,MAAMqB,MAAM,AAAD,GAAI;QACxD,oFAAoF;QACpFL,IAAI,CAAC,mBAAmB,GAAG;YAAChB,kBAAAA,4BAAAA,MAAOoB,mBAAmB;YAAEpB,kBAAAA,4BAAAA,MAAOqB,MAAM;YAAEL,IAAI,CAAC,mBAAmB;SAAC,CAC7FM,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAMhC,KAAKwB,MAAM,CAACnB,MAAM2B,GAAG,EAAE;QAAEZ,aAAa;IAAM;IAExD,OAAO;QACLE;QACAJ;QACAD,YAAY;YAAEM,MAAM;YAAOS,KAAK;YAAOnB,qBAAqB;QAAM;QAClEU;QACAS;IACF;AACF,EAAE"}

package/lib/components/ProgressBar/useProgressBarStyles.styles.js

@@ -119,11 +119,14 @@ export const useProgressBarStyles_unstable = state => {
   } = state;
   const rootStyles = useRootStyles();
   const barStyles = useBarStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
   if (state.bar) {
+    // eslint-disable-next-line react-hooks/immutability
     state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
   }
   if (state.bar && value !== undefined) {
+    // eslint-disable-next-line react-hooks/immutability
     state.bar.style = {
       width: Math.min(100, Math.max(0, value / max * 100)) + '%',
       ...state.bar.style

package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js

@@ -86,11 +86,14 @@ const barThicknessValues = {
     const { color, max, shape, thickness, value } = state;
     const rootStyles = useRootStyles();
     const barStyles = useBarStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
     if (state.bar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
     }
     if (state.bar && value !== undefined) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.style = {
             width: Math.min(100, Math.max(0, value / max * 100)) + '%',
             ...state.bar.style

package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAAuF;IAClGC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,gBAAgBV,WAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,OAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,OAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,OAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,eAAetB,WAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,OAAOW,uBAAuB,CAAC;MACjC,EAAEX,OAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,OAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,OAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,OAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,OAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,OAAOsC,4BAA4B;IACtD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElBoB,MAAMtC,IAAI,CAAC8C,SAAS,GAAGjD,aACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACbqC,MAAMrC,GAAG,CAAC6C,SAAS,GAAGjD,aACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpCT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAG,AAACG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAAuF;IAClGC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,gBAAgBV,WAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,OAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,OAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,OAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,eAAetB,WAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,OAAOW,uBAAuB,CAAC;MACjC,EAAEX,OAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,OAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,OAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,OAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,OAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,OAAOsC,4BAA4B;IACtD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElB,oDAAoD;IACpDoB,MAAMtC,IAAI,CAAC8C,SAAS,GAAGjD,aACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACb,oDAAoD;QACpDqC,MAAMrC,GAAG,CAAC6C,SAAS,GAAGjD,aACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpC,oDAAoD;QACpDT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAG,AAACG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}

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

@@ -17,8 +17,6 @@ _export(exports, {
         return useProgressBar_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
 const _reactmotion = require("@fluentui/react-motion");
 const _reactutilities = require("@fluentui/react-utilities");
@@ -31,6 +29,11 @@ const useProgressBar_unstable = (props, ref)=>{
     const state = useProgressBarBase_unstable(baseProps, ref);
     return {
         ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            indeterminateMotion: _progressBarMotions.ProgressBarIndeterminateMotion
+        },
         color,
         shape,
         thickness,
@@ -76,7 +79,7 @@ const useProgressBarBase_unstable = (props, ref)=>{
         components: {
             root: 'div',
             bar: 'div',
-            indeterminateMotion: _progressBarMotions.ProgressBarIndeterminateMotion
+            indeterminateMotion: 'div'
         },
         root,
         bar

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 {\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"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport type * 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    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      indeterminateMotion: ProgressBarIndeterminateMotion,\n    },\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: 'div' },\n    root,\n    bar,\n  };\n};\n"],"names":["useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","indeterminateMotion","baseProps","state","useProgressBarBase_unstable","components","value","undefined","elementType","defaultProps","max","root","always","role","labelId","validationMessageId","hintId","filter","Boolean","join","bar"],"mappings":"AAAA;;;;;;;;;;;;+BAkEamB;eAAAA;;IA1CAZ,uBAAAA;;;;4BArB4B,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;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBJ,qBAAqBV,kDAAAA;QACvB;QACAO;QACAC;QACAC;QACAC,qBACEE,MAAMG,KAAK,KAAKC,gBACZrB,uBAAAA,EAAWe,qBAAqB;YAC9BO,aAAajB,kDAAAA;YACbkB,cAAc,CAAC;QACjB,KACAF;IACR;AACF,EAAE;AAUK,oCAAoC,CACzCd,OACAC;IAEA,MAAMC,YAAQV,oCAAAA;QAEOQ;IAArB,MAAMiB,UAAMpB,eAAAA,EAASG,cAAAA,MAAMiB,GAAAA,AAAG,MAAA,QAATjB,eAAAA,KAAAA,IAAAA,aAAa;IAClC,MAAMa,YAAQjB,iBAAAA,EAAWI,MAAMa,KAAK,EAAEI;IAEtC,MAAMC,OAAOvB,oBAAAA,CAAKwB,MAAM,KACtBzB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLmB,MAAM;QACN,iBAAiBP,UAAUC,YAAY,IAAIA;QAC3C,iBAAiBD,UAAUC,YAAYG,MAAMH;QAC7C,iBAAiBD;QACjB,iBAAiB,EAAEX,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOmB,OAAO;QACjC,GAAGrB,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMoB,mBAAmB,IAAIpB,MAAMqB,MAAAA,AAAK,GAAI;QACxD,oFAAoF;QACpFL,IAAI,CAAC,mBAAmB,GAAG;YAAChB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOoB,mBAAmB;YAAEpB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOqB,MAAM;YAAEL,IAAI,CAAC,mBAAmB;SAAC,CAC7FM,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAMhC,oBAAAA,CAAKwB,MAAM,CAACnB,MAAM2B,GAAG,EAAE;QAAEZ,aAAa;IAAM;IAExD,OAAO;QACLE;QACAJ;QACAD,YAAY;YAAEM,MAAM;YAAOS,KAAK;YAAOnB,qBAAqB;QAAM;QAClEU;QACAS;IACF;AACF,EAAE"}

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js

@@ -175,11 +175,14 @@ const useProgressBarStyles_unstable = (state)=>{
     const { color, max, shape, thickness, value } = state;
     const rootStyles = useRootStyles();
     const barStyles = useBarStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
     if (state.bar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.className = (0, _react.mergeClasses)(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
     }
     if (state.bar && value !== undefined) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.style = {
             width: Math.min(100, Math.max(0, value / max * 100)) + '%',
             ...state.bar.style

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"mappings":"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"}
+{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"mappings":"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"}

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js

@@ -102,11 +102,14 @@ const useProgressBarStyles_unstable = (state)=>{
     const { color, max, shape, thickness, value } = state;
     const rootStyles = useRootStyles();
     const barStyles = useBarStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
     if (state.bar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.className = (0, _react.mergeClasses)(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
     }
     if (state.bar && value !== undefined) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.style = {
             width: Math.min(100, Math.max(0, value / max * 100)) + '%',
             ...state.bar.style

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;IA2FAsC,6BAAAA;;;;uBAhG4B,iBAAiB;4BACnC,wBAAwB;AAIxC,8BAA6F;IAClGrC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,oBAAgBV,iBAAAA,EAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,kBAAAA,CAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,kBAAAA,CAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,kBAAAA,CAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,mBAAetB,iBAAAA,EAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,kBAAAA,CAAOW,uBAAuB,CAAC;MACjC,EAAEX,kBAAAA,CAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,kBAAAA,CAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,kBAAAA,CAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,kBAAAA,CAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,kBAAAA,CAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,kBAAAA,CAAOsC,4BAA4B;IACtD;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElBoB,MAAMtC,IAAI,CAAC8C,SAAS,OAAGjD,mBAAAA,EACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACbqC,MAAMrC,GAAG,CAAC6C,SAAS,OAAGjD,mBAAAA,EACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpCT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAIG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-progress",
-  "version": "9.5.0",
+  "version": "9.5.2",
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,12 +12,12 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-motion": "^9.14.0",
-    "@fluentui/react-field": "^9.5.0",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-motion": "^9.16.0",
+    "@fluentui/react-field": "^9.5.2",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },