@fluentui/react-progress 0.0.0-nightly-20221213-0427.1 → 0.0.0-nightly-20221215-0425.1

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 (61) hide show
  1. package/CHANGELOG.json +13 -13
  2. package/CHANGELOG.md +9 -9
  3. package/dist/index.d.ts +61 -31
  4. package/lib/ProgressBar.js +2 -0
  5. package/lib/ProgressBar.js.map +1 -0
  6. package/lib/components/ProgressBar/ProgressBar.js +19 -0
  7. package/lib/components/ProgressBar/ProgressBar.js.map +1 -0
  8. package/lib/components/ProgressBar/ProgressBar.types.js +2 -0
  9. package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -0
  10. package/lib/components/ProgressBar/index.js +6 -0
  11. package/lib/components/ProgressBar/index.js.map +1 -0
  12. package/lib/components/ProgressBar/renderProgressBar.js +20 -0
  13. package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
  14. package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +12 -8
  15. package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
  16. package/lib/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +21 -13
  17. package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
  18. package/lib/components/ProgressField/ProgressField.js +2 -2
  19. package/lib/components/ProgressField/ProgressField.js.map +1 -1
  20. package/lib/index.js +11 -1
  21. package/lib/index.js.map +1 -1
  22. package/lib-commonjs/{Progress.js → ProgressBar.js} +2 -2
  23. package/lib-commonjs/ProgressBar.js.map +1 -0
  24. package/lib-commonjs/components/ProgressBar/ProgressBar.js +30 -0
  25. package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
  26. package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js} +1 -1
  27. package/lib-commonjs/components/{Progress/Progress.types.js.map → ProgressBar/ProgressBar.types.js.map} +0 -0
  28. package/lib-commonjs/components/ProgressBar/index.js +18 -0
  29. package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
  30. package/lib-commonjs/components/ProgressBar/renderProgressBar.js +31 -0
  31. package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
  32. package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +13 -9
  33. package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
  34. package/lib-commonjs/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +22 -14
  35. package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
  36. package/lib-commonjs/components/ProgressField/ProgressField.js +2 -2
  37. package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -1
  38. package/lib-commonjs/index.js +51 -11
  39. package/lib-commonjs/index.js.map +1 -1
  40. package/package.json +6 -6
  41. package/lib/Progress.js +0 -2
  42. package/lib/Progress.js.map +0 -1
  43. package/lib/components/Progress/Progress.js +0 -15
  44. package/lib/components/Progress/Progress.js.map +0 -1
  45. package/lib/components/Progress/Progress.types.js +0 -2
  46. package/lib/components/Progress/Progress.types.js.map +0 -1
  47. package/lib/components/Progress/index.js +0 -6
  48. package/lib/components/Progress/index.js.map +0 -1
  49. package/lib/components/Progress/renderProgress.js +0 -16
  50. package/lib/components/Progress/renderProgress.js.map +0 -1
  51. package/lib/components/Progress/useProgress.js.map +0 -1
  52. package/lib/components/Progress/useProgressStyles.js.map +0 -1
  53. package/lib-commonjs/Progress.js.map +0 -1
  54. package/lib-commonjs/components/Progress/Progress.js +0 -26
  55. package/lib-commonjs/components/Progress/Progress.js.map +0 -1
  56. package/lib-commonjs/components/Progress/index.js +0 -18
  57. package/lib-commonjs/components/Progress/index.js.map +0 -1
  58. package/lib-commonjs/components/Progress/renderProgress.js +0 -27
  59. package/lib-commonjs/components/Progress/renderProgress.js.map +0 -1
  60. package/lib-commonjs/components/Progress/useProgress.js.map +0 -1
  61. package/lib-commonjs/components/Progress/useProgressStyles.js.map +0 -1
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.renderProgress_unstable = exports.renderProgressBar_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 ProgressBar
13
+ */
14
+
15
+
16
+ const renderProgressBar_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.renderProgressBar_unstable = renderProgressBar_unstable; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
27
+
28
+ /** @deprecated renamed to renderProgressBar_unstable */
29
+
30
+ exports.renderProgress_unstable = exports.renderProgressBar_unstable;
31
+ //# sourceMappingURL=renderProgressBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,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,0BAAA,GAA0B,0BAA1B,C,CAKb;;AACA;;AACa,OAAA,CAAA,uBAAA,GAA0B,OAAA,CAAA,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to renderProgressBar_unstable */\nexport const renderProgress_unstable = renderProgressBar_unstable;\n"],"sourceRoot":""}
@@ -3,21 +3,21 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useProgress_unstable = void 0;
6
+ exports.useProgress_unstable = exports.useProgressBar_unstable = void 0;
7
7
 
