@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.11
Sign up to get free protection for your applications and to get access to all the features.
- 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"]}
|