@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
@@ -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/"}
|