@fluentui/react-progress 9.4.10 → 9.4.11
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 +15 -2
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js +12 -12
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js +12 -12
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Nov 2025 19:13:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.11)
|
|
8
|
+
|
|
9
|
+
Tue, 11 Nov 2025 19:13:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.10..@fluentui/react-progress_v9.4.11)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.4.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.10)
|
|
8
21
|
|
|
9
|
-
Thu, 06 Nov 2025
|
|
22
|
+
Thu, 06 Nov 2025 15:01:25 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.9..@fluentui/react-progress_v9.4.10)
|
|
11
24
|
|
|
12
25
|
### Patches
|
|
@@ -43,7 +43,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
43
43
|
B68tc82: 0,
|
|
44
44
|
Bmxbyg5: 0,
|
|
45
45
|
Bpg54ce: "f1a3p1vp",
|
|
46
|
-
|
|
46
|
+
Bomf52o: "f1skxd4g"
|
|
47
47
|
},
|
|
48
48
|
rounded: {
|
|
49
49
|
Beyfa6y: 0,
|
|
@@ -73,7 +73,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
73
73
|
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
|
|
74
74
|
p: -1
|
|
75
75
|
}], ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
76
|
-
m: [["@media screen and (forced-colors: active){.
|
|
76
|
+
m: [["@media screen and (forced-colors: active){.f1skxd4g{background-color:CanvasText;}}", {
|
|
77
77
|
m: "screen and (forced-colors: active)"
|
|
78
78
|
}]]
|
|
79
79
|
});
|
|
@@ -82,7 +82,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
82
82
|
*/
|
|
83
83
|
const useBarStyles = /*#__PURE__*/__styles({
|
|
84
84
|
base: {
|
|
85
|
-
|
|
85
|
+
Bomf52o: "f1tnpuu0",
|
|
86
86
|
Beyfa6y: 0,
|
|
87
87
|
Bbmb7ep: 0,
|
|
88
88
|
Btl43ni: 0,
|
|
@@ -103,10 +103,10 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
103
103
|
vin17d: "f1a27w2r",
|
|
104
104
|
Ezkn3b: "f452v7t",
|
|
105
105
|
w3vfg9: "f1cpbl36",
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
106
|
+
jpy9cc: "f3z2g5w",
|
|
107
|
+
Bqo2lbl: "fz5izi4",
|
|
108
|
+
B6plc1d: "fv40pdu",
|
|
109
|
+
I82g5a: "f1uj6jbf"
|
|
110
110
|
},
|
|
111
111
|
brand: {
|
|
112
112
|
De3pzq: "ftywsgz"
|
|
@@ -121,15 +121,15 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
121
121
|
De3pzq: "flxk52p"
|
|
122
122
|
}
|
|
123
123
|
}, {
|
|
124
|
-
m: [["@media screen and (forced-colors: active){.
|
|
124
|
+
m: [["@media screen and (forced-colors: active){.f1tnpuu0{background-color:Highlight;}}", {
|
|
125
125
|
m: "screen and (forced-colors: active)"
|
|
126
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
126
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f3z2g5w{max-width:100%;}}", {
|
|
127
127
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
128
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
128
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}", {
|
|
129
129
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
130
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
130
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}", {
|
|
131
131
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
132
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
132
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}", {
|
|
133
133
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
134
134
|
}]],
|
|
135
135
|
d: [[".f12b9xdw{border-radius:inherit;}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","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","Bv12yb3","vin17d","Ezkn3b","w3vfg9","jpy9cc","Bqo2lbl","B6plc1d","I82g5a","brand","error","warning","success","k","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};\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%'\n },\n '100%': {\n left: '100%'\n }\n};\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2'\n },\n '50%': {\n opacity: '1'\n },\n '100%': {\n opacity: '.2'\n }\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 animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion\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":[]}
|
|
@@ -58,7 +58,7 @@ const indeterminateProgressBarReducedMotion = {
|
|
|
58
58
|
B68tc82: 0,
|
|
59
59
|
Bmxbyg5: 0,
|
|
60
60
|
Bpg54ce: "f1a3p1vp",
|
|
61
|
-
|
|
61
|
+
Bomf52o: "f1skxd4g"
|
|
62
62
|
},
|
|
63
63
|
rounded: {
|
|
64
64
|
Beyfa6y: 0,
|
|
@@ -108,7 +108,7 @@ const indeterminateProgressBarReducedMotion = {
|
|
|
108
108
|
],
|
|
109
109
|
m: [
|
|
110
110
|
[
|
|
111
|
-
"@media screen and (forced-colors: active){.
|
|
111
|
+
"@media screen and (forced-colors: active){.f1skxd4g{background-color:CanvasText;}}",
|
|
112
112
|
{
|
|
113
113
|
m: "screen and (forced-colors: active)"
|
|
114
114
|
}
|
|
@@ -119,7 +119,7 @@ const indeterminateProgressBarReducedMotion = {
|
|
|
119
119
|
* Styles for the ProgressBar bar
|
|
120
120
|
*/ const useBarStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
121
121
|
base: {
|
|
122
|
-
|
|
122
|
+
Bomf52o: "f1tnpuu0",
|
|
123
123
|
Beyfa6y: 0,
|
|
124
124
|
Bbmb7ep: 0,
|
|
125
125
|
Btl43ni: 0,
|
|
@@ -146,10 +146,10 @@ const indeterminateProgressBarReducedMotion = {
|
|
|
146
146
|
vin17d: "f1a27w2r",
|
|
147
147
|
Ezkn3b: "f452v7t",
|
|
148
148
|
w3vfg9: "f1cpbl36",
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
149
|
+
jpy9cc: "f3z2g5w",
|
|
150
|
+
Bqo2lbl: "fz5izi4",
|
|
151
|
+
B6plc1d: "fv40pdu",
|
|
152
|
+
I82g5a: "f1uj6jbf"
|
|
153
153
|
},
|
|
154
154
|
brand: {
|
|
155
155
|
De3pzq: "ftywsgz"
|
|
@@ -166,31 +166,31 @@ const indeterminateProgressBarReducedMotion = {
|
|
|
166
166
|
}, {
|
|
167
167
|
m: [
|
|
168
168
|
[
|
|
169
|
-
"@media screen and (forced-colors: active){.
|
|
169
|
+
"@media screen and (forced-colors: active){.f1tnpuu0{background-color:Highlight;}}",
|
|
170
170
|
{
|
|
171
171
|
m: "screen and (forced-colors: active)"
|
|
172
172
|
}
|
|
173
173
|
],
|
|
174
174
|
[
|
|
175
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
175
|
+
"@media screen and (prefers-reduced-motion: reduce){.f3z2g5w{max-width:100%;}}",
|
|
176
176
|
{
|
|
177
177
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
178
178
|
}
|
|
179
179
|
],
|
|
180
180
|
[
|
|
181
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
181
|
+
"@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}",
|
|
182
182
|
{
|
|
183
183
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
184
184
|
}
|
|
185
185
|
],
|
|
186
186
|
[
|
|
187
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
187
|
+
"@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}",
|
|
188
188
|
{
|
|
189
189
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
190
190
|
}
|
|
191
191
|
],
|
|
192
192
|
[
|
|
193
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
193
|
+
"@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}",
|
|
194
194
|
{
|
|
195
195
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
196
196
|
}
|
|
@@ -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};\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%'\n },\n '100%': {\n left: '100%'\n }\n};\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2'\n },\n '50%': {\n opacity: '1'\n },\n '100%': {\n opacity: '.2'\n }\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 animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion\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","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","
|
|
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};\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%'\n },\n '100%': {\n left: '100%'\n }\n};\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2'\n },\n '50%': {\n opacity: '1'\n },\n '100%': {\n opacity: '.2'\n }\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 animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion\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","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","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","Bv12yb3","vin17d","Ezkn3b","w3vfg9","jpy9cc","Bqo2lbl","B6plc1d","I82g5a","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","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.4.
|
|
3
|
+
"version": "9.4.11",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "^9.4.
|
|
22
|
-
"@fluentui/react-jsx-runtime": "^9.3.
|
|
23
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
21
|
+
"@fluentui/react-field": "^9.4.11",
|
|
22
|
+
"@fluentui/react-jsx-runtime": "^9.3.3",
|
|
23
|
+
"@fluentui/react-shared-contexts": "^9.26.0",
|
|
24
24
|
"@fluentui/react-theme": "^9.2.0",
|
|
25
|
-
"@fluentui/react-utilities": "^9.25.
|
|
26
|
-
"@griffel/react": "^1.5.
|
|
25
|
+
"@fluentui/react-utilities": "^9.25.4",
|
|
26
|
+
"@griffel/react": "^1.5.32",
|
|
27
27
|
"@swc/helpers": "^0.5.1"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|