@fluentui/react-progress 0.0.0-nightly-20230302-0419.1 → 0.0.0-nightly-20230306-0424.1
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.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/components/ProgressBar/useProgressBar.js +5 -3
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBarStyles.js +10 -16
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib/utils/clampMax.js +11 -0
- package/lib/utils/clampMax.js.map +1 -0
- package/lib/utils/clampValue.js +18 -0
- package/lib/utils/clampValue.js.map +1 -0
- package/lib/utils/index.js +3 -0
- package/lib/utils/index.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/useProgressBar.js +5 -3
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +10 -16
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-commonjs/utils/clampMax.js +18 -0
- package/lib-commonjs/utils/clampMax.js.map +1 -0
- package/lib-commonjs/utils/clampValue.js +25 -0
- package/lib-commonjs/utils/clampValue.js.map +1 -0
- package/lib-commonjs/utils/index.js +9 -0
- package/lib-commonjs/utils/index.js.map +1 -0
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-progress_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 06 Mar 2023 04:33:02 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v0.0.0-nightly-20230306-0424.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230306-0424.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-progress",
|
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230306-0424.1",
|
|
20
|
+
"commit": "21155fb094f73d947066cedf7577d2483dfab473"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-progress",
|
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230306-0424.1",
|
|
26
|
+
"commit": "21155fb094f73d947066cedf7577d2483dfab473"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-progress",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230306-0424.1",
|
|
32
|
+
"commit": "21155fb094f73d947066cedf7577d2483dfab473"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-progress",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230306-0424.1",
|
|
38
|
+
"commit": "21155fb094f73d947066cedf7577d2483dfab473"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-progress",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230306-0424.1",
|
|
44
|
+
"commit": "21155fb094f73d947066cedf7577d2483dfab473"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +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 Mon, 06 Mar 2023 04:33:02 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230306-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20230306-0424.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0..@fluentui/react-progress_v0.0.0-nightly-
|
|
9
|
+
Mon, 06 Mar 2023 04:33:02 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0..@fluentui/react-progress_v0.0.0-nightly-20230306-0424.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0)
|
|
22
22
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
|
2
|
+
import { clampValue, clampMax } from '../../utils/index';
|
|
2
3
|
/**
|
|
3
4
|
* Create the state required to render ProgressBar.
|
|
4
5
|
*
|
|
@@ -9,14 +10,15 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
|
9
10
|
* @param ref - reference to root HTMLElement of ProgressBar
|
|
10
11
|
*/
|
|
11
12
|
export const useProgressBar_unstable = (props, ref) => {
|
|
13
|
+
var _a;
|
|
12
14
|
// Props
|
|
13
15
|
const {
|
|
14
16
|
color = 'brand',
|
|
15
|
-
max = 1.0,
|
|
16
17
|
shape = 'rounded',
|
|
17
|
-
thickness = 'medium'
|
|
18
|
-
value
|
|
18
|
+
thickness = 'medium'
|
|
19
19
|
} = props;
|
|
20
|
+
const max = clampMax((_a = props.max) !== null && _a !== void 0 ? _a : 1);
|
|
21
|
+
const value = clampValue(props.value, max);
|
|
20
22
|
const root = getNativeElementProps('div', {
|
|
21
23
|
ref,
|
|
22
24
|
role: 'progressbar',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getNativeElementProps","resolveShorthand","useProgressBar_unstable","props","ref","color","
|
|
1
|
+
{"version":3,"names":["getNativeElementProps","resolveShorthand","clampValue","clampMax","useProgressBar_unstable","props","ref","color","shape","thickness","max","_a","value","root","role","undefined","bar","required","state","components"],"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { color = 'brand', shape = 'rounded', thickness = 'medium' } = props;\n const max = clampMax(props.max ?? 1);\n const value = clampValue(props.value, max);\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n color,\n max,\n shape,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,UAAU,EAAEC,QAAQ,QAAQ,mBAAmB;AAGxD;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAC1E,MAAMK,GAAG,GAAGP,QAAQ,CAAC,CAAAQ,EAAA,GAAAN,KAAK,CAACK,GAAG,cAAAC,EAAA,cAAAA,EAAA,GAAI,CAAC,CAAC;EACpC,MAAMC,KAAK,GAAGV,UAAU,CAACG,KAAK,CAACO,KAAK,EAAEF,GAAG,CAAC;EAE1C,MAAMG,IAAI,GAAGb,qBAAqB,CAAC,KAAK,EAAE;IACxCM,GAAG;IACHQ,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGL,GAAG,GAAGK,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGP;GACJ,CAAC;EAEF,MAAMW,GAAG,GAAGf,gBAAgB,CAACI,KAAK,CAACW,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BX,KAAK;IACLG,GAAG;IACHF,KAAK;IACLC,SAAS;IACTG,KAAK;IACLO,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC"}
|
|
@@ -38,9 +38,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
38
38
|
Bdqf98w: "fhb5wj7",
|
|
39
39
|
B68tc82: "f1p9o1ba",
|
|
40
40
|
Bmxbyg5: "f1sil6mw",
|
|
41
|
-
|
|
42
|
-
tu2nte: "f1mcb20s",
|
|
43
|
-
y0r1ed: "fek7wd8"
|
|
41
|
+
Bpep1pd: "fu42dvn"
|
|
44
42
|
},
|
|
45
43
|
rounded: {
|
|
46
44
|
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
@@ -62,11 +60,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
62
60
|
}
|
|
63
61
|
}, {
|
|
64
62
|
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
65
|
-
m: [["@media screen and (forced-colors: active){.
|
|
66
|
-
m: "screen and (forced-colors: active)"
|
|
67
|
-
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
|
68
|
-
m: "screen and (forced-colors: active)"
|
|
69
|
-
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
|
63
|
+
m: [["@media screen and (forced-colors: active){.fu42dvn{background-color:CanvasText;}}", {
|
|
70
64
|
m: "screen and (forced-colors: active)"
|
|
71
65
|
}]]
|
|
72
66
|
});
|
|
@@ -75,6 +69,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
75
69
|
*/
|
|
76
70
|
const useBarStyles = /*#__PURE__*/__styles({
|
|
77
71
|
base: {
|
|
72
|
+
Bpep1pd: "f1neahkh",
|
|
78
73
|
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
79
74
|
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
80
75
|
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
@@ -105,8 +100,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
105
100
|
Bv12yb3: "fjhwsai"
|
|
106
101
|
},
|
|
107
102
|
brand: {
|
|
108
|
-
De3pzq: "ftywsgz"
|
|
109
|
-
Bpep1pd: "f1neahkh"
|
|
103
|
+
De3pzq: "ftywsgz"
|
|
110
104
|
},
|
|
111
105
|
error: {
|
|
112
106
|
De3pzq: "fdl5y0r"
|
|
@@ -118,15 +112,15 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
118
112
|
De3pzq: "flxk52p"
|
|
119
113
|
}
|
|
120
114
|
}, {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
115
|
+
m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
116
|
+
m: "screen and (forced-colors: active)"
|
|
117
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
124
118
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
125
119
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
126
120
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
127
|
-
}],
|
|
128
|
-
|
|
129
|
-
}]
|
|
121
|
+
}]],
|
|
122
|
+
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;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".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 );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
123
|
+
k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
|
130
124
|
});
|
|
131
125
|
/**
|
|
132
126
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","mc9l5x","De3pzq","Bdqf98w","B68tc82","Bmxbyg5","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","mc9l5x","De3pzq","Bdqf98w","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","w3vfg9","Gqtpxc","B3vm3ge","rtl","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","className","undefined","style","width","Math","min"],"sources":["../../../../../../../../../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 { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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: '-100% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\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 },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\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 animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\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 const { dir } = useFluent();\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 && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\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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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const clampMax = max => {
|
|
2
|
+
const internalMax = max <= 0 ? 1 : max;
|
|
3
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
4
|
+
if (max <= 0) {
|
|
5
|
+
// eslint-disable-next-line no-console
|
|
6
|
+
console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return internalMax;
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=clampMax.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["clampMax","max","internalMax","process","env","NODE_ENV","console","error"],"sources":["../../../../../../../../packages/react-components/react-progress/src/utils/clampMax.ts"],"sourcesContent":["export const clampMax = (max: number): number => {\n const internalMax = max <= 0 ? 1 : max;\n\n if (process.env.NODE_ENV !== 'production') {\n if (max <= 0) {\n // eslint-disable-next-line no-console\n console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);\n }\n }\n return internalMax;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,GAAIC,GAAW,IAAY;EAC9C,MAAMC,WAAW,GAAGD,GAAG,IAAI,CAAC,GAAG,CAAC,GAAGA,GAAG;EAEtC,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIJ,GAAG,IAAI,CAAC,EAAE;MACZ;MACAK,OAAO,CAACC,KAAK,CAAC,wDAAwDN,GAAG,EAAE,CAAC;;;EAGhF,OAAOC,WAAW;AACpB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export const clampValue = (value, max) => {
|
|
2
|
+
if (value === undefined) {
|
|
3
|
+
return value;
|
|
4
|
+
}
|
|
5
|
+
const internalValue = value < 0 ? 0 : value > max ? max : value;
|
|
6
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
7
|
+
if (value < 0) {
|
|
8
|
+
// eslint-disable-next-line no-console
|
|
9
|
+
console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);
|
|
10
|
+
}
|
|
11
|
+
if (value > max) {
|
|
12
|
+
// eslint-disable-next-line no-console
|
|
13
|
+
console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return internalValue;
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=clampValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["clampValue","value","max","undefined","internalValue","process","env","NODE_ENV","console","error"],"sources":["../../../../../../../../packages/react-components/react-progress/src/utils/clampValue.ts"],"sourcesContent":["export const clampValue = (value: number | undefined, max: number): number | undefined => {\n if (value === undefined) {\n return value;\n }\n const internalValue = value < 0 ? 0 : value > max ? max : value;\n\n if (process.env.NODE_ENV !== 'production') {\n if (value < 0) {\n // eslint-disable-next-line no-console\n console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);\n }\n if (value > max) {\n // eslint-disable-next-line no-console\n console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);\n }\n }\n return internalValue;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,UAAU,GAAGA,CAACC,KAAyB,EAAEC,GAAW,KAAwB;EACvF,IAAID,KAAK,KAAKE,SAAS,EAAE;IACvB,OAAOF,KAAK;;EAEd,MAAMG,aAAa,GAAGH,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK,GAAGC,GAAG,GAAGA,GAAG,GAAGD,KAAK;EAE/D,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIN,KAAK,GAAG,CAAC,EAAE;MACb;MACAO,OAAO,CAACC,KAAK,CAAC,2EAA2ER,KAAK,EAAE,CAAC;;IAEnG,IAAIA,KAAK,GAAGC,GAAG,EAAE;MACf;MACAM,OAAO,CAACC,KAAK,CAAC,yEAAyER,KAAK,UAAUC,GAAG,EAAE,CAAC;;;EAGhH,OAAOE,aAAa;AACtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-progress/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC","sourcesContent":["export * from './clampMax';\nexport * from './clampValue';\n"]}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useProgressBar_unstable = void 0;
|
|
7
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
8
|
+
const index_1 = /*#__PURE__*/require("../../utils/index");
|
|
8
9
|
/**
|
|
9
10
|
* Create the state required to render ProgressBar.
|
|
10
11
|
*
|
|
@@ -15,14 +16,15 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
15
16
|
* @param ref - reference to root HTMLElement of ProgressBar
|
|
16
17
|
*/
|
|
17
18
|
const useProgressBar_unstable = (props, ref) => {
|
|
19
|
+
var _a;
|
|
18
20
|
// Props
|
|
19
21
|
const {
|
|
20
22
|
color = 'brand',
|
|
21
|
-
max = 1.0,
|
|
22
23
|
shape = 'rounded',
|
|
23
|
-
thickness = 'medium'
|
|
24
|
-
value
|
|
24
|
+
thickness = 'medium'
|
|
25
25
|
} = props;
|
|
26
|
+
const max = index_1.clampMax((_a = props.max) !== null && _a !== void 0 ? _a : 1);
|
|
27
|
+
const value = index_1.clampValue(props.value, max);
|
|
26
28
|
const root = react_utilities_1.getNativeElementProps('div', {
|
|
27
29
|
ref,
|
|
28
30
|
role: 'progressbar',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_utilities_1","require","useProgressBar_unstable","props","ref","color","max","
|
|
1
|
+
{"version":3,"names":["react_utilities_1","require","index_1","useProgressBar_unstable","props","ref","color","shape","thickness","max","clampMax","_a","value","clampValue","root","getNativeElementProps","role","undefined","bar","resolveShorthand","required","state","components","exports"],"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { color = 'brand', shape = 'rounded', thickness = 'medium' } = props;\n const max = clampMax(props.max ?? 1);\n const value = clampValue(props.value, max);\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n color,\n max,\n shape,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AAGA;;;;;;;;;AASO,MAAME,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAC1E,MAAMK,GAAG,GAAGP,OAAA,CAAAQ,QAAQ,CAAC,CAAAC,EAAA,GAAAP,KAAK,CAACK,GAAG,cAAAE,EAAA,cAAAA,EAAA,GAAI,CAAC,CAAC;EACpC,MAAMC,KAAK,GAAGV,OAAA,CAAAW,UAAU,CAACT,KAAK,CAACQ,KAAK,EAAEH,GAAG,CAAC;EAE1C,MAAMK,IAAI,GAAGd,iBAAA,CAAAe,qBAAqB,CAAC,KAAK,EAAE;IACxCV,GAAG;IACHW,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEJ,KAAK,KAAKK,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEL,KAAK,KAAKK,SAAS,GAAGR,GAAG,GAAGQ,SAAS;IACtD,eAAe,EAAEL,KAAK;IACtB,GAAGR;GACJ,CAAC;EAEF,MAAMc,GAAG,GAAGlB,iBAAA,CAAAmB,gBAAgB,CAACf,KAAK,CAACc,GAAG,EAAE;IACtCE,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9Bf,KAAK;IACLG,GAAG;IACHF,KAAK;IACLC,SAAS;IACTI,KAAK;IACLU,UAAU,EAAE;MACVR,IAAI,EAAE,KAAK;MACXI,GAAG,EAAE;KACN;IACDJ,IAAI;IACJI;GACD;EAED,OAAOG,KAAK;AACd,CAAC;AAlCYE,OAAA,CAAApB,uBAAuB,GAAAA,uBAAA"}
|
|
@@ -44,9 +44,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
44
44
|
Bdqf98w: "fhb5wj7",
|
|
45
45
|
B68tc82: "f1p9o1ba",
|
|
46
46
|
Bmxbyg5: "f1sil6mw",
|
|
47
|
-
|
|
48
|
-
tu2nte: "f1mcb20s",
|
|
49
|
-
y0r1ed: "fek7wd8"
|
|
47
|
+
Bpep1pd: "fu42dvn"
|
|
50
48
|
},
|
|
51
49
|
rounded: {
|
|
52
50
|
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
@@ -68,11 +66,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
68
66
|
}
|
|
69
67
|
}, {
|
|
70
68
|
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
71
|
-
m: [["@media screen and (forced-colors: active){.
|
|
72
|
-
m: "screen and (forced-colors: active)"
|
|
73
|
-
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
|
74
|
-
m: "screen and (forced-colors: active)"
|
|
75
|
-
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
|
69
|
+
m: [["@media screen and (forced-colors: active){.fu42dvn{background-color:CanvasText;}}", {
|
|
76
70
|
m: "screen and (forced-colors: active)"
|
|
77
71
|
}]]
|
|
78
72
|
});
|
|
@@ -81,6 +75,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
81
75
|
*/
|
|
82
76
|
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
83
77
|
base: {
|
|
78
|
+
Bpep1pd: "f1neahkh",
|
|
84
79
|
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
85
80
|
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
86
81
|
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
@@ -111,8 +106,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
111
106
|
Bv12yb3: "fjhwsai"
|
|
112
107
|
},
|
|
113
108
|
brand: {
|
|
114
|
-
De3pzq: "ftywsgz"
|
|
115
|
-
Bpep1pd: "f1neahkh"
|
|
109
|
+
De3pzq: "ftywsgz"
|
|
116
110
|
},
|
|
117
111
|
error: {
|
|
118
112
|
De3pzq: "fdl5y0r"
|
|
@@ -124,15 +118,15 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
124
118
|
De3pzq: "flxk52p"
|
|
125
119
|
}
|
|
126
120
|
}, {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
121
|
+
m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
122
|
+
m: "screen and (forced-colors: active)"
|
|
123
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
130
124
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
131
125
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
132
126
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
133
|
-
}],
|
|
134
|
-
|
|
135
|
-
}]
|
|
127
|
+
}]],
|
|
128
|
+
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;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".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 );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
129
|
+
k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
|
136
130
|
});
|
|
137
131
|
/**
|
|
138
132
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_1","require","react_theme_1","react_shared_contexts_1","exports","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","__styles","mc9l5x","De3pzq","Bdqf98w","B68tc82","Bmxbyg5","
|
|
1
|
+
{"version":3,"names":["react_1","require","react_theme_1","react_shared_contexts_1","exports","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","__styles","mc9l5x","De3pzq","Bdqf98w","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","w3vfg9","Gqtpxc","B3vm3ge","rtl","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","useFluent_unstable","className","mergeClasses","undefined","style","width","Math","min"],"sources":["../../../../../../../../../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 { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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: '-100% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\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 },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\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 animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\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 const { dir } = useFluent();\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 && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\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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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.clampMax = void 0;
|
|
7
|
+
const clampMax = max => {
|
|
8
|
+
const internalMax = max <= 0 ? 1 : max;
|
|
9
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
10
|
+
if (max <= 0) {
|
|
11
|
+
// eslint-disable-next-line no-console
|
|
12
|
+
console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return internalMax;
|
|
16
|
+
};
|
|
17
|
+
exports.clampMax = clampMax;
|
|
18
|
+
//# sourceMappingURL=clampMax.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["clampMax","max","internalMax","process","env","NODE_ENV","console","error","exports"],"sources":["../../../../../../../../packages/react-components/react-progress/src/utils/clampMax.ts"],"sourcesContent":["export const clampMax = (max: number): number => {\n const internalMax = max <= 0 ? 1 : max;\n\n if (process.env.NODE_ENV !== 'production') {\n if (max <= 0) {\n // eslint-disable-next-line no-console\n console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);\n }\n }\n return internalMax;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,QAAQ,GAAIC,GAAW,IAAY;EAC9C,MAAMC,WAAW,GAAGD,GAAG,IAAI,CAAC,GAAG,CAAC,GAAGA,GAAG;EAEtC,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIJ,GAAG,IAAI,CAAC,EAAE;MACZ;MACAK,OAAO,CAACC,KAAK,CAAC,wDAAwDN,GAAG,EAAE,CAAC;;;EAGhF,OAAOC,WAAW;AACpB,CAAC;AAVYM,OAAA,CAAAR,QAAQ,GAAAA,QAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.clampValue = void 0;
|
|
7
|
+
const clampValue = (value, max) => {
|
|
8
|
+
if (value === undefined) {
|
|
9
|
+
return value;
|
|
10
|
+
}
|
|
11
|
+
const internalValue = value < 0 ? 0 : value > max ? max : value;
|
|
12
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
13
|
+
if (value < 0) {
|
|
14
|
+
// eslint-disable-next-line no-console
|
|
15
|
+
console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);
|
|
16
|
+
}
|
|
17
|
+
if (value > max) {
|
|
18
|
+
// eslint-disable-next-line no-console
|
|
19
|
+
console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return internalValue;
|
|
23
|
+
};
|
|
24
|
+
exports.clampValue = clampValue;
|
|
25
|
+
//# sourceMappingURL=clampValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["clampValue","value","max","undefined","internalValue","process","env","NODE_ENV","console","error","exports"],"sources":["../../../../../../../../packages/react-components/react-progress/src/utils/clampValue.ts"],"sourcesContent":["export const clampValue = (value: number | undefined, max: number): number | undefined => {\n if (value === undefined) {\n return value;\n }\n const internalValue = value < 0 ? 0 : value > max ? max : value;\n\n if (process.env.NODE_ENV !== 'production') {\n if (value < 0) {\n // eslint-disable-next-line no-console\n console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);\n }\n if (value > max) {\n // eslint-disable-next-line no-console\n console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);\n }\n }\n return internalValue;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,UAAU,GAAGA,CAACC,KAAyB,EAAEC,GAAW,KAAwB;EACvF,IAAID,KAAK,KAAKE,SAAS,EAAE;IACvB,OAAOF,KAAK;;EAEd,MAAMG,aAAa,GAAGH,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK,GAAGC,GAAG,GAAGA,GAAG,GAAGD,KAAK;EAE/D,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIN,KAAK,GAAG,CAAC,EAAE;MACb;MACAO,OAAO,CAACC,KAAK,CAAC,2EAA2ER,KAAK,EAAE,CAAC;;IAEnG,IAAIA,KAAK,GAAGC,GAAG,EAAE;MACf;MACAM,OAAO,CAACC,KAAK,CAAC,yEAAyER,KAAK,UAAUC,GAAG,EAAE,CAAC;;;EAGhH,OAAOE,aAAa;AACtB,CAAC;AAjBYM,OAAA,CAAAV,UAAU,GAAAA,UAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
+
tslib_1.__exportStar(require("./clampMax"), exports);
|
|
8
|
+
tslib_1.__exportStar(require("./clampValue"), exports);
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../../packages/react-components/react-progress/src/utils/index.ts"],"sourcesContent":["export * from './clampMax';\nexport * from './clampValue';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230306-0424.1",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230306-0424.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20230306-0424.1",
|
|
36
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230306-0424.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230306-0424.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230306-0424.1",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|