@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +372 -1
- package/CHANGELOG.md +116 -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
@@ -1,16 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { getSlots } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* Render the final JSX of Progress
|
5
|
-
*/
|
6
|
-
|
7
|
-
export const renderProgress_unstable = state => {
|
8
|
-
const {
|
9
|
-
slots,
|
10
|
-
slotProps
|
11
|
-
} = getSlots(state);
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
-
}, slots.bar && /*#__PURE__*/React.createElement(slots.bar, { ...slotProps.bar
|
14
|
-
}));
|
15
|
-
};
|
16
|
-
//# sourceMappingURL=renderProgress.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/renderProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,iBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgress.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,SAAS,GAAG,QAAd;IAAwB,KAAxB;IAA+B,GAAG,GAAG;EAArC,IAA6C,KAAnD;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAAR,CAAlC;EASA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE;EAD4B,CAAZ,CAA5B;EAIA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,SAF2B;IAG3B,KAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CAJe;IAQ3B,IAR2B;IAS3B;EAT2B,CAA7B;EAYA,OAAO,KAAP;AACD,CA9BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { thickness = 'medium', value, max = 1.0 } = 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: ProgressState = {\n max,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,132 +0,0 @@
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
3
|
-
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
4
|
-
export const progressClassNames = {
|
5
|
-
root: 'fui-Progress',
|
6
|
-
bar: 'fui-Progress__bar'
|
7
|
-
}; // If the percentComplete is near 0, don't animate it.
|
8
|
-
// This prevents animations on reset to 0 scenarios.
|
9
|
-
|
10
|
-
const ZERO_THRESHOLD = 0.01;
|
11
|
-
const barThicknessValues = {
|
12
|
-
medium: '2px',
|
13
|
-
large: '4px'
|
14
|
-
};
|
15
|
-
const indeterminateProgress = {
|
16
|
-
'0%': {
|
17
|
-
left: '0%'
|
18
|
-
},
|
19
|
-
'100%': {
|
20
|
-
left: '100%'
|
21
|
-
}
|
22
|
-
};
|
23
|
-
const indeterminateProgressRTL = {
|
24
|
-
'100%': {
|
25
|
-
right: '-100%'
|
26
|
-
},
|
27
|
-
'0%': {
|
28
|
-
right: '100%'
|
29
|
-
}
|
30
|
-
};
|
31
|
-
/**
|
32
|
-
* Styles for the root slot
|
33
|
-
*/
|
34
|
-
|
35
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
36
|
-
"root": {
|
37
|
-
"mc9l5x": "ftgm304",
|
38
|
-
"De3pzq": "f18f03hv",
|
39
|
-
"Bdqf98w": "fhb5wj7",
|
40
|
-
"B68tc82": "f1p9o1ba",
|
41
|
-
"Bmxbyg5": "f1sil6mw",
|
42
|
-
"I5kgcl": "fs8b23g",
|
43
|
-
"tu2nte": "f1mcb20s",
|
44
|
-
"y0r1ed": "fek7wd8"
|
45
|
-
},
|
46
|
-
"medium": {
|
47
|
-
"Bqenvij": "f4t8t6x"
|
48
|
-
},
|
49
|
-
"large": {
|
50
|
-
"Bqenvij": "f6ywr7j"
|
51
|
-
}
|
52
|
-
}, {
|
53
|
-
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
54
|
-
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
55
|
-
"m": "screen and (forced-colors: active)"
|
56
|
-
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
57
|
-
"m": "screen and (forced-colors: active)"
|
58
|
-
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
59
|
-
"m": "screen and (forced-colors: active)"
|
60
|
-
}]]
|
61
|
-
});
|
62
|
-
/**
|
63
|
-
* Styles for the progress bar
|
64
|
-
*/
|
65
|
-
|
66
|
-
|
67
|
-
const useBarStyles = /*#__PURE__*/__styles({
|
68
|
-
"base": {
|
69
|
-
"De3pzq": "ftywsgz",
|
70
|
-
"Bpep1pd": "f1neahkh"
|
71
|
-
},
|
72
|
-
"medium": {
|
73
|
-
"Bqenvij": "f4t8t6x"
|
74
|
-
},
|
75
|
-
"large": {
|
76
|
-
"Bqenvij": "f6ywr7j"
|
77
|
-
},
|
78
|
-
"nonZeroDeterminate": {
|
79
|
-
"Bmy1vo4": "fjt6zfz",
|
80
|
-
"B3o57yi": "f1wofebd",
|
81
|
-
"Bkqvd7p": "fv71qf3"
|
82
|
-
},
|
83
|
-
"indeterminate": {
|
84
|
-
"B2u0y6b": "fa0wk36",
|
85
|
-
"qhf8xq": "f10pi13n",
|
86
|
-
"Bcmaq0h": ["fhjp9mj", "ffmeyi5"],
|
87
|
-
"Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
|
88
|
-
"vin17d": "f1a27w2r",
|
89
|
-
"w3vfg9": "f1cpbl36"
|
90
|
-
},
|
91
|
-
"rtl": {
|
92
|
-
"Bv12yb3": ["fw97ye2", "fqbve9y"]
|
93
|
-
}
|
94
|
-
}, {
|
95
|
-
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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;}", ".fhjp9mj{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".ffmeyi5{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
|
96
|
-
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
97
|
-
"m": "screen and (forced-colors: active)"
|
98
|
-
}]],
|
99
|
-
"k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
|
100
|
-
});
|
101
|
-
/**
|
102
|
-
* Apply styling to the Progress slots based on the state
|
103
|
-
*/
|
104
|
-
|
105
|
-
|
106
|
-
export const useProgressStyles_unstable = state => {
|
107
|
-
const {
|
108
|
-
max,
|
109
|
-
thickness,
|
110
|
-
value
|
111
|
-
} = state;
|
112
|
-
const rootStyles = useRootStyles();
|
113
|
-
const barStyles = useBarStyles();
|
114
|
-
const {
|
115
|
-
dir
|
116
|
-
} = useFluent();
|
117
|
-
state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
118
|
-
|
119
|
-
if (state.bar) {
|
120
|
-
state.bar.className = mergeClasses(progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
|
121
|
-
}
|
122
|
-
|
123
|
-
if (state.bar && value !== undefined) {
|
124
|
-
state.bar.style = {
|
125
|
-
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
126
|
-
...state.bar.style
|
127
|
-
};
|
128
|
-
}
|
129
|
-
|
130
|
-
return state;
|
131
|
-
};
|
132
|
-
//# sourceMappingURL=useProgressStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgressStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAA1D,C,CAKP;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAmBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAsCA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,SAAP;IAAkB;EAAlB,IAA4B,KAAlC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,SAAD,CAHuB,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,YAAY,CAChC,kBAAkB,CAAC,GADa,EAEhC,SAAS,CAAC,IAFsB,EAGhC,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHD,EAIhC,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJlB,EAKhC,SAAS,CAAC,SAAD,CALuB,EAMhC,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBAN3B,EAOhC,KAAK,CAAC,GAAN,CAAU,SAPsB,CAAlC;EASD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAjCM","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 { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__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 indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\nconst indeterminateProgressRTL = {\n '100%': {\n right: '-100%',\n },\n '0%': {\n right: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\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.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationName: indeterminateProgressRTL,\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.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 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"],"sourceRoot":"../src/"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["Progress.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Progress/index';\n"],"sourceRoot":"../src/"}
|
@@ -1,26 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.Progress = void 0;
|
7
|
-
|
8
|
-
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
|
-
const useProgress_1 = /*#__PURE__*/require("./useProgress");
|
11
|
-
|
12
|
-
const renderProgress_1 = /*#__PURE__*/require("./renderProgress");
|
13
|
-
|
14
|
-
const useProgressStyles_1 = /*#__PURE__*/require("./useProgressStyles");
|
15
|
-
/**
|
16
|
-
* A progress bar shows the progression of a task.
|
17
|
-
*/
|
18
|
-
|
19
|
-
|
20
|
-
exports.Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
-
const state = useProgress_1.useProgress_unstable(props, ref);
|
22
|
-
useProgressStyles_1.useProgressStyles_unstable(state);
|
23
|
-
return renderProgress_1.renderProgress_unstable(state);
|
24
|
-
});
|
25
|
-
exports.Progress.displayName = 'Progress';
|
26
|
-
//# sourceMappingURL=Progress.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/Progress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,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,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
|
7
|
-
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
|
-
tslib_1.__exportStar(require("./Progress"), exports);
|
10
|
-
|
11
|
-
tslib_1.__exportStar(require("./Progress.types"), exports);
|
12
|
-
|
13
|
-
tslib_1.__exportStar(require("./renderProgress"), exports);
|
14
|
-
|
15
|
-
tslib_1.__exportStar(require("./useProgress"), exports);
|
16
|
-
|
17
|
-
tslib_1.__exportStar(require("./useProgressStyles"), exports);
|
18
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.renderProgress_unstable = void 0;
|
7
|
-
|
8
|
-
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
|
-
/**
|
12
|
-
* Render the final JSX of Progress
|
13
|
-
*/
|
14
|
-
|
15
|
-
|
16
|
-
const renderProgress_unstable = state => {
|
17
|
-
const {
|
18
|
-
slots,
|
19
|
-
slotProps
|
20
|
-
} = react_utilities_1.getSlots(state);
|
21
|
-
return React.createElement(slots.root, { ...slotProps.root
|
22
|
-
}, slots.bar && React.createElement(slots.bar, { ...slotProps.bar
|
23
|
-
}));
|
24
|
-
};
|
25
|
-
|
26
|
-
exports.renderProgress_unstable = renderProgress_unstable;
|
27
|
-
//# sourceMappingURL=renderProgress.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/renderProgress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgress.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,SAAS,GAAG,QAAd;IAAwB,KAAxB;IAA+B,GAAG,GAAG;EAArC,IAA6C,KAAnD;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAA7B,CAAb;EASA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE;EAD4B,CAA5B,CAAZ;EAIA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,SAF2B;IAG3B,KAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CAJe;IAQ3B,IAR2B;IAS3B;EAT2B,CAA7B;EAYA,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { thickness = 'medium', value, max = 1.0 } = 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: ProgressState = {\n max,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,144 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.useProgressStyles_unstable = exports.progressClassNames = void 0;
|
7
|
-
|
8
|
-
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
-
|
10
|
-
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
-
|
12
|
-
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
13
|
-
|
14
|
-
exports.progressClassNames = {
|
15
|
-
root: 'fui-Progress',
|
16
|
-
bar: 'fui-Progress__bar'
|
17
|
-
}; // If the percentComplete is near 0, don't animate it.
|
18
|
-
// This prevents animations on reset to 0 scenarios.
|
19
|
-
|
20
|
-
const ZERO_THRESHOLD = 0.01;
|
21
|
-
const barThicknessValues = {
|
22
|
-
medium: '2px',
|
23
|
-
large: '4px'
|
24
|
-
};
|
25
|
-
const indeterminateProgress = {
|
26
|
-
'0%': {
|
27
|
-
left: '0%'
|
28
|
-
},
|
29
|
-
'100%': {
|
30
|
-
left: '100%'
|
31
|
-
}
|
32
|
-
};
|
33
|
-
const indeterminateProgressRTL = {
|
34
|
-
'100%': {
|
35
|
-
right: '-100%'
|
36
|
-
},
|
37
|
-
'0%': {
|
38
|
-
right: '100%'
|
39
|
-
}
|
40
|
-
};
|
41
|
-
/**
|
42
|
-
* Styles for the root slot
|
43
|
-
*/
|
44
|
-
|
45
|
-
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
46
|
-
"root": {
|
47
|
-
"mc9l5x": "ftgm304",
|
48
|
-
"De3pzq": "f18f03hv",
|
49
|
-
"Bdqf98w": "fhb5wj7",
|
50
|
-
"B68tc82": "f1p9o1ba",
|
51
|
-
"Bmxbyg5": "f1sil6mw",
|
52
|
-
"I5kgcl": "fs8b23g",
|
53
|
-
"tu2nte": "f1mcb20s",
|
54
|
-
"y0r1ed": "fek7wd8"
|
55
|
-
},
|
56
|
-
"medium": {
|
57
|
-
"Bqenvij": "f4t8t6x"
|
58
|
-
},
|
59
|
-
"large": {
|
60
|
-
"Bqenvij": "f6ywr7j"
|
61
|
-
}
|
62
|
-
}, {
|
63
|
-
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
64
|
-
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
65
|
-
"m": "screen and (forced-colors: active)"
|
66
|
-
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
67
|
-
"m": "screen and (forced-colors: active)"
|
68
|
-
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
69
|
-
"m": "screen and (forced-colors: active)"
|
70
|
-
}]]
|
71
|
-
});
|
72
|
-
/**
|
73
|
-
* Styles for the progress bar
|
74
|
-
*/
|
75
|
-
|
76
|
-
|
77
|
-
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
78
|
-
"base": {
|
79
|
-
"De3pzq": "ftywsgz",
|
80
|
-
"Bpep1pd": "f1neahkh"
|
81
|
-
},
|
82
|
-
"medium": {
|
83
|
-
"Bqenvij": "f4t8t6x"
|
84
|
-
},
|
85
|
-
"large": {
|
86
|
-
"Bqenvij": "f6ywr7j"
|
87
|
-
},
|
88
|
-
"nonZeroDeterminate": {
|
89
|
-
"Bmy1vo4": "fjt6zfz",
|
90
|
-
"B3o57yi": "f1wofebd",
|
91
|
-
"Bkqvd7p": "fv71qf3"
|
92
|
-
},
|
93
|
-
"indeterminate": {
|
94
|
-
"B2u0y6b": "fa0wk36",
|
95
|
-
"qhf8xq": "f10pi13n",
|
96
|
-
"Bcmaq0h": ["fhjp9mj", "ffmeyi5"],
|
97
|
-
"Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
|
98
|
-
"vin17d": "f1a27w2r",
|
99
|
-
"w3vfg9": "f1cpbl36"
|
100
|
-
},
|
101
|
-
"rtl": {
|
102
|
-
"Bv12yb3": ["fw97ye2", "fqbve9y"]
|
103
|
-
}
|
104
|
-
}, {
|
105
|
-
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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;}", ".fhjp9mj{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".ffmeyi5{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
|
106
|
-
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
107
|
-
"m": "screen and (forced-colors: active)"
|
108
|
-
}]],
|
109
|
-
"k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
|
110
|
-
});
|
111
|
-
/**
|
112
|
-
* Apply styling to the Progress slots based on the state
|
113
|
-
*/
|
114
|
-
|
115
|
-
|
116
|
-
const useProgressStyles_unstable = state => {
|
117
|
-
const {
|
118
|
-
max,
|
119
|
-
thickness,
|
120
|
-
value
|
121
|
-
} = state;
|
122
|
-
const rootStyles = useRootStyles();
|
123
|
-
const barStyles = useBarStyles();
|
124
|
-
const {
|
125
|
-
dir
|
126
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
127
|
-
state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
128
|
-
|
129
|
-
if (state.bar) {
|
130
|
-
state.bar.className = react_1.mergeClasses(exports.progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
|
131
|
-
}
|
132
|
-
|
133
|
-
if (state.bar && value !== undefined) {
|
134
|
-
state.bar.style = {
|
135
|
-
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
136
|
-
...state.bar.style
|
137
|
-
};
|
138
|
-
}
|
139
|
-
|
140
|
-
return state;
|
141
|
-
};
|
142
|
-
|
143
|
-
exports.useProgressStyles_unstable = useProgressStyles_unstable;
|
144
|
-
//# sourceMappingURL=useProgressStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgressStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAApD,C,CAKb;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAmBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAsCA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,SAAP;IAAkB;EAAlB,IAA4B,KAAlC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,uBAAA,CAAA,kBAAA,EAAhB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,kBAAA,CAAmB,IADE,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,CAAC,SAAD,CAHW,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,OAAA,CAAA,YAAA,CACpB,OAAA,CAAA,kBAAA,CAAmB,GADC,EAEpB,SAAS,CAAC,IAFU,EAGpB,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHb,EAIpB,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJ9B,EAKpB,SAAS,CAAC,SAAD,CALW,EAMpB,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBANvC,EAOpB,KAAK,CAAC,GAAN,CAAU,SAPU,CAAtB;EASD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAjCM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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 { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__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 indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\nconst indeterminateProgressRTL = {\n '100%': {\n right: '-100%',\n },\n '0%': {\n right: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\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.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationName: indeterminateProgressRTL,\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.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 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"],"sourceRoot":"../src/"}
|