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