@fluentui/react-progress 9.5.2 → 9.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,25 @@
1
1
  # Change Log - @fluentui/react-progress
2
2
 
3
- This log was last generated on Tue, 26 May 2026 09:33:55 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 24 Jun 2026 11:03:42 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.3)
8
+
9
+ Wed, 24 Jun 2026 11:03:42 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.2..@fluentui/react-progress_v9.5.3)
11
+
12
+ ### Patches
13
+
14
+ - fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
15
+ - Bump @fluentui/react-motion to v9.16.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
16
+ - Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
19
+
7
20
  ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.2)
8
21
 
9
- Tue, 26 May 2026 09:33:55 GMT
22
+ Tue, 26 May 2026 09:39:33 GMT
10
23
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.1..@fluentui/react-progress_v9.5.2)
11
24
 
12
25
  ### Patches
@@ -108,8 +108,6 @@ const useBarStyles = /*#__PURE__*/__styles({
108
108
  * Apply styling to the ProgressBar slots based on the state
109
109
  */
110
110
  export const useProgressBarStyles_unstable = state => {
111
- 'use no memo';
112
-
113
111
  const {
114
112
  color,
115
113
  max,
@@ -1 +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 // 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":[]}
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 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":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,GAAG,EAAE;AACT,CAAC;AACD;AACA;AACA,MAAMC,cAAc,GAAG,IAAI;AAC3B,MAAMC,kBAAkB,GAAG;EACvBC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGV,QAAA;EAAAI,IAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAf,MAAA;IAAAiB,OAAA;EAAA;EAAAhB,KAAA;IAAAgB,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAsBzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,YAAY,gBAAG7B,QAAA;EAAA8B,IAAA;IAAAb,OAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;EAAA;EAAAM,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAA5B,MAAA;EAAA;EAAA6B,KAAA;IAAA7B,MAAA;EAAA;EAAA8B,OAAA;IAAA9B,MAAA;EAAA;EAAA+B,OAAA;IAAA/B,MAAA;EAAA;AAAA;EAAAgB,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAF,CAAA;IAAAC,CAAA;EAAA;AAAA,CAuCxB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMiB,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAM;IAAEC,KAAK;IAAEC,GAAG;IAAEC,KAAK;IAAEC,SAAS;IAAEC;EAAM,CAAC,GAAGL,KAAK;EACrD,MAAMM,UAAU,GAAGzC,aAAa,CAAC,CAAC;EAClC,MAAM0C,SAAS,GAAGvB,YAAY,CAAC,CAAC;EAChC;EACAgB,KAAK,CAACzC,IAAI,CAACiD,SAAS,GAAGpD,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAE+C,UAAU,CAAC/C,IAAI,EAAE+C,UAAU,CAACH,KAAK,CAAC,EAAEG,UAAU,CAACF,SAAS,CAAC,EAAEJ,KAAK,CAACzC,IAAI,CAACiD,SAAS,CAAC;EAChJ,IAAIR,KAAK,CAACxC,GAAG,EAAE;IACX;IACAwC,KAAK,CAACxC,GAAG,CAACgD,SAAS,GAAGpD,YAAY,CAACE,qBAAqB,CAACE,GAAG,EAAE+C,SAAS,CAACtB,IAAI,EAAEsB,SAAS,CAACZ,KAAK,EAAEU,KAAK,KAAKI,SAAS,IAAIF,SAAS,CAACjB,aAAa,EAAEe,KAAK,KAAKI,SAAS,IAAIJ,KAAK,GAAG5C,cAAc,IAAI8C,SAAS,CAACrB,kBAAkB,EAAEe,KAAK,IAAII,KAAK,KAAKI,SAAS,IAAIF,SAAS,CAACN,KAAK,CAAC,EAAED,KAAK,CAACxC,GAAG,CAACgD,SAAS,CAAC;EACxS;EACA,IAAIR,KAAK,CAACxC,GAAG,IAAI6C,KAAK,KAAKI,SAAS,EAAE;IAClC;IACAT,KAAK,CAACxC,GAAG,CAACkD,KAAK,GAAG;MACdC,KAAK,EAAEC,IAAI,CAACC,GAAG,CAAC,GAAG,EAAED,IAAI,CAACV,GAAG,CAAC,CAAC,EAAEG,KAAK,GAAGH,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG;MAC1D,GAAGF,KAAK,CAACxC,GAAG,CAACkD;IACjB,CAAC;EACL;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -82,7 +82,6 @@ const barThicknessValues = {
82
82
  /**
83
83
  * Apply styling to the ProgressBar slots based on the state
84
84
  */ export const useProgressBarStyles_unstable = (state)=>{
85
- 'use no memo';
86
85
  const { color, max, shape, thickness, value } = state;
87
86
  const rootStyles = useRootStyles();
88
87
  const barStyles = useBarStyles();
@@ -1 +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 // 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"}
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 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,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"}
@@ -171,7 +171,6 @@ const barThicknessValues = {
171
171
  ]
172
172
  });
173
173
  const useProgressBarStyles_unstable = (state)=>{
174
- 'use no memo';
175
174
  const { color, max, shape, thickness, value } = state;
176
175
  const rootStyles = useRootStyles();
177
176
  const barStyles = useBarStyles();
@@ -1 +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 // 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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"}
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 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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"}
@@ -98,7 +98,6 @@ const barThicknessValues = {
98
98
  }
99
99
  });
100
100
  const useProgressBarStyles_unstable = (state)=>{
101
- 'use no memo';
102
101
  const { color, max, shape, thickness, value } = state;
103
102
  const rootStyles = useRootStyles();
104
103
  const barStyles = useBarStyles();
@@ -1 +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 // 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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"}
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 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-progress",
3
- "version": "9.5.2",
3
+ "version": "9.5.3",
4
4
  "description": "Progress component for FluentUI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,12 +12,12 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui/react-motion": "^9.16.0",
16
- "@fluentui/react-field": "^9.5.2",
17
- "@fluentui/react-jsx-runtime": "^9.4.3",
15
+ "@fluentui/react-motion": "^9.16.1",
16
+ "@fluentui/react-field": "^9.5.3",
17
+ "@fluentui/react-jsx-runtime": "^9.4.4",
18
18
  "@fluentui/react-shared-contexts": "^9.26.2",
19
19
  "@fluentui/react-theme": "^9.2.1",
20
- "@fluentui/react-utilities": "^9.26.4",
20
+ "@fluentui/react-utilities": "^9.26.5",
21
21
  "@griffel/react": "^1.5.32",
22
22
  "@swc/helpers": "^0.5.1"
23
23
  },