@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.
Files changed (75) hide show
  1. package/CHANGELOG.json +393 -1
  2. package/CHANGELOG.md +126 -2
  3. package/README.md +9 -7
  4. package/dist/index.d.ts +44 -24
  5. package/lib/ProgressBar.js +2 -0
  6. package/lib/ProgressBar.js.map +1 -0
  7. package/lib/ProgressField.js +2 -0
  8. package/lib/ProgressField.js.map +1 -0
  9. package/lib/components/ProgressBar/ProgressBar.js +14 -0
  10. package/lib/components/ProgressBar/ProgressBar.js.map +1 -0
  11. package/lib/components/ProgressBar/ProgressBar.types.js +2 -0
  12. package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -0
  13. package/lib/components/ProgressBar/index.js +6 -0
  14. package/lib/components/ProgressBar/index.js.map +1 -0
  15. package/lib/components/ProgressBar/renderProgressBar.js +17 -0
  16. package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
  17. package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +13 -10
  18. package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
  19. package/lib/components/ProgressBar/useProgressBarStyles.js +157 -0
  20. package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
  21. package/lib/components/ProgressField/ProgressField.js +17 -0
  22. package/lib/components/ProgressField/ProgressField.js.map +1 -0
  23. package/lib/components/ProgressField/index.js +2 -0
  24. package/lib/components/ProgressField/index.js.map +1 -0
  25. package/lib/index.js +2 -1
  26. package/lib/index.js.map +1 -1
  27. package/lib-commonjs/ProgressBar.js +8 -0
  28. package/lib-commonjs/ProgressBar.js.map +1 -0
  29. package/lib-commonjs/ProgressField.js +8 -0
  30. package/lib-commonjs/ProgressField.js.map +1 -0
  31. package/lib-commonjs/components/ProgressBar/ProgressBar.js +20 -0
  32. package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
  33. package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js} +1 -1
  34. package/lib-commonjs/components/ProgressBar/ProgressBar.types.js.map +1 -0
  35. package/lib-commonjs/components/ProgressBar/index.js +12 -0
  36. package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
  37. package/lib-commonjs/components/ProgressBar/renderProgressBar.js +24 -0
  38. package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
  39. package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +15 -15
  40. package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
  41. package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +164 -0
  42. package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
  43. package/lib-commonjs/components/ProgressField/ProgressField.js +23 -0
  44. package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -0
  45. package/lib-commonjs/{Progress.js → components/ProgressField/index.js} +2 -4
  46. package/lib-commonjs/components/ProgressField/index.js.map +1 -0
  47. package/lib-commonjs/index.js +25 -14
  48. package/lib-commonjs/index.js.map +1 -1
  49. package/package.json +23 -15
  50. package/MIGRATION.md +0 -26
  51. package/Spec.md +0 -120
  52. package/lib/Progress.js +0 -2
  53. package/lib/Progress.js.map +0 -1
  54. package/lib/components/Progress/Progress.js +0 -15
  55. package/lib/components/Progress/Progress.js.map +0 -1
  56. package/lib/components/Progress/Progress.types.js +0 -2
  57. package/lib/components/Progress/Progress.types.js.map +0 -1
  58. package/lib/components/Progress/index.js +0 -6
  59. package/lib/components/Progress/index.js.map +0 -1
  60. package/lib/components/Progress/renderProgress.js +0 -16
  61. package/lib/components/Progress/renderProgress.js.map +0 -1
  62. package/lib/components/Progress/useProgress.js.map +0 -1
  63. package/lib/components/Progress/useProgressStyles.js +0 -132
  64. package/lib/components/Progress/useProgressStyles.js.map +0 -1
  65. package/lib-commonjs/Progress.js.map +0 -1
  66. package/lib-commonjs/components/Progress/Progress.js +0 -26
  67. package/lib-commonjs/components/Progress/Progress.js.map +0 -1
  68. package/lib-commonjs/components/Progress/Progress.types.js.map +0 -1
  69. package/lib-commonjs/components/Progress/index.js +0 -18
  70. package/lib-commonjs/components/Progress/index.js.map +0 -1
  71. package/lib-commonjs/components/Progress/renderProgress.js +0 -27
  72. package/lib-commonjs/components/Progress/renderProgress.js.map +0 -1
  73. package/lib-commonjs/components/Progress/useProgress.js.map +0 -1
  74. package/lib-commonjs/components/Progress/useProgressStyles.js +0 -144
  75. 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/"}