8
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
  /**
10
- * Create the state required to render Progress.
10
+ * Create the state required to render ProgressBar.
11
11
  *
12
- * The returned state can be modified with hooks such as useProgressStyles_unstable,
13
- * before being passed to renderProgress_unstable.
12
+ * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
13
+ * before being passed to renderProgressBar_unstable.
14
14
  *
15
- * @param props - props from this instance of Progress
16
- * @param ref - reference to root HTMLElement of Progress
15
+ * @param props - props from this instance of ProgressBar
16
+ * @param ref - reference to root HTMLElement of ProgressBar
17
17
  */
18
18
 
19
19
 
20
- const useProgress_unstable = (props, ref) => {
20
+ const useProgressBar_unstable = (props, ref) => {
21
21
  // Props
22
22
  const {
23
23
  max = 1.0,
@@ -53,5 +53,9 @@ const useProgress_unstable = (props, ref) => {
53
53
  return state;
54
54
  };
55
55
 
56
- exports.useProgress_unstable = useProgress_unstable;
57
- //# sourceMappingURL=useProgress.js.map
56
+ exports.useProgressBar_unstable = useProgressBar_unstable; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
57
+
58
+ /** @deprecated renamed to useProgressBar_unstable */
59
+
60
+ exports.useProgress_unstable = exports.useProgressBar_unstable;
61
+ //# sourceMappingURL=useProgressBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;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,GAAqB;IAC9B,GAD8B;IAE9B,KAF8B;IAG9B,SAH8B;IAI9B,KAJ8B;IAK9B,eAL8B;IAM9B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANkB;IAU9B,IAV8B;IAW9B;EAX8B,CAAhC;EAcA,OAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB,C,CAkCb;;AACA;;AACa,OAAA,CAAA,oBAAA,GAAuB,OAAA,CAAA,uBAAvB","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\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to useProgressBar_unstable */\nexport const useProgress_unstable = useProgressBar_unstable;\n"],"sourceRoot":""}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useProgressStyles_unstable = exports.progressClassNames = void 0;
6
+ exports.useProgressStyles_unstable = exports.useProgressBarStyles_unstable = exports.progressClassNames = exports.progressBarClassNames = void 0;
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
@@ -11,10 +11,14 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
11
 
12
12
  const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
13
13
 
14
- exports.progressClassNames = {
15
- root: 'fui-Progress',
16
- bar: 'fui-Progress__bar'
17
- }; // If the percentComplete is near 0, don't animate it.
14
+ exports.progressBarClassNames = {
15
+ root: 'fui-ProgressBar',
16
+ bar: 'fui-ProgressBar__bar'
17
+ }; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
18
+
19
+ /** @deprecated renamed to progressBarClassNames */
20
+
21
+ exports.progressClassNames = exports.progressBarClassNames; // If the percentComplete is near 0, don't animate it.
18
22
  // This prevents animations on reset to 0 scenarios.
19
23
 
20
24
  const ZERO_THRESHOLD = 0.01;
@@ -22,7 +26,7 @@ const barThicknessValues = {
22
26
  medium: '2px',
23
27
  large: '4px'
24
28
  };
25
- const indeterminateProgress = {
29
+ const indeterminateProgressBar = {
26
30
  '0%': {
27
31
  left: '0%'
28
32
  },
@@ -30,7 +34,7 @@ const indeterminateProgress = {
30
34
  left: '100%'
31
35
  }
32
36
  };
33
- const indeterminateProgressRTL = {
37
+ const indeterminateProgressBarRTL = {
34
38
  '100%': {
35
39
  right: '-100%'
36
40
  },
@@ -82,7 +86,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
82
86
  }]]
83
87
  });
84
88
  /**
85
- * Styles for the progress bar
89
+ * Styles for the ProgressBar bar
86
90
  */
87
91
 
88
92
 
@@ -140,11 +144,11 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
140
144
  "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%;}}"]
141
145
  });
142
146
  /**
143
- * Apply styling to the Progress slots based on the state
147
+ * Apply styling to the ProgressBar slots based on the state
144
148
  */
145
149
 
146
150
 
