@fluentui/react-progress 9.1.1 → 9.1.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +55 -1
- package/CHANGELOG.md +24 -2
- package/lib/components/ProgressBar/useProgressBarStyles.js +8 -21
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-amd/components/ProgressBar/useProgressBarStyles.js +5 -16
- package/lib-amd/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +8 -21
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 15 Mar 2023 10:17:03 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v9.1.3",
|
|
7
|
+
"version": "9.1.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "behowell@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-progress",
|
|
13
|
+
"commit": "5420a75a4a56f6004ef69b755ed2924edd98167e",
|
|
14
|
+
"comment": "fix: Smooth out animation of indeterminate progress bar"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-progress",
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.25",
|
|
20
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-progress",
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.1",
|
|
26
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-progress",
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v9.1.6",
|
|
32
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Mon, 13 Mar 2023 08:58:26 GMT",
|
|
39
|
+
"tag": "@fluentui/react-progress_v9.1.2",
|
|
40
|
+
"version": "9.1.2",
|
|
41
|
+
"comments": {
|
|
42
|
+
"patch": [
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-progress",
|
|
46
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.24",
|
|
47
|
+
"commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-progress",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.0",
|
|
53
|
+
"commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Fri, 10 Mar 2023 07:14:01 GMT",
|
|
6
60
|
"tag": "@fluentui/react-progress_v9.1.1",
|
|
7
61
|
"version": "9.1.1",
|
|
8
62
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 15 Mar 2023 10:17:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.3)
|
|
8
|
+
|
|
9
|
+
Wed, 15 Mar 2023 10:17:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.1.2..@fluentui/react-progress_v9.1.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Smooth out animation of indeterminate progress bar ([PR #27201](https://github.com/microsoft/fluentui/pull/27201) by behowell@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.25 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.3.1 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.1.6 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.2)
|
|
20
|
+
|
|
21
|
+
Mon, 13 Mar 2023 08:58:26 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.1.1..@fluentui/react-progress_v9.1.2)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.24 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.1)
|
|
8
30
|
|
|
9
|
-
Fri, 10 Mar 2023 07:
|
|
31
|
+
Fri, 10 Mar 2023 07:14:01 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.1.0..@fluentui/react-progress_v9.1.1)
|
|
11
33
|
|
|
12
34
|
### Patches
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
3
|
export const progressBarClassNames = {
|
|
5
4
|
root: 'fui-ProgressBar',
|
|
6
5
|
bar: 'fui-ProgressBar__bar'
|
|
@@ -14,18 +13,11 @@ const barThicknessValues = {
|
|
|
14
13
|
};
|
|
15
14
|
const indeterminateProgressBar = {
|
|
16
15
|
'0%': {
|
|
17
|
-
left: '-
|
|
16
|
+
left: '-33%' // matches indeterminate bar width
|
|
18
17
|
},
|
|
18
|
+
|
|
19
19
|
'100%': {
|
|
20
|
-
left: '100%
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
const indeterminateProgressBarRTL = {
|
|
24
|
-
'100%': {
|
|
25
|
-
right: '-100% /* @noflip */'
|
|
26
|
-
},
|
|
27
|
-
'0%': {
|
|
28
|
-
right: '100% /* @noflip */'
|
|
20
|
+
left: '100%'
|
|
29
21
|
}
|
|
30
22
|
};
|
|
31
23
|
/**
|
|
@@ -85,15 +77,13 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
85
77
|
B2u0y6b: "fa0wk36",
|
|
86
78
|
qhf8xq: "f10pi13n",
|
|
87
79
|
Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
|
|
88
|
-
Bv12yb3: "
|
|
80
|
+
Bv12yb3: ["fwd2bol", "f14gig94"],
|
|
89
81
|
vin17d: "f1a27w2r",
|
|
82
|
+
Ezkn3b: "f452v7t",
|
|
90
83
|
w3vfg9: "f1cpbl36",
|
|
91
84
|
Gqtpxc: "f4akx1t",
|
|
92
85
|
B3vm3ge: "f18p5put"
|
|
93
86
|
},
|
|
94
|
-
rtl: {
|
|
95
|
-
Bv12yb3: "fjhwsai"
|
|
96
|
-
},
|
|
97
87
|
brand: {
|
|
98
88
|
De3pzq: "ftywsgz"
|
|
99
89
|
},
|
|
@@ -114,8 +104,8 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
114
104
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
115
105
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
116
106
|
}]],
|
|
117
|
-
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".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 );}", ".
|
|
118
|
-
k: ["@-webkit-keyframes
|
|
107
|
+
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".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{-webkit-animation-name:f1keuaan;animation-name:f1keuaan;}", ".f14gig94{-webkit-animation-name:f10x8f8u;animation-name:f10x8f8u;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f452v7t{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
108
|
+
k: ["@-webkit-keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@-webkit-keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}", "@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}"]
|
|
119
109
|
});
|
|
120
110
|
/**
|
|
121
111
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -130,12 +120,9 @@ export const useProgressBarStyles_unstable = state => {
|
|
|
130
120
|
} = state;
|
|
131
121
|
const rootStyles = useRootStyles();
|
|
132
122
|
const barStyles = useBarStyles();
|
|
133
|
-
const {
|
|
134
|
-
dir
|
|
135
|
-
} = useFluent();
|
|
136
123
|
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
137
124
|
if (state.bar) {
|
|
138
|
-
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value
|
|
125
|
+
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);
|
|
139
126
|
}
|
|
140
127
|
if (state.bar && value !== undefined) {
|
|
141
128
|
state.bar.style = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","Gqtpxc","B3vm3ge","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } 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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n ...shorthands.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 ...shorthands.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 animationDuration: '0.01ms',\n animationIterationCount: '1',\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 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"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
|
|
@@ -15,18 +15,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
15
15
|
};
|
|
16
16
|
var indeterminateProgressBar = {
|
|
17
17
|
'0%': {
|
|
18
|
-
left: '-
|
|
18
|
+
left: '-33%', // matches indeterminate bar width
|
|
19
19
|
},
|
|
20
20
|
'100%': {
|
|
21
|
-
left: '100%
|
|
22
|
-
},
|
|
23
|
-
};
|
|
24
|
-
var indeterminateProgressBarRTL = {
|
|
25
|
-
'100%': {
|
|
26
|
-
right: '-100% /* @noflip */',
|
|
27
|
-
},
|
|
28
|
-
'0%': {
|
|
29
|
-
right: '100% /* @noflip */',
|
|
21
|
+
left: '100%',
|
|
30
22
|
},
|
|
31
23
|
};
|
|
32
24
|
/**
|
|
@@ -63,15 +55,13 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
63
55
|
backgroundImage: "linear-gradient(\n to right,\n " + react_theme_1.tokens.colorNeutralBackground6 + " 0%,\n " + react_theme_1.tokens.colorTransparentBackground + " 50%,\n " + react_theme_1.tokens.colorNeutralBackground6 + " 100%\n )",
|
|
64
56
|
animationName: indeterminateProgressBar,
|
|
65
57
|
animationDuration: '3s',
|
|
58
|
+
animationTimingFunction: 'linear',
|
|
66
59
|
animationIterationCount: 'infinite',
|
|
67
60
|
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
68
61
|
animationDuration: '0.01ms',
|
|
69
62
|
animationIterationCount: '1',
|
|
70
63
|
},
|
|
71
64
|
},
|
|
72
|
-
rtl: {
|
|
73
|
-
animationName: indeterminateProgressBarRTL,
|
|
74
|
-
},
|
|
75
65
|
brand: {
|
|
76
66
|
backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
|
|
77
67
|
},
|
|
@@ -92,10 +82,9 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
92
82
|
var color = state.color, max = state.max, shape = state.shape, thickness = state.thickness, value = state.value;
|
|
93
83
|
var rootStyles = useRootStyles();
|
|
94
84
|
var barStyles = useBarStyles();
|
|
95
|
-
var dir = react_shared_contexts_1.useFluent_unstable().dir;
|
|
96
85
|
state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
97
86
|
if (state.bar) {
|
|
98
|
-
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value
|
|
87
|
+
state.bar.className = react_1.mergeClasses(exports.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);
|
|
99
88
|
}
|
|
100
89
|
if (state.bar && value !== undefined) {
|
|
101
90
|
state.bar.style = tslib_1.__assign({ width: Math.min(100, Math.max(0, (value / max) * 100)) + '%' }, state.bar.style);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useProgressBarStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useProgressBarStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } 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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n ...shorthands.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 ...shorthands.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 animationDuration: '0.01ms',\n animationIterationCount: '1',\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 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"]}
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
|
|
7
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
8
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
9
|
-
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
10
9
|
exports.progressBarClassNames = {
|
|
11
10
|
root: 'fui-ProgressBar',
|
|
12
11
|
bar: 'fui-ProgressBar__bar'
|
|
@@ -20,18 +19,11 @@ const barThicknessValues = {
|
|
|
20
19
|
};
|
|
21
20
|
const indeterminateProgressBar = {
|
|
22
21
|
'0%': {
|
|
23
|
-
left: '-
|
|
22
|
+
left: '-33%' // matches indeterminate bar width
|
|
24
23
|
},
|
|
24
|
+
|
|
25
25
|
'100%': {
|
|
26
|
-
left: '100%
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
const indeterminateProgressBarRTL = {
|
|
30
|
-
'100%': {
|
|
31
|
-
right: '-100% /* @noflip */'
|
|
32
|
-
},
|
|
33
|
-
'0%': {
|
|
34
|
-
right: '100% /* @noflip */'
|
|
26
|
+
left: '100%'
|
|
35
27
|
}
|
|
36
28
|
};
|
|
37
29
|
/**
|
|
@@ -91,15 +83,13 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
91
83
|
B2u0y6b: "fa0wk36",
|
|
92
84
|
qhf8xq: "f10pi13n",
|
|
93
85
|
Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
|
|
94
|
-
Bv12yb3: "
|
|
86
|
+
Bv12yb3: ["fwd2bol", "f14gig94"],
|
|
95
87
|
vin17d: "f1a27w2r",
|
|
88
|
+
Ezkn3b: "f452v7t",
|
|
96
89
|
w3vfg9: "f1cpbl36",
|
|
97
90
|
Gqtpxc: "f4akx1t",
|
|
98
91
|
B3vm3ge: "f18p5put"
|
|
99
92
|
},
|
|
100
|
-
rtl: {
|
|
101
|
-
Bv12yb3: "fjhwsai"
|
|
102
|
-
},
|
|
103
93
|
brand: {
|
|
104
94
|
De3pzq: "ftywsgz"
|
|
105
95
|
},
|
|
@@ -120,8 +110,8 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
120
110
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
121
111
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
122
112
|
}]],
|
|
123
|
-
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".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 );}", ".
|
|
124
|
-
k: ["@-webkit-keyframes
|
|
113
|
+
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".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{-webkit-animation-name:f1keuaan;animation-name:f1keuaan;}", ".f14gig94{-webkit-animation-name:f10x8f8u;animation-name:f10x8f8u;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f452v7t{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
114
|
+
k: ["@-webkit-keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@-webkit-keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}", "@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}"]
|
|
125
115
|
});
|
|
126
116
|
/**
|
|
127
117
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -136,12 +126,9 @@ const useProgressBarStyles_unstable = state => {
|
|
|
136
126
|
} = state;
|
|
137
127
|
const rootStyles = useRootStyles();
|
|
138
128
|
const barStyles = useBarStyles();
|
|
139
|
-
const {
|
|
140
|
-
dir
|
|
141
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
|
142
129
|
state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
143
130
|
if (state.bar) {
|
|
144
|
-
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value
|
|
131
|
+
state.bar.className = react_1.mergeClasses(exports.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);
|
|
145
132
|
}
|
|
146
133
|
if (state.bar && value !== undefined) {
|
|
147
134
|
state.bar.style = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_1","require","react_theme_1","
|
|
1
|
+
{"version":3,"names":["react_1","require","react_theme_1","exports","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","useRootStyles","__styles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","Gqtpxc","B3vm3ge","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","mergeClasses","undefined","style","width","Math","min"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } 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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\n ...shorthands.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 ...shorthands.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 animationDuration: '0.01ms',\n animationIterationCount: '1',\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 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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.3",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "9.0.0-alpha.
|
|
36
|
-
"@fluentui/react-shared-contexts": "^9.3.
|
|
37
|
-
"@fluentui/react-theme": "^9.1.
|
|
38
|
-
"@fluentui/react-utilities": "^9.
|
|
35
|
+
"@fluentui/react-field": "9.0.0-alpha.25",
|
|
36
|
+
"@fluentui/react-shared-contexts": "^9.3.1",
|
|
37
|
+
"@fluentui/react-theme": "^9.1.6",
|
|
38
|
+
"@fluentui/react-utilities": "^9.7.0",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|