@fluentui/react-progress 9.3.7 → 9.4.0
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 +12 -2
- package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js +124 -0
- package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js +140 -0
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js.map +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:44 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:44 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.7..@fluentui/react-progress_v9.4.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.7)
|
|
8
18
|
|
|
9
|
-
Fri, 11 Jul 2025 15:
|
|
19
|
+
Fri, 11 Jul 2025 15:59:23 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.6..@fluentui/react-progress_v9.3.7)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
export const progressBarClassNames = {
|
|
4
|
+
root: 'fui-ProgressBar',
|
|
5
|
+
bar: 'fui-ProgressBar__bar'
|
|
6
|
+
};
|
|
7
|
+
// If the percentComplete is near 0, don't animate it.
|
|
8
|
+
// This prevents animations on reset to 0 scenarios.
|
|
9
|
+
const ZERO_THRESHOLD = 0.01;
|
|
10
|
+
const barThicknessValues = {
|
|
11
|
+
medium: '2px',
|
|
12
|
+
large: '4px'
|
|
13
|
+
};
|
|
14
|
+
const indeterminateProgressBar = {
|
|
15
|
+
'0%': {
|
|
16
|
+
left: '-33%'
|
|
17
|
+
},
|
|
18
|
+
'100%': {
|
|
19
|
+
left: '100%'
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
const indeterminateProgressBarReducedMotion = {
|
|
23
|
+
'0%': {
|
|
24
|
+
opacity: '.2'
|
|
25
|
+
},
|
|
26
|
+
'50%': {
|
|
27
|
+
opacity: '1'
|
|
28
|
+
},
|
|
29
|
+
'100%': {
|
|
30
|
+
opacity: '.2'
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Styles for the root slot
|
|
35
|
+
*/ const useRootStyles = makeStyles({
|
|
36
|
+
root: {
|
|
37
|
+
display: 'block',
|
|
38
|
+
backgroundColor: tokens.colorNeutralBackground6,
|
|
39
|
+
width: '100%',
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
'@media screen and (forced-colors: active)': {
|
|
42
|
+
backgroundColor: 'CanvasText'
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
rounded: {
|
|
46
|
+
borderRadius: tokens.borderRadiusMedium
|
|
47
|
+
},
|
|
48
|
+
square: {
|
|
49
|
+
borderRadius: tokens.borderRadiusNone
|
|
50
|
+
},
|
|
51
|
+
medium: {
|
|
52
|
+
height: barThicknessValues.medium
|
|
53
|
+
},
|
|
54
|
+
large: {
|
|
55
|
+
height: barThicknessValues.large
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
/**
|
|
59
|
+
* Styles for the ProgressBar bar
|
|
60
|
+
*/ const useBarStyles = makeStyles({
|
|
61
|
+
base: {
|
|
62
|
+
'@media screen and (forced-colors: active)': {
|
|
63
|
+
backgroundColor: 'Highlight'
|
|
64
|
+
},
|
|
65
|
+
borderRadius: 'inherit',
|
|
66
|
+
height: '100%'
|
|
67
|
+
},
|
|
68
|
+
nonZeroDeterminate: {
|
|
69
|
+
transitionProperty: 'width',
|
|
70
|
+
transitionDuration: '0.3s',
|
|
71
|
+
transitionTimingFunction: 'ease'
|
|
72
|
+
},
|
|
73
|
+
indeterminate: {
|
|
74
|
+
maxWidth: '33%',
|
|
75
|
+
position: 'relative',
|
|
76
|
+
backgroundImage: `linear-gradient(
|
|
77
|
+
to right,
|
|
78
|
+
${tokens.colorNeutralBackground6} 0%,
|
|
79
|
+
${tokens.colorTransparentBackground} 50%,
|
|
80
|
+
${tokens.colorNeutralBackground6} 100%
|
|
81
|
+
)`,
|
|
82
|
+
animationName: indeterminateProgressBar,
|
|
83
|
+
animationDuration: '3s',
|
|
84
|
+
animationTimingFunction: 'linear',
|
|
85
|
+
animationIterationCount: 'infinite',
|
|
86
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
87
|
+
maxWidth: '100%',
|
|
88
|
+
animationIterationCount: 'infinite',
|
|
89
|
+
animationDuration: '3s',
|
|
90
|
+
animationName: indeterminateProgressBarReducedMotion
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
brand: {
|
|
94
|
+
backgroundColor: tokens.colorCompoundBrandBackground
|
|
95
|
+
},
|
|
96
|
+
error: {
|
|
97
|
+
backgroundColor: tokens.colorPaletteRedBackground3
|
|
98
|
+
},
|
|
99
|
+
warning: {
|
|
100
|
+
backgroundColor: tokens.colorPaletteDarkOrangeBackground3
|
|
101
|
+
},
|
|
102
|
+
success: {
|
|
103
|
+
backgroundColor: tokens.colorPaletteGreenBackground3
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
/**
|
|
107
|
+
* Apply styling to the ProgressBar slots based on the state
|
|
108
|
+
*/ export const useProgressBarStyles_unstable = (state)=>{
|
|
109
|
+
'use no memo';
|
|
110
|
+
const { color, max, shape, thickness, value } = state;
|
|
111
|
+
const rootStyles = useRootStyles();
|
|
112
|
+
const barStyles = useBarStyles();
|
|
113
|
+
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
114
|
+
if (state.bar) {
|
|
115
|
+
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);
|
|
116
|
+
}
|
|
117
|
+
if (state.bar && value !== undefined) {
|
|
118
|
+
state.bar.style = {
|
|
119
|
+
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
120
|
+
...state.bar.style
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
return state;
|
|
124
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["import { 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<ProgressBarSlots> = {\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\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%', // matches indeterminate bar width\n },\n '100%': {\n left: '100%',\n },\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/**\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 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\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","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
progressBarClassNames: function() {
|
|
13
|
+
return progressBarClassNames;
|
|
14
|
+
},
|
|
15
|
+
useProgressBarStyles_unstable: function() {
|
|
16
|
+
return useProgressBarStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const progressBarClassNames = {
|
|
22
|
+
root: 'fui-ProgressBar',
|
|
23
|
+
bar: 'fui-ProgressBar__bar'
|
|
24
|
+
};
|
|
25
|
+
// If the percentComplete is near 0, don't animate it.
|
|
26
|
+
// This prevents animations on reset to 0 scenarios.
|
|
27
|
+
const ZERO_THRESHOLD = 0.01;
|
|
28
|
+
const barThicknessValues = {
|
|
29
|
+
medium: '2px',
|
|
30
|
+
large: '4px'
|
|
31
|
+
};
|
|
32
|
+
const indeterminateProgressBar = {
|
|
33
|
+
'0%': {
|
|
34
|
+
left: '-33%'
|
|
35
|
+
},
|
|
36
|
+
'100%': {
|
|
37
|
+
left: '100%'
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const indeterminateProgressBarReducedMotion = {
|
|
41
|
+
'0%': {
|
|
42
|
+
opacity: '.2'
|
|
43
|
+
},
|
|
44
|
+
'50%': {
|
|
45
|
+
opacity: '1'
|
|
46
|
+
},
|
|
47
|
+
'100%': {
|
|
48
|
+
opacity: '.2'
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* Styles for the root slot
|
|
53
|
+
*/ const useRootStyles = (0, _react.makeStyles)({
|
|
54
|
+
root: {
|
|
55
|
+
display: 'block',
|
|
56
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground6,
|
|
57
|
+
width: '100%',
|
|
58
|
+
overflow: 'hidden',
|
|
59
|
+
'@media screen and (forced-colors: active)': {
|
|
60
|
+
backgroundColor: 'CanvasText'
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
rounded: {
|
|
64
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
65
|
+
},
|
|
66
|
+
square: {
|
|
67
|
+
borderRadius: _reacttheme.tokens.borderRadiusNone
|
|
68
|
+
},
|
|
69
|
+
medium: {
|
|
70
|
+
height: barThicknessValues.medium
|
|
71
|
+
},
|
|
72
|
+
large: {
|
|
73
|
+
height: barThicknessValues.large
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
/**
|
|
77
|
+
* Styles for the ProgressBar bar
|
|
78
|
+
*/ const useBarStyles = (0, _react.makeStyles)({
|
|
79
|
+
base: {
|
|
80
|
+
'@media screen and (forced-colors: active)': {
|
|
81
|
+
backgroundColor: 'Highlight'
|
|
82
|
+
},
|
|
83
|
+
borderRadius: 'inherit',
|
|
84
|
+
height: '100%'
|
|
85
|
+
},
|
|
86
|
+
nonZeroDeterminate: {
|
|
87
|
+
transitionProperty: 'width',
|
|
88
|
+
transitionDuration: '0.3s',
|
|
89
|
+
transitionTimingFunction: 'ease'
|
|
90
|
+
},
|
|
91
|
+
indeterminate: {
|
|
92
|
+
maxWidth: '33%',
|
|
93
|
+
position: 'relative',
|
|
94
|
+
backgroundImage: `linear-gradient(
|
|
95
|
+
to right,
|
|
96
|
+
${_reacttheme.tokens.colorNeutralBackground6} 0%,
|
|
97
|
+
${_reacttheme.tokens.colorTransparentBackground} 50%,
|
|
98
|
+
${_reacttheme.tokens.colorNeutralBackground6} 100%
|
|
99
|
+
)`,
|
|
100
|
+
animationName: indeterminateProgressBar,
|
|
101
|
+
animationDuration: '3s',
|
|
102
|
+
animationTimingFunction: 'linear',
|
|
103
|
+
animationIterationCount: 'infinite',
|
|
104
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
105
|
+
maxWidth: '100%',
|
|
106
|
+
animationIterationCount: 'infinite',
|
|
107
|
+
animationDuration: '3s',
|
|
108
|
+
animationName: indeterminateProgressBarReducedMotion
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
brand: {
|
|
112
|
+
backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground
|
|
113
|
+
},
|
|
114
|
+
error: {
|
|
115
|
+
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3
|
|
116
|
+
},
|
|
117
|
+
warning: {
|
|
118
|
+
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3
|
|
119
|
+
},
|
|
120
|
+
success: {
|
|
121
|
+
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
const useProgressBarStyles_unstable = (state)=>{
|
|
125
|
+
'use no memo';
|
|
126
|
+
const { color, max, shape, thickness, value } = state;
|
|
127
|
+
const rootStyles = useRootStyles();
|
|
128
|
+
const barStyles = useBarStyles();
|
|
129
|
+
state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
130
|
+
if (state.bar) {
|
|
131
|
+
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);
|
|
132
|
+
}
|
|
133
|
+
if (state.bar && value !== undefined) {
|
|
134
|
+
state.bar.style = {
|
|
135
|
+
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
136
|
+
...state.bar.style
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
return state;
|
|
140
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["import { 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<ProgressBarSlots> = {\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\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%', // matches indeterminate bar width\n },\n '100%': {\n left: '100%',\n },\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/**\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 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\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":["progressBarClassNames","useProgressBarStyles_unstable","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","makeStyles","display","backgroundColor","tokens","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","state","color","max","shape","thickness","value","rootStyles","barStyles","className","mergeClasses","undefined","style","Math","min"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.0",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "^9.
|
|
21
|
+
"@fluentui/react-field": "^9.4.0",
|
|
22
22
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
23
23
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
24
24
|
"@fluentui/react-theme": "^9.1.24",
|