147
- const useProgressStyles_unstable = state => {
151
+ const useProgressBarStyles_unstable = state => {
148
152
  const {
149
153
  max,
150
154
  shape,
@@ -157,10 +161,10 @@ const useProgressStyles_unstable = state => {
157
161
  const {
158
162
  dir
159
163
  } = react_shared_contexts_1.useFluent_unstable();
160
- state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
164
+ state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
161
165
 
162
166
  if (state.bar) {
163
- 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, validationState && barStyles[validationState], state.bar.className);
167
+ 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);
164
168
  }
165
169
 
166
170
  if (state.bar && value !== undefined) {
@@ -173,5 +177,9 @@ const useProgressStyles_unstable = state => {
173
177
  return state;
174
178
  };
175
179
 
176
- exports.useProgressStyles_unstable = useProgressStyles_unstable;
177
- //# sourceMappingURL=useProgressStyles.js.map
180
+ exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
181
+
182
+ /** @deprecated renamed to useProgressBarStyles_unstable */
183
+
184
+ exports.useProgressStyles_unstable = exports.useProgressBarStyles_unstable;
185
+ //# sourceMappingURL=useProgressBarStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","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// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to progressBarClassNames */\nexport const progressClassNames = progressBarClassNames;\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%',\n },\n '100%': {\n left: '100%',\n },\n};\nconst indeterminateProgressBarRTL = {\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 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\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to useProgressBarStyles_unstable */\nexport const useProgressStyles_unstable = useProgressBarStyles_unstable;\n"],"sourceRoot":""}
@@ -9,12 +9,12 @@ const React = /*#__PURE__*/require("react");
9
9
 
10
10
  const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
11
11
 
12
- const Progress_1 = /*#__PURE__*/require("../../Progress");
12
+ const ProgressBar_1 = /*#__PURE__*/require("../../ProgressBar");
13
13
 
14
14
  exports.progressFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('ProgressField');
15
15
  exports.ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
16
16
  const state = react_field_1.useField_unstable(props, ref, {
17
- component: Progress_1.Progress,
17
+ component: ProgressBar_1.ProgressBar,
18
18
  classNames: exports.progressFieldClassNames,
19
19
  labelConnection: 'aria-labelledby',
20
20
  ariaInvalidOnError: false
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,UAAA,CAAA,QAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAA9B,CAAd;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAVqE,CAAzD;AAYb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","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 { Progress } from '../../Progress';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\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: Progress,\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"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,aAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,aAAA,CAAA,WAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAA9B,CAAd;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAVqE,CAAzD;AAYb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","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"],"sourceRoot":""}
@@ -3,38 +3,78 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressStyles_unstable = exports.useProgress_unstable = exports.renderProgress_unstable = exports.progressClassNames = exports.Progress = void 0;
6
+ exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressBarStyles_unstable = exports.useProgressBar_unstable = exports.renderProgressBar_unstable = exports.progressBarClassNames = exports.ProgressBar = exports.useProgressStyles_unstable = exports.useProgress_unstable = exports.renderProgress_unstable = exports.progressClassNames = exports.Progress = void 0;
7
+
8
+ var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar"); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
9
+ // eslint-disable-next-line deprecation/deprecation
7
10
 
8
- var Progress_1 = /*#__PURE__*/require("./Progress");
9
11
 
10
12
  Object.defineProperty(exports, "Progress", {
11
13
  enumerable: true,
12
14
  get: function () {
13
- return Progress_1.Progress;
15
+ return ProgressBar_1.Progress;
14
16
  }
15
- });
17
+ }); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
18
+ // eslint-disable-next-line deprecation/deprecation
19
+
16
20
  Object.defineProperty(exports, "progressClassNames", {
17
21
  enumerable: true,
18
22
  get: function () {
19
- return Progress_1.progressClassNames;
23
+ return ProgressBar_1.progressClassNames;
20
24
  }
21
- });
25
+ }); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
26
+ // eslint-disable-next-line deprecation/deprecation
27
+
22
28
  Object.defineProperty(exports, "renderProgress_unstable", {
23
29
  enumerable: true,
24
30
  get: function () {
25
- return Progress_1.renderProgress_unstable;
31
+ return ProgressBar_1.renderProgress_unstable;
26
32
  }
27
- });
33
+ }); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
34
+ // eslint-disable-next-line deprecation/deprecation
35
+
28
36
  Object.defineProperty(exports, "useProgress_unstable", {
29
37
  enumerable: true,
30
38
  get: function () {
31
- return Progress_1.useProgress_unstable;
39
+ return ProgressBar_1.useProgress_unstable;
32
40
  }
33
- });
41
+ }); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
42
+ // eslint-disable-next-line deprecation/deprecation
43
+
34
44
  Object.defineProperty(exports, "useProgressStyles_unstable", {
35
45
  enumerable: true,
36
46
  get: function () {
37
- return Progress_1.useProgressStyles_unstable;
47
+ return ProgressBar_1.useProgressStyles_unstable;
48
+ }
49
+ });
50
+ Object.defineProperty(exports, "ProgressBar", {
51
+ enumerable: true,
52
+ get: function () {
53
+ return ProgressBar_1.ProgressBar;
54
+ }
55
+ });
56
+ Object.defineProperty(exports, "progressBarClassNames", {
57
+ enumerable: true,
58
+ get: function () {
59
+ return ProgressBar_1.progressBarClassNames;
60
+ }
61
+ });
62
+ Object.defineProperty(exports, "renderProgressBar_unstable", {
63
+ enumerable: true,
64
+ get: function () {
65
+ return ProgressBar_1.renderProgressBar_unstable;
66
+ }
67
+ });
68
+ Object.defineProperty(exports, "useProgressBar_unstable", {
69
+ enumerable: true,
70
+ get: function () {
71
+ return ProgressBar_1.useProgressBar_unstable;
72
+ }
73
+ });
74
+ Object.defineProperty(exports, "useProgressBarStyles_unstable", {
75
+ enumerable: true,
76
+ get: function () {
77
+ return ProgressBar_1.useProgressBarStyles_unstable;
38
78
  }
39
79
  });
