@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +393 -1
- package/CHANGELOG.md +126 -2
- package/README.md +9 -7
- package/dist/index.d.ts +44 -24
- package/lib/ProgressBar.js +2 -0
- package/lib/ProgressBar.js.map +1 -0
- package/lib/ProgressField.js +2 -0
- package/lib/ProgressField.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.js +14 -0
- package/lib/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.types.js +2 -0
- package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -0
- package/lib/components/ProgressBar/index.js +6 -0
- package/lib/components/ProgressBar/index.js.map +1 -0
- package/lib/components/ProgressBar/renderProgressBar.js +17 -0
- package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +13 -10
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/useProgressBarStyles.js +157 -0
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib/components/ProgressField/ProgressField.js +17 -0
- package/lib/components/ProgressField/ProgressField.js.map +1 -0
- package/lib/components/ProgressField/index.js +2 -0
- package/lib/components/ProgressField/index.js.map +1 -0
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/ProgressBar.js +8 -0
- package/lib-commonjs/ProgressBar.js.map +1 -0
- package/lib-commonjs/ProgressField.js +8 -0
- package/lib-commonjs/ProgressField.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js +20 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js} +1 -1
- package/lib-commonjs/components/ProgressBar/ProgressBar.types.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/index.js +12 -0
- package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js +24 -0
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +15 -15
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +164 -0
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib-commonjs/components/ProgressField/ProgressField.js +23 -0
- package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -0
- package/lib-commonjs/{Progress.js → components/ProgressField/index.js} +2 -4
- package/lib-commonjs/components/ProgressField/index.js.map +1 -0
- package/lib-commonjs/index.js +25 -14
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +23 -15
- package/MIGRATION.md +0 -26
- package/Spec.md +0 -120
- package/lib/Progress.js +0 -2
- package/lib/Progress.js.map +0 -1
- package/lib/components/Progress/Progress.js +0 -15
- package/lib/components/Progress/Progress.js.map +0 -1
- package/lib/components/Progress/Progress.types.js +0 -2
- package/lib/components/Progress/Progress.types.js.map +0 -1
- package/lib/components/Progress/index.js +0 -6
- package/lib/components/Progress/index.js.map +0 -1
- package/lib/components/Progress/renderProgress.js +0 -16
- package/lib/components/Progress/renderProgress.js.map +0 -1
- package/lib/components/Progress/useProgress.js.map +0 -1
- package/lib/components/Progress/useProgressStyles.js +0 -132
- package/lib/components/Progress/useProgressStyles.js.map +0 -1
- package/lib-commonjs/Progress.js.map +0 -1
- package/lib-commonjs/components/Progress/Progress.js +0 -26
- package/lib-commonjs/components/Progress/Progress.js.map +0 -1
- package/lib-commonjs/components/Progress/Progress.types.js.map +0 -1
- package/lib-commonjs/components/Progress/index.js +0 -18
- package/lib-commonjs/components/Progress/index.js.map +0 -1
- package/lib-commonjs/components/Progress/renderProgress.js +0 -27
- package/lib-commonjs/components/Progress/renderProgress.js.map +0 -1
- package/lib-commonjs/components/Progress/useProgress.js.map +0 -1
- package/lib-commonjs/components/Progress/useProgressStyles.js +0 -144
- package/lib-commonjs/components/Progress/useProgressStyles.js.map +0 -1
@@ -3,26 +3,25 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
7
|
-
|
6
|
+
exports.useProgressBar_unstable = void 0;
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
8
|
/**
|
10
|
-
* Create the state required to render
|
9
|
+
* Create the state required to render ProgressBar.
|
11
10
|
*
|
12
|
-
* The returned state can be modified with hooks such as
|
13
|
-
* before being passed to
|
11
|
+
* The returned state can be modified with hooks such as useProgressBarStyles_unstable,
|
12
|
+
* before being passed to renderProgressBar_unstable.
|
14
13
|
*
|
15
|
-
* @param props - props from this instance of
|
16
|
-
* @param ref - reference to root HTMLElement of
|
14
|
+
* @param props - props from this instance of ProgressBar
|
15
|
+
* @param ref - reference to root HTMLElement of ProgressBar
|
17
16
|
*/
|
18
|
-
|
19
|
-
|
20
|
-
const useProgress_unstable = (props, ref) => {
|
17
|
+
const useProgressBar_unstable = (props, ref) => {
|
21
18
|
// Props
|
22
19
|
const {
|
20
|
+
max = 1.0,
|
21
|
+
shape = 'rounded',
|
23
22
|
thickness = 'medium',
|
24
|
-
|
25
|
-
|
23
|
+
validationState,
|
24
|
+
value
|
26
25
|
} = props;
|
27
26
|
const root = react_utilities_1.getNativeElementProps('div', {
|
28
27
|
ref,
|
@@ -37,8 +36,10 @@ const useProgress_unstable = (props, ref) => {
|
|
37
36
|
});
|
38
37
|
const state = {
|
39
38
|
max,
|
39
|
+
shape,
|
40
40
|
thickness,
|
41
41
|
value,
|
42
|
+
validationState,
|
42
43
|
components: {
|
43
44
|
root: 'div',
|
44
45
|
bar: 'div'
|
@@ -48,6 +49,5 @@ const useProgress_unstable = (props, ref) => {
|
|
48
49
|
};
|
49
50
|
return state;
|
50
51
|
};
|
51
|
-
|
52
|
-
|
53
|
-
//# sourceMappingURL=useProgress.js.map
|
52
|
+
exports.useProgressBar_unstable = useProgressBar_unstable;
|
53
|
+
//# sourceMappingURL=useProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGC,uCAAqB,CAAC,KAAK,EAAE;IACxCP,GAAG;IACHQ,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEH,KAAK,KAAKI,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEJ,KAAK,KAAKI,SAAS,GAAGR,GAAG,GAAGQ,SAAS;IACtD,eAAe,EAAEJ,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMW,GAAG,GAAGH,kCAAgB,CAACR,KAAK,CAACW,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BX,GAAG;IACHC,KAAK;IACLC,SAAS;IACTE,KAAK;IACLD,eAAe;IACfS,UAAU,EAAE;MACVP,IAAI,EAAE,KAAK;MACXI,GAAG,EAAE;KACN;IACDJ,IAAI;IACJI;GACD;EAED,OAAOE,KAAK;AACd,CAAC;AAhCYE,+BAAuB","names":["useProgressBar_unstable","props","ref","max","shape","thickness","validationState","value","root","react_utilities_1","role","undefined","bar","required","state","components","exports"],"sourceRoot":"../src/","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 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 { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\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 max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"]}
|
@@ -0,0 +1,164 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
|
7
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
8
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
9
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
10
|
+
exports.progressBarClassNames = {
|
11
|
+
root: 'fui-ProgressBar',
|
12
|
+
bar: 'fui-ProgressBar__bar'
|
13
|
+
};
|
14
|
+
// If the percentComplete is near 0, don't animate it.
|
15
|
+
// This prevents animations on reset to 0 scenarios.
|
16
|
+
const ZERO_THRESHOLD = 0.01;
|
17
|
+
const barThicknessValues = {
|
18
|
+
medium: '2px',
|
19
|
+
large: '4px'
|
20
|
+
};
|
21
|
+
const indeterminateProgressBar = {
|
22
|
+
'0%': {
|
23
|
+
left: '0% /* @noflip */'
|
24
|
+
},
|
25
|
+
'100%': {
|
26
|
+
left: '100% /* @noflip */'
|
27
|
+
}
|
28
|
+
};
|
29
|
+
const indeterminateProgressBarRTL = {
|
30
|
+
'100%': {
|
31
|
+
right: '-100% /* @noflip */'
|
32
|
+
},
|
33
|
+
'0%': {
|
34
|
+
right: '100% /* @noflip */'
|
35
|
+
}
|
36
|
+
};
|
37
|
+
/**
|
38
|
+
* Styles for the root slot
|
39
|
+
*/
|
40
|
+
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
41
|
+
root: {
|
42
|
+
mc9l5x: "ftgm304",
|
43
|
+
De3pzq: "f18f03hv",
|
44
|
+
Bdqf98w: "fhb5wj7",
|
45
|
+
B68tc82: "f1p9o1ba",
|
46
|
+
Bmxbyg5: "f1sil6mw",
|
47
|
+
I5kgcl: "fs8b23g",
|
48
|
+
tu2nte: "f1mcb20s",
|
49
|
+
y0r1ed: "fek7wd8"
|
50
|
+
},
|
51
|
+
rounded: {
|
52
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
53
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
54
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
55
|
+
Btl43ni: ["fyu767a", "f1jar5jt"]
|
56
|
+
},
|
57
|
+
rectangular: {
|
58
|
+
Bbmb7ep: ["fzi6hpg", "fyowgf4"],
|
59
|
+
Beyfa6y: ["fyowgf4", "fzi6hpg"],
|
60
|
+
B7oj6ja: ["f3fg2lr", "f13av6d4"],
|
61
|
+
Btl43ni: ["f13av6d4", "f3fg2lr"]
|
62
|
+
},
|
63
|
+
medium: {
|
64
|
+
Bqenvij: "f4t8t6x"
|
65
|
+
},
|
66
|
+
large: {
|
67
|
+
Bqenvij: "f6ywr7j"
|
68
|
+
}
|
69
|
+
}, {
|
70
|
+
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){.fs8b23g{border-bottom-width:1px;}}", {
|
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;}}", {
|
76
|
+
m: "screen and (forced-colors: active)"
|
77
|
+
}]]
|
78
|
+
});
|
79
|
+
/**
|
80
|
+
* Styles for the ProgressBar bar
|
81
|
+
*/
|
82
|
+
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
83
|
+
base: {
|
84
|
+
De3pzq: "ftywsgz",
|
85
|
+
Bpep1pd: "f1neahkh",
|
86
|
+
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
87
|
+
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
88
|
+
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
89
|
+
Btl43ni: ["f1vtqnvc", "fuoumxm"]
|
90
|
+
},
|
91
|
+
medium: {
|
92
|
+
Bqenvij: "f4t8t6x"
|
93
|
+
},
|
94
|
+
large: {
|
95
|
+
Bqenvij: "f6ywr7j"
|
96
|
+
},
|
97
|
+
nonZeroDeterminate: {
|
98
|
+
Bmy1vo4: "fjt6zfz",
|
99
|
+
B3o57yi: "f1wofebd",
|
100
|
+
Bkqvd7p: "fv71qf3"
|
101
|
+
},
|
102
|
+
indeterminate: {
|
103
|
+
B2u0y6b: "fa0wk36",
|
104
|
+
qhf8xq: "f10pi13n",
|
105
|
+
Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
|
106
|
+
Bv12yb3: "f1h4fm7e",
|
107
|
+
vin17d: "f1a27w2r",
|
108
|
+
w3vfg9: "f1cpbl36",
|
109
|
+
Gqtpxc: "f4akx1t",
|
110
|
+
B3vm3ge: "f18p5put"
|
111
|
+
},
|
112
|
+
rtl: {
|
113
|
+
Bv12yb3: "fjhwsai"
|
114
|
+
},
|
115
|
+
error: {
|
116
|
+
De3pzq: "fdl5y0r"
|
117
|
+
},
|
118
|
+
warning: {
|
119
|
+
De3pzq: "f1s438gw"
|
120
|
+
},
|
121
|
+
success: {
|
122
|
+
De3pzq: "flxk52p"
|
123
|
+
}
|
124
|
+
}, {
|
125
|
+
d: [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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 );}", ".f1h4fm7e{-webkit-animation-name:fd3k50f;animation-name:fd3k50f;}", ".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;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
126
|
+
m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
127
|
+
m: "screen and (forced-colors: active)"
|
128
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
129
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
130
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
131
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
132
|
+
}]],
|
133
|
+
k: ["@-webkit-keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
134
|
+
});
|
135
|
+
/**
|
136
|
+
* Apply styling to the ProgressBar slots based on the state
|
137
|
+
*/
|
138
|
+
const useProgressBarStyles_unstable = state => {
|
139
|
+
const {
|
140
|
+
max,
|
141
|
+
shape,
|
142
|
+
thickness,
|
143
|
+
validationState,
|
144
|
+
value
|
145
|
+
} = state;
|
146
|
+
const rootStyles = useRootStyles();
|
147
|
+
const barStyles = useBarStyles();
|
148
|
+
const {
|
149
|
+
dir
|
150
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
151
|
+
state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
152
|
+
if (state.bar) {
|
153
|
+
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
|
154
|
+
}
|
155
|
+
if (state.bar && value !== undefined) {
|
156
|
+
state.bar.style = {
|
157
|
+
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
158
|
+
...state.bar.style
|
159
|
+
};
|
160
|
+
}
|
161
|
+
return state;
|
162
|
+
};
|
163
|
+
exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable;
|
164
|
+
//# sourceMappingURL=useProgressBarStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","react_1","useBarStyles","useProgressBarStyles_unstable","state","max","shape","thickness","validationState","value","rootStyles","barStyles","dir","react_shared_contexts_1","className","base","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","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: '0% /* @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 ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\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 backgroundColor: tokens.colorCompoundBrandBackground,\n\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 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 { max, shape, thickness, validationState, 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 value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\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"]}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.ProgressField = exports.progressFieldClassNames = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
|
9
|
+
const ProgressBar_1 = /*#__PURE__*/require("../../ProgressBar");
|
10
|
+
exports.progressFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('ProgressField');
|
11
|
+
exports.ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
12
|
+
const state = react_field_1.useField_unstable(props, ref, {
|
13
|
+
component: ProgressBar_1.ProgressBar,
|
14
|
+
classNames: exports.progressFieldClassNames,
|
15
|
+
labelConnection: 'aria-labelledby',
|
16
|
+
ariaInvalidOnError: false
|
17
|
+
});
|
18
|
+
state.control.validationState = state.validationState;
|
19
|
+
react_field_1.useFieldStyles_unstable(state);
|
20
|
+
return react_field_1.renderField_unstable(state);
|
21
|
+
});
|
22
|
+
exports.ProgressField.displayName = 'ProgressField';
|
23
|
+
//# sourceMappingURL=ProgressField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA;AAIaA,+BAAuB,gBAAGC,gCAAkB,CAAC,eAAe,CAAC;AAE7DD,qBAAa,gBAA4CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGL,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEC,yBAAW;IACtBC,UAAU,EAAET,+BAAuB;IACnCU,eAAe,EAAE,iBAAiB;IAClCC,kBAAkB,EAAE;GACrB,CAAC;EACFL,KAAK,CAACM,OAAO,CAACC,eAAe,GAAGP,KAAK,CAACO,eAAe;EACrDZ,qCAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOL,kCAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFN,qBAAa,CAACc,WAAW,GAAG,eAAe","names":["exports","react_field_1","React","forwardRef","props","ref","state","component","ProgressBar_1","classNames","labelConnection","ariaInvalidOnError","control","validationState","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: ProgressBar,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"]}
|
@@ -3,8 +3,6 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
|
-
|
10
|
-
//# sourceMappingURL=Progress.js.map
|
7
|
+
tslib_1.__exportStar(require("./ProgressField"), exports);
|
8
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/index.ts"],"sourcesContent":["export * from './ProgressField';\n"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -3,38 +3,49 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
6
|
+
exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressBarStyles_unstable = exports.useProgressBar_unstable = exports.renderProgressBar_unstable = exports.progressBarClassNames = exports.ProgressBar = void 0;
|
7
|
+
var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar");
|
8
|
+
Object.defineProperty(exports, "ProgressBar", {
|
9
|
+
enumerable: true,
|
10
|
+
get: function () {
|
11
|
+
return ProgressBar_1.ProgressBar;
|
12
|
+
}
|
13
|
+
});
|
14
|
+
Object.defineProperty(exports, "progressBarClassNames", {
|
15
|
+
enumerable: true,
|
16
|
+
get: function () {
|
17
|
+
return ProgressBar_1.progressBarClassNames;
|
18
|
+
}
|
19
|
+
});
|
20
|
+
Object.defineProperty(exports, "renderProgressBar_unstable", {
|
11
21
|
enumerable: true,
|
12
22
|
get: function () {
|
13
|
-
return
|
23
|
+
return ProgressBar_1.renderProgressBar_unstable;
|
14
24
|
}
|
15
25
|
});
|
16
|
-
Object.defineProperty(exports, "
|
26
|
+
Object.defineProperty(exports, "useProgressBar_unstable", {
|
17
27
|
enumerable: true,
|
18
28
|
get: function () {
|
19
|
-
return
|
29
|
+
return ProgressBar_1.useProgressBar_unstable;
|
20
30
|
}
|
21
31
|
});
|
22
|
-
Object.defineProperty(exports, "
|
32
|
+
Object.defineProperty(exports, "useProgressBarStyles_unstable", {
|
23
33
|
enumerable: true,
|
24
34
|
get: function () {
|
25
|
-
return
|
35
|
+
return ProgressBar_1.useProgressBarStyles_unstable;
|
26
36
|
}
|
27
37
|
});
|
28
|
-
|
38
|
+
var ProgressField_1 = /*#__PURE__*/require("./ProgressField");
|
39
|
+
Object.defineProperty(exports, "ProgressField_unstable", {
|
29
40
|
enumerable: true,
|
30
41
|
get: function () {
|
31
|
-
return
|
42
|
+
return ProgressField_1.ProgressField;
|
32
43
|
}
|
33
44
|
});
|
34
|
-
Object.defineProperty(exports, "
|
45
|
+
Object.defineProperty(exports, "progressFieldClassNames", {
|
35
46
|
enumerable: true,
|
36
47
|
get: function () {
|
37
|
-
return
|
48
|
+
return ProgressField_1.progressFieldClassNames;
|
38
49
|
}
|
39
50
|
});
|
40
51
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAI/B;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAA4BF;EAAAC;EAAAC;IAAA,8CAAuB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-progress",
|
3
|
-
"version": "9.0.0-alpha.
|
3
|
+
"version": "9.0.0-alpha.11",
|
4
4
|
"description": "Progress component for FluentUI v9",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "dist/index.d.ts",
|
7
|
+
"typings": "./dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -19,30 +19,30 @@
|
|
19
19
|
"just": "just-scripts",
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"test": "jest --passWithNoTests",
|
22
|
-
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
23
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-progress/src && yarn docs",
|
24
22
|
"type-check": "tsc -b tsconfig.json",
|
25
23
|
"storybook": "start-storybook",
|
26
|
-
"start": "yarn storybook"
|
24
|
+
"start": "yarn storybook",
|
25
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
27
26
|
},
|
28
27
|
"devDependencies": {
|
29
28
|
"@fluentui/eslint-plugin": "*",
|
30
29
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
32
|
-
"@fluentui/scripts": "
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
31
|
+
"@fluentui/scripts": "*"
|
33
32
|
},
|
34
33
|
"dependencies": {
|
35
|
-
"@fluentui/react-
|
36
|
-
"@fluentui/react-
|
37
|
-
"@fluentui/react-
|
38
|
-
"@
|
34
|
+
"@fluentui/react-field": "9.0.0-alpha.14",
|
35
|
+
"@fluentui/react-shared-contexts": "^9.1.4",
|
36
|
+
"@fluentui/react-theme": "^9.1.5",
|
37
|
+
"@fluentui/react-utilities": "^9.4.0",
|
38
|
+
"@griffel/react": "^1.5.2",
|
39
39
|
"tslib": "^2.1.0"
|
40
40
|
},
|
41
41
|
"peerDependencies": {
|
42
|
-
"@types/react": ">=16.8.0 <
|
43
|
-
"@types/react-dom": ">=16.8.0 <
|
44
|
-
"react": ">=16.8.0 <
|
45
|
-
"react-dom": ">=16.8.0 <
|
42
|
+
"@types/react": ">=16.8.0 <19.0.0",
|
43
|
+
"@types/react-dom": ">=16.8.0 <19.0.0",
|
44
|
+
"react": ">=16.8.0 <19.0.0",
|
45
|
+
"react-dom": ">=16.8.0 <19.0.0"
|
46
46
|
},
|
47
47
|
"beachball": {
|
48
48
|
"disallowedChangeTypes": [
|
@@ -50,5 +50,13 @@
|
|
50
50
|
"minor",
|
51
51
|
"patch"
|
52
52
|
]
|
53
|
+
},
|
54
|
+
"exports": {
|
55
|
+
".": {
|
56
|
+
"types": "./dist/index.d.ts",
|
57
|
+
"import": "./lib/index.js",
|
58
|
+
"require": "./lib-commonjs/index.js"
|
59
|
+
},
|
60
|
+
"./package.json": "./package.json"
|
53
61
|
}
|
54
62
|
}
|
package/MIGRATION.md
DELETED
@@ -1,26 +0,0 @@
|
|
1
|
-
# Progress Migration
|
2
|
-
|
3
|
-
## Migration from v8
|
4
|
-
|
5
|
-
v8 offers a component equivalent to v9's `Progress`. However, the API is slightly different. The main difference is that v9's `Progress` does not have the `label` or `description` props. Instead, the `label` and `hint` are located in the `ProgressField` that can be used in conjunction with `Progress`.
|
6
|
-
|
7
|
-
Here's how the API of v8's `Progress` compares to the one from v9's `Progress` component:
|
8
|
-
|
9
|
-
- `className` => `className`
|
10
|
-
- `description` => Use `ProgressField` to use the `hint` prop
|
11
|
-
- `label` => Use `ProgressField` to use the `label` prop
|
12
|
-
- `onRenderProgress` => NOT SUPPORTED
|
13
|
-
- `percentComplete` => Use the `value` prop
|
14
|
-
- `progressHidden` => NOT SUPPORTED
|
15
|
-
- `styles` => Use style customization through `className` instead
|
16
|
-
|
17
|
-
## Property Mapping
|
18
|
-
|
19
|
-
| v8 `ProgressIndicator` | v9 `Progress` |
|
20
|
-
| ---------------------- | ------------------------------- |
|
21
|
-
| `barHeight` | `thickness` |
|
22
|
-
| `className` | `className` |
|
23
|
-
| `componentRef` | `ref` |
|
24
|
-
| `description` | use `ProgressField` hint |
|
25
|
-
| `label` | use `ProgressField` label |
|
26
|
-
| `percentComplete` | `value` |
|
package/Spec.md
DELETED
@@ -1,120 +0,0 @@
|
|
1
|
-
# @fluentui/react-progress Spec
|
2
|
-
|
3
|
-
## Background
|
4
|
-
|
5
|
-
The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed.
|
6
|
-
|
7
|
-
## Prior Art
|
8
|
-
|
9
|
-
### Open UI
|
10
|
-
|
11
|
-
| Library | Component Name | Spec Link | Notes |
|
12
|
-
| ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
|
13
|
-
| Ant Design | Progress | [Progress](https://ant.design/components/progress/) | Specifies the type, a combined progress component |
|
14
|
-
| Atlassian Design | Progress bar | [ProgressBar](https://atlassian.design/components/progress-bar/success-progress-bar/examples) | Defaults to determinate state, which turns green when value reaches 1. Has an indeterminate state |
|
15
|
-
| Bootstrap | Progress | [Progress](https://getbootstrap.com/docs/4.3/components/progress/) | Allows for multiple different animation styles on the same Progress bar |
|
16
|
-
| Carbon Design | Progress Indicator | [ProgressIndicator](https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default) | Determinate Progress that has steps, similar to a Slider |
|
17
|
-
| Fast | Progress | [Progress](https://explore.fast.design/components/fast-progress) | Combined Progress and Spinner component, has a determinate and indeterminate state |
|
18
|
-
| Lightning Design System | Progress Bar | [ProgressBar](https://www.lightningdesignsystem.com/components/progress-bar/) | Has a vertical bar, only determinate, and can specify progress step |
|
19
|
-
| Semantic UI | Progress | [Progress](https://semantic-ui.com/modules/progress.html#indicating) | Allows for success and error states, default rounded edges. No indeterminate form |
|
20
|
-
|
21
|
-
### Comparison of v8 and v0
|
22
|
-
|
23
|
-
The existing components are:
|
24
|
-
|
25
|
-
- v8
|
26
|
-
- `ProgressIndicator`
|
27
|
-
- v0
|
28
|
-
|
29
|
-
## Sample Code
|
30
|
-
|
31
|
-
Basic example:
|
32
|
-
|
33
|
-
```jsx
|
34
|
-
import { Progress } from '@fluentui/react-progress';
|
35
|
-
|
36
|
-
function App() {
|
37
|
-
return <Progress thickness="large" />;
|
38
|
-
}
|
39
|
-
```
|
40
|
-
|
41
|
-
## Variants
|
42
|
-
|
43
|
-
- Indeterminate Progress
|
44
|
-
- The default Progress that animates indefinitely
|
45
|
-
- Determinate Progress
|
46
|
-
- The determinate form of the Progress component that incrementally loads from 0% to 100%
|
47
|
-
|
48
|
-
#### Adding Label and Description with ProgressField
|
49
|
-
|
50
|
-
There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`.
|
51
|
-
You can use it like so:
|
52
|
-
|
53
|
-
```jsx
|
54
|
-
import * as React from 'react';
|
55
|
-
import type { ProgressFieldProps } from '@fluentui/react-field';
|
56
|
-
import { ProgressField } from '@fluentui/react-field';
|
57
|
-
|
58
|
-
export const Default = (props: ProgressFieldProps) => (
|
59
|
-
<ProgressField
|
60
|
-
label="Example Progress field"
|
61
|
-
value={0.75}
|
62
|
-
validationState="success"
|
63
|
-
validationMessage="This is a success message"
|
64
|
-
hint="This is a hint message"
|
65
|
-
{...props}
|
66
|
-
/>
|
67
|
-
);
|
68
|
-
```
|
69
|
-
|
70
|
-
### Shape
|
71
|
-
|
72
|
-
The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point
|
73
|
-
|
74
|
-
## API
|
75
|
-
|
76
|
-
### Slots
|
77
|
-
|
78
|
-
- `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div`
|
79
|
-
- `bar` - The div element that gets animated into a Progress bar. The html element is `div`
|
80
|
-
|
81
|
-
### Props
|
82
|
-
|
83
|
-
See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts).
|
84
|
-
|
85
|
-
## Structure
|
86
|
-
|
87
|
-
```html
|
88
|
-
<div class="fui-Progress">
|
89
|
-
<!-- Bar for Progress -->
|
90
|
-
<div class="fui-Progess__bar" />
|
91
|
-
</div>
|
92
|
-
```
|
93
|
-
|
94
|
-
## Migration
|
95
|
-
|
96
|
-
See [MIGRATION.md](./MIGRATION.md).
|
97
|
-
|
98
|
-
## Behaviors
|
99
|
-
|
100
|
-
### States
|
101
|
-
|
102
|
-
- **Display** - The Progress will use the following priority:
|
103
|
-
|
104
|
-
- Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`.
|
105
|
-
- The component also has `rtl` support and will animate the progress bar from right to left if set.
|
106
|
-
|
107
|
-
### Interaction
|
108
|
-
|
109
|
-
The Progress is non-interactive.
|
110
|
-
|
111
|
-
- **Keyboard** - Not keyboard focusable.
|
112
|
-
- **Mouse**
|
113
|
-
|
114
|
-
- Click: No action
|
115
|
-
|
116
|
-
- **Touch** - Nothing
|
117
|
-
|
118
|
-
## Accessibility
|
119
|
-
|
120
|
-
- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
|
package/lib/Progress.js
DELETED
package/lib/Progress.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Progress.js","sourceRoot":"../src/","sources":["Progress.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Progress/index';\n"]}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { useProgress_unstable } from './useProgress';
|
3
|
-
import { renderProgress_unstable } from './renderProgress';
|
4
|
-
import { useProgressStyles_unstable } from './useProgressStyles';
|
5
|
-
/**
|
6
|
-
* A progress bar shows the progression of a task.
|
7
|
-
*/
|
8
|
-
|
9
|
-
export const Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
-
const state = useProgress_unstable(props, ref);
|
11
|
-
useProgressStyles_unstable(state);
|
12
|
-
return renderProgress_unstable(state);
|
13
|
-
});
|
14
|
-
Progress.displayName = 'Progress';
|
15
|
-
//# sourceMappingURL=Progress.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n const state = useProgress_unstable(props, ref);\n\n useProgressStyles_unstable(state);\n return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":"../src/"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Progress.types.js","sourceRoot":"../src/","sources":["components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressSlots = {\n /**\n * The track behind the progress bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Progress Props\n */\nexport type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {\n /**\n * A decimal number between `0` and `1` (or between `0` and `max` if given),\n * which specifies how much of the task has been completed. \n *\n * If `undefined` (default), the Progress will display an **indeterminate** state.\n */\n value?: number;\n /**\n * The maximum value, which indicates the task is complete.\n * The progress bar will be full when `value` equals `max`.\n * @default 1\n */\n max?: number;\n /**\n * The thickness of the Progress bar\n * @default 'medium'\n */\n thickness?: 'medium' | 'large';\n};\n\n/**\n * State used in rendering Progress\n */\nexport type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"]}
|