@fluentui/react-progress 9.3.6 → 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 +22 -2
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js +22 -5
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- 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.js +31 -5
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- 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,32 @@
|
|
|
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
|
+
|
|
17
|
+
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.7)
|
|
18
|
+
|
|
19
|
+
Fri, 11 Jul 2025 15:59:23 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.6..@fluentui/react-progress_v9.3.7)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: add subtle animation for indeterminate progress bar when reduced motion mode is enabled ([PR #34667](https://github.com/microsoft/fluentui/pull/34667) by dmytrokirpa@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-field to v9.3.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.6)
|
|
8
28
|
|
|
9
|
-
Fri, 04 Jul 2025 10:
|
|
29
|
+
Fri, 04 Jul 2025 10:02:51 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.5..@fluentui/react-progress_v9.3.6)
|
|
11
31
|
|
|
12
32
|
### Patches
|
|
@@ -19,6 +19,17 @@ const indeterminateProgressBar = {
|
|
|
19
19
|
left: '100%'
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
+
const indeterminateProgressBarReducedMotion = {
|
|
23
|
+
'0%': {
|
|
24
|
+
opacity: '.2'
|
|
25
|
+
},
|
|
26
|
+
'50%': {
|
|
27
|
+
opacity: '1'
|
|
28
|
+
},
|
|
29
|
+
'100%': {
|
|
30
|
+
opacity: '.2'
|
|
31
|
+
}
|
|
32
|
+
};
|
|
22
33
|
/**
|
|
23
34
|
* Styles for the root slot
|
|
24
35
|
*/
|
|
@@ -90,8 +101,10 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
90
101
|
vin17d: "f1a27w2r",
|
|
91
102
|
Ezkn3b: "f452v7t",
|
|
92
103
|
w3vfg9: "f1cpbl36",
|
|
93
|
-
|
|
94
|
-
B3vm3ge: "
|
|
104
|
+
B3ks32h: "f2xo07b",
|
|
105
|
+
B3vm3ge: "f1f2ih6z",
|
|
106
|
+
Gqtpxc: "f7h4d4t",
|
|
107
|
+
vr3tzx: "f32r5lb"
|
|
95
108
|
},
|
|
96
109
|
brand: {
|
|
97
110
|
De3pzq: "ftywsgz"
|
|
@@ -108,15 +121,19 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
108
121
|
}, {
|
|
109
122
|
m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
110
123
|
m: "screen and (forced-colors: active)"
|
|
111
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
124
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f2xo07b{max-width:100%;}}", {
|
|
125
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
126
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1f2ih6z{animation-iteration-count:infinite;}}", {
|
|
127
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
128
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f7h4d4t{animation-duration:3s;}}", {
|
|
112
129
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
113
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
130
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f32r5lb{animation-name:ftc26vs;}}", {
|
|
114
131
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
115
132
|
}]],
|
|
116
133
|
d: [[".f12b9xdw{border-radius:inherit;}", {
|
|
117
134
|
p: -1
|
|
118
135
|
}], ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".fwd2bol{animation-name:f1keuaan;}", ".f14gig94{animation-name:f10x8f8u;}", ".f1a27w2r{animation-duration:3s;}", ".f452v7t{animation-timing-function:linear;}", ".f1cpbl36{animation-iteration-count:infinite;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
119
|
-
k: ["@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}"]
|
|
136
|
+
k: ["@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}", "@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"]
|
|
120
137
|
});
|
|
121
138
|
/**
|
|
122
139
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bpep1pd","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","
|
|
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","Bpep1pd","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","B3ks32h","B3vm3ge","Gqtpxc","vr3tzx","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":["import { 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":[]}
|
|
@@ -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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"}
|
|
@@ -36,6 +36,17 @@ const indeterminateProgressBar = {
|
|
|
36
36
|
left: '100%'
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
|
+
const indeterminateProgressBarReducedMotion = {
|
|
40
|
+
'0%': {
|
|
41
|
+
opacity: '.2'
|
|
42
|
+
},
|
|
43
|
+
'50%': {
|
|
44
|
+
opacity: '1'
|
|
45
|
+
},
|
|
46
|
+
'100%': {
|
|
47
|
+
opacity: '.2'
|
|
48
|
+
}
|
|
49
|
+
};
|
|
39
50
|
/**
|
|
40
51
|
* Styles for the root slot
|
|
41
52
|
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -134,8 +145,10 @@ const indeterminateProgressBar = {
|
|
|
134
145
|
vin17d: "f1a27w2r",
|
|
135
146
|
Ezkn3b: "f452v7t",
|
|
136
147
|
w3vfg9: "f1cpbl36",
|
|
137
|
-
|
|
138
|
-
B3vm3ge: "
|
|
148
|
+
B3ks32h: "f2xo07b",
|
|
149
|
+
B3vm3ge: "f1f2ih6z",
|
|
150
|
+
Gqtpxc: "f7h4d4t",
|
|
151
|
+
vr3tzx: "f32r5lb"
|
|
139
152
|
},
|
|
140
153
|
brand: {
|
|
141
154
|
De3pzq: "ftywsgz"
|
|
@@ -158,13 +171,25 @@ const indeterminateProgressBar = {
|
|
|
158
171
|
}
|
|
159
172
|
],
|
|
160
173
|
[
|
|
161
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
174
|
+
"@media screen and (prefers-reduced-motion: reduce){.f2xo07b{max-width:100%;}}",
|
|
175
|
+
{
|
|
176
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
177
|
+
}
|
|
178
|
+
],
|
|
179
|
+
[
|
|
180
|
+
"@media screen and (prefers-reduced-motion: reduce){.f1f2ih6z{animation-iteration-count:infinite;}}",
|
|
181
|
+
{
|
|
182
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
183
|
+
}
|
|
184
|
+
],
|
|
185
|
+
[
|
|
186
|
+
"@media screen and (prefers-reduced-motion: reduce){.f7h4d4t{animation-duration:3s;}}",
|
|
162
187
|
{
|
|
163
188
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
164
189
|
}
|
|
165
190
|
],
|
|
166
191
|
[
|
|
167
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
192
|
+
"@media screen and (prefers-reduced-motion: reduce){.f32r5lb{animation-name:ftc26vs;}}",
|
|
168
193
|
{
|
|
169
194
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
170
195
|
}
|
|
@@ -197,7 +222,8 @@ const indeterminateProgressBar = {
|
|
|
197
222
|
],
|
|
198
223
|
k: [
|
|
199
224
|
"@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}",
|
|
200
|
-
"@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}"
|
|
225
|
+
"@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}",
|
|
226
|
+
"@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"
|
|
201
227
|
]
|
|
202
228
|
});
|
|
203
229
|
const useProgressBarStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["import { 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};\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
|
|
1
|
+
{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["import { 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":["progressBarClassNames","useProgressBarStyles_unstable","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","__styles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bpep1pd","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","B3ks32h","B3vm3ge","Gqtpxc","vr3tzx","brand","error","warning","success","k","state","color","max","shape","thickness","value","rootStyles","barStyles","className","mergeClasses","undefined","style","width","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",
|