40
80
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/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;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,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\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA,C,CACE;AACA;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,QAAA;EAAQ;AAAR,CAAA,E,CACA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA,E,CACA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA,E,CACA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA,E,CACA;AACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;;AAiBF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n Progress,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n progressClassNames,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n renderProgress_unstable,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n useProgress_unstable,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n useProgressStyles_unstable,\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type {\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n ProgressProps,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n ProgressSlots,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n ProgressState,\n ProgressBarProps,\n ProgressBarSlots,\n ProgressBarState,\n} from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-progress",
3
- "version": "0.0.0-nightly-20221213-0427.1",
3
+ "version": "0.0.0-nightly-20221215-0425.1",
4
4
  "description": "Progress component for FluentUI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,14 +27,14 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221213-0427.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221215-0425.1",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-field": "0.0.0-nightly-20221213-0427.1",
35
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20221213-0427.1",
36
- "@fluentui/react-theme": "0.0.0-nightly-20221213-0427.1",
37
- "@fluentui/react-utilities": "0.0.0-nightly-20221213-0427.1",
34
+ "@fluentui/react-field": "0.0.0-nightly-20221215-0425.1",
35
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20221215-0425.1",
36
+ "@fluentui/react-theme": "0.0.0-nightly-20221215-0425.1",
37
+ "@fluentui/react-utilities": "0.0.0-nightly-20221215-0425.1",
38
38
  "@griffel/react": "^1.4.2",
39
39
  "tslib": "^2.1.0"
40
40
  },
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":"","sources":["../../../../../../../packages/react-components/react-progress/src/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":["../../../../../../../../../packages/react-components/react-progress/src/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":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=Progress.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/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 * The shape of the bar and track.\n * @default 'rounded'\n */\n shape?: 'rounded' | 'rectangular';\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 * The status of the progress bar. Changes the color of the bar.\n */\n validationState?: 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering Progress\n */\nexport type ProgressState = ComponentState<ProgressSlots> &\n Required<Pick<ProgressProps, 'max' | 'shape' | 'thickness'>> &\n Pick<ProgressProps, 'value' | 'validationState'>;\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":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/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"]}
@@ -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":["../../../../../../../../../packages/react-components/react-progress/src/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":""}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/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,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;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,KAF2B;IAG3B,SAH2B;IAI3B,KAJ2B;IAK3B,eAL2B;IAM3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANe;IAU3B,IAV2B;IAW3B;EAX2B,CAA7B;EAcA,OAAO,KAAP;AACD,CAhCM","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 { 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: ProgressState = {\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"],"sourceRoot":""}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts"],"names":[],"mappings":"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","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 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 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 ...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: indeterminateProgress,\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: indeterminateProgressRTL,\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 Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\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 progressClassNames.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 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 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"],"sourceRoot":""}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/Progress.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Progress/index';\n"],"sourceRoot":""}
@@ -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":["../../../../../../../../../packages/react-components/react-progress/src/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":""}
@@ -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":["../../../../../../../../../packages/react-components/react-progress/src/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":""}
@@ -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":["../../../../../../../../../packages/react-components/react-progress/src/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":""}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/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,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;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,KAF2B;IAG3B,SAH2B;IAI3B,KAJ2B;IAK3B,eAL2B;IAM3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANe;IAU3B,IAV2B;IAW3B;EAX2B,CAA7B;EAcA,OAAO,KAAP;AACD,CAhCM;;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 { 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: ProgressState = {\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"],"sourceRoot":""}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts"],"names":[],"mappings":"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","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 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 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 ...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: indeterminateProgress,\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: indeterminateProgressRTL,\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 Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\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 progressClassNames.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 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 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"],"sourceRoot":""}