@fluentui/react-progress 9.0.0-alpha.9 → 9.0.0

package/lib/components/ProgressBar/useProgressBarStyles.js

@@ -4,9 +4,9 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 export const progressBarClassNames = {
   root: 'fui-ProgressBar',
   bar: 'fui-ProgressBar__bar'
-}; // If the percentComplete is near 0, don't animate it.
+};
+// If the percentComplete is near 0, don't animate it.
 // This prevents animations on reset to 0 scenarios.
-
 const ZERO_THRESHOLD = 0.01;
 const barThicknessValues = {
   medium: '2px',
@@ -14,7 +14,7 @@ const barThicknessValues = {
 };
 const indeterminateProgressBar = {
   '0%': {
-    left: '0% /* @noflip */'
+    left: '-100% /* @noflip */'
   },
   '100%': {
     left: '100% /* @noflip */'
@@ -31,115 +31,112 @@ const indeterminateProgressBarRTL = {
 /**
  * Styles for the root slot
  */
-
 const useRootStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "ftgm304",
-    "De3pzq": "f18f03hv",
-    "Bdqf98w": "fhb5wj7",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw",
-    "I5kgcl": "fs8b23g",
-    "tu2nte": "f1mcb20s",
-    "y0r1ed": "fek7wd8"
+  root: {
+    mc9l5x: "ftgm304",
+    De3pzq: "f18f03hv",
+    Bdqf98w: "fhb5wj7",
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    I5kgcl: "fs8b23g",
+    tu2nte: "f1mcb20s",
+    y0r1ed: "fek7wd8"
   },
-  "rounded": {
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"]
+  rounded: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"]
   },
-  "rectangular": {
-    "Bbmb7ep": ["fzi6hpg", "fyowgf4"],
-    "Beyfa6y": ["fyowgf4", "fzi6hpg"],
-    "B7oj6ja": ["f3fg2lr", "f13av6d4"],
-    "Btl43ni": ["f13av6d4", "f3fg2lr"]
+  square: {
+    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
+    Beyfa6y: ["fyowgf4", "fzi6hpg"],
+    B7oj6ja: ["f3fg2lr", "f13av6d4"],
+    Btl43ni: ["f13av6d4", "f3fg2lr"]
   },
-  "medium": {
-    "Bqenvij": "f4t8t6x"
+  medium: {
+    Bqenvij: "f4t8t6x"
   },
-  "large": {
-    "Bqenvij": "f6ywr7j"
+  large: {
+    Bqenvij: "f6ywr7j"
   }
 }, {
-  "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;}"],
-  "m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
-    "m": "screen and (forced-colors: active)"
+  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;}"],
+  m: [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
+    m: "screen and (forced-colors: active)"
   }], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
-    "m": "screen and (forced-colors: active)"
+    m: "screen and (forced-colors: active)"
   }], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
-    "m": "screen and (forced-colors: active)"
+    m: "screen and (forced-colors: active)"
   }]]
 });
 /**
  * Styles for the ProgressBar bar
  */
-
-
 const useBarStyles = /*#__PURE__*/__styles({
-  "base": {
-    "De3pzq": "ftywsgz",
-    "Bpep1pd": "f1neahkh",
-    "Bbmb7ep": ["f1d9uwra", "fzibvwi"],
-    "Beyfa6y": ["fzibvwi", "f1d9uwra"],
-    "B7oj6ja": ["fuoumxm", "f1vtqnvc"],
-    "Btl43ni": ["f1vtqnvc", "fuoumxm"]
+  base: {
+    Bbmb7ep: ["f1d9uwra", "fzibvwi"],
+    Beyfa6y: ["fzibvwi", "f1d9uwra"],
+    B7oj6ja: ["fuoumxm", "f1vtqnvc"],
+    Btl43ni: ["f1vtqnvc", "fuoumxm"]
+  },
+  medium: {
+    Bqenvij: "f4t8t6x"
   },
-  "medium": {
-    "Bqenvij": "f4t8t6x"
+  large: {
+    Bqenvij: "f6ywr7j"
   },
-  "large": {
-    "Bqenvij": "f6ywr7j"
+  nonZeroDeterminate: {
+    Bmy1vo4: "fjt6zfz",
+    B3o57yi: "f1wofebd",
+    Bkqvd7p: "fv71qf3"
   },
-  "nonZeroDeterminate": {
-    "Bmy1vo4": "fjt6zfz",
-    "B3o57yi": "f1wofebd",
-    "Bkqvd7p": "fv71qf3"
+  indeterminate: {
+    B2u0y6b: "fa0wk36",
+    qhf8xq: "f10pi13n",
+    Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
+    Bv12yb3: "f1jk3tlg",
+    vin17d: "f1a27w2r",
+    w3vfg9: "f1cpbl36",
+    Gqtpxc: "f4akx1t",
+    B3vm3ge: "f18p5put"
   },
-  "indeterminate": {
-    "B2u0y6b": "fa0wk36",
-    "qhf8xq": "f10pi13n",
-    "Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
-    "Bv12yb3": "f1h4fm7e",
-    "vin17d": "f1a27w2r",
-    "w3vfg9": "f1cpbl36",
-    "Gqtpxc": "f4akx1t",
-    "B3vm3ge": "f18p5put"
+  rtl: {
+    Bv12yb3: "fjhwsai"
   },
-  "rtl": {
-    "Bv12yb3": "fjhwsai"
+  brand: {
+    De3pzq: "ftywsgz",
+    Bpep1pd: "f1neahkh"
   },
-  "error": {
-    "De3pzq": "fdl5y0r"
+  error: {
+    De3pzq: "fdl5y0r"
   },
-  "warning": {
-    "De3pzq": "f1s438gw"
+  warning: {
+    De3pzq: "f1s438gw"
   },
-  "success": {
-    "De3pzq": "flxk52p"
+  success: {
+    De3pzq: "flxk52p"
   }
 }, {
-  "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);}"],
-  "m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
-    "m": "screen and (forced-colors: active)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
-    "m": "screen and (prefers-reduced-motion: reduce)"
+  d: [".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    );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".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;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
+  k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
-    "m": "screen and (prefers-reduced-motion: reduce)"
-  }]],
-  "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%;}}"]
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
+    m: "screen and (forced-colors: active)"
+  }]]
 });
 /**
  * Apply styling to the ProgressBar slots based on the state
  */
-
-
 export const useProgressBarStyles_unstable = state => {
   const {
+    color,
     max,
     shape,
     thickness,
-    validationState,
     value
   } = state;
   const rootStyles = useRootStyles();
@@ -148,18 +145,15 @@ export const useProgressBarStyles_unstable = state => {
     dir
   } = useFluent();
   state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
-
   if (state.bar) {
-    state.bar.className = mergeClasses(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);
+    state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
   }
-
   if (state.bar && value !== undefined) {
     state.bar.style = {
       width: Math.min(100, Math.max(0, value / max * 100)) + '%',
       ...state.bar.style
     };
   }
-
   return state;
 };
 //# sourceMappingURL=useProgressBarStyles.js.map

package/lib/components/ProgressBar/useProgressBarStyles.js.map

@@ -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// 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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","useBarStyles","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","className","base","brand","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: '-100% /* @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  square: {\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    ...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  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\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 { color, max, shape, thickness, 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      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\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"]}

package/lib/components/ProgressField/ProgressField.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
-import { ProgressBar } from '../../ProgressBar';
-export const progressFieldClassNames = /*#__PURE__*/getFieldClassNames('ProgressField');
-export const ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, {
-    component: ProgressBar,
-    classNames: progressFieldClassNames,
-    labelConnection: 'aria-labelledby',
-    ariaInvalidOnError: false
-  });
-  state.control.validationState = state.validationState;
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
+/* eslint-disable deprecation/deprecation */
+import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
+import { ProgressBar, progressBarClassNames } from '../../ProgressBar';
+/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */
+export const progressFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(progressBarClassNames.root);
+/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */
+export const ProgressField = /*#__PURE__*/makeDeprecatedField(ProgressBar, {
+  displayName: 'ProgressField',
+  mapProps: props => ({
+    ...props,
+    control: {
+      ...props.control,
+      validationState: props.validationState
+    }
+  })
 });
-ProgressField.displayName = 'ProgressField';
 //# sourceMappingURL=ProgressField.js.map

package/lib/components/ProgressField/ProgressField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,WAAT,QAA4B,mBAA5B;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,WAD+B;IAE1C,UAAU,EAAE,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAAb,CAA/B;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAVqE,CAA/D;AAYP,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":"../src/"}
+{"version":3,"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,WAAW,EAAEC,qBAAqB,QAA0B,mBAAmB;AAIxF;AACA,OAAO,MAAMC,uBAAuB,gBAAGJ,4BAA4B,CAACG,qBAAqB,CAACE,IAAI,CAAC;AAC/F;AACA,OAAO,MAAMC,aAAa,gBAA4CL,mBAAmB,CAACC,WAAW,EAAE;EACrGK,WAAW,EAAE,eAAe;EAC5BC,QAAQ,EAAGC,KAAyB,KAAM;IACxC,GAAGA,KAAK;IACRC,OAAO,EAAE;MAAE,GAAGD,KAAK,CAACC,OAAO;MAAEC,eAAe,EAAEF,KAAK,CAACE;IAAe;GACpE;CACF,CAAC","names":["getDeprecatedFieldClassNames","makeDeprecatedField","ProgressBar","progressBarClassNames","progressFieldClassNames","root","ProgressField","displayName","mapProps","props","control","validationState"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar, progressBarClassNames, ProgressBarProps } from '../../ProgressBar';\n\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport type ProgressFieldProps = DeprecatedFieldProps<ProgressBarProps>;\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const progressFieldClassNames = getDeprecatedFieldClassNames(progressBarClassNames.root);\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = makeDeprecatedField(ProgressBar, {\n  displayName: 'ProgressField',\n  mapProps: (props: ProgressFieldProps) => ({\n    ...props,\n    control: { ...props.control, validationState: props.validationState },\n  }),\n});\n"]}

package/lib/index.js

@@ -1,3 +1,4 @@
 export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
+// eslint-disable-next-line deprecation/deprecation
 export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":"AAAA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,uBAJF,EAKE,6BALF,QAMO,eANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField","ProgressField_unstable","progressFieldClassNames"],"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\n// eslint-disable-next-line deprecation/deprecation\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}

package/lib-amd/ProgressBar.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/ProgressBar/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ProgressBar.js.map

package/lib-amd/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/ProgressBar.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/ProgressBar/index';\n"]}

package/lib-amd/ProgressField.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/ProgressField/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ProgressField.js.map

package/lib-amd/ProgressField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/ProgressField.ts"],"names":[],"mappings":";;;IAAA,uCAAiD","sourcesContent":["export * from './components/ProgressField/index';\n"]}

package/lib-amd/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useProgressBar", "./renderProgressBar", "./useProgressBarStyles"], function (require, exports, React, useProgressBar_1, renderProgressBar_1, useProgressBarStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ProgressBar = void 0;
+    /**
+     * A ProgressBar bar shows the progression of a task.
+     */
+    exports.ProgressBar = React.forwardRef(function (props, ref) {
+        var state = useProgressBar_1.useProgressBar_unstable(props, ref);
+        useProgressBarStyles_1.useProgressBarStyles_unstable(state);
+        return renderProgressBar_1.renderProgressBar_unstable(state);
+    });
+    exports.ProgressBar.displayName = 'ProgressBar';
+});
+//# sourceMappingURL=ProgressBar.js.map

package/lib-amd/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}

package/lib-amd/components/ProgressBar/ProgressBar.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ProgressBar.types.js.map

package/lib-amd/components/ProgressBar/ProgressBar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\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 ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<ProgressBarSlots> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"]}

package/lib-amd/components/ProgressBar/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./ProgressBar", "./ProgressBar.types", "./renderProgressBar", "./useProgressBar", "./useProgressBarStyles"], function (require, exports, tslib_1, ProgressBar_1, ProgressBar_types_1, renderProgressBar_1, useProgressBar_1, useProgressBarStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ProgressBar_1, exports);
+    tslib_1.__exportStar(ProgressBar_types_1, exports);
+    tslib_1.__exportStar(renderProgressBar_1, exports);
+    tslib_1.__exportStar(useProgressBar_1, exports);
+    tslib_1.__exportStar(useProgressBarStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/ProgressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}

package/lib-amd/components/ProgressBar/renderProgressBar.js

@@ -0,0 +1,14 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderProgressBar_unstable = void 0;
+    /**
+     * Render the final JSX of ProgressBar
+     */
+    var renderProgressBar_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), slots.bar && React.createElement(slots.bar, tslib_1.__assign({}, slotProps.bar)));
+    };
+    exports.renderProgressBar_unstable = renderProgressBar_unstable;
+});
+//# sourceMappingURL=renderProgressBar.js.map

package/lib-amd/components/ProgressBar/renderProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAC/D,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,oBAAC,KAAK,CAAC,GAAG,uBAAK,SAAS,CAAC,GAAG,EAAI,CAAc,CAAC;IACtG,CAAC,CAAC;IAHW,QAAA,0BAA0B,8BAGrC","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"]}

package/lib-amd/components/ProgressBar/useProgressBar.js

@@ -0,0 +1,38 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useProgressBar_unstable = void 0;
+    /**
+     * Create the state required to render ProgressBar.
+     *
+     * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
+     * before being passed to renderProgressBar_unstable.
+     *
+     * @param props - props from this instance of ProgressBar
+     * @param ref - reference to root HTMLElement of ProgressBar
+     */
+    var useProgressBar_unstable = function (props, ref) {
+        // Props
+        var _a = props.color, color = _a === void 0 ? 'brand' : _a, _b = props.max, max = _b === void 0 ? 1.0 : _b, _c = props.shape, shape = _c === void 0 ? 'rounded' : _c, _d = props.thickness, thickness = _d === void 0 ? 'medium' : _d, value = props.value;
+        var root = react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref, role: 'progressbar', 'aria-valuemin': value !== undefined ? 0 : undefined, 'aria-valuemax': value !== undefined ? max : undefined, 'aria-valuenow': value }, props));
+        var bar = react_utilities_1.resolveShorthand(props.bar, {
+            required: true,
+        });
+        var state = {
+            color: color,
+            max: max,
+            shape: shape,
+            thickness: thickness,
+            value: value,
+            components: {
+                root: 'div',
+                bar: 'div',
+            },
+            root: root,
+            bar: bar,
+        };
+        return state;
+    };
+    exports.useProgressBar_unstable = useProgressBar_unstable;
+});
+//# sourceMappingURL=useProgressBar.js.map

package/lib-amd/components/ProgressBar/useProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAC1F,QAAQ;QACA,IAAA,KAA+E,KAAK,MAArE,EAAf,KAAK,mBAAG,OAAO,KAAA,EAAE,KAA8D,KAAK,IAA1D,EAAT,GAAG,mBAAG,GAAG,KAAA,EAAE,KAAmD,KAAK,MAAvC,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,KAAgC,KAAK,UAAjB,EAApB,SAAS,mBAAG,QAAQ,KAAA,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAE7F,IAAM,IAAI,GAAG,uCAAqB,CAAC,KAAK,qBACtC,GAAG,KAAA,EACH,IAAI,EAAE,aAAa,EACnB,eAAe,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpD,eAAe,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACtD,eAAe,EAAE,KAAK,IACnB,KAAK,EACR,CAAC;QAEH,IAAM,GAAG,GAAG,kCAAgB,CAAC,KAAK,CAAC,GAAG,EAAE;YACtC,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,IAAM,KAAK,GAAqB;YAC9B,KAAK,OAAA;YACL,GAAG,KAAA;YACH,KAAK,OAAA;YACL,SAAS,WAAA;YACT,KAAK,OAAA;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,KAAK;aACX;YACD,IAAI,MAAA;YACJ,GAAG,KAAA;SACJ,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAhCW,QAAA,uBAAuB,2BAgClC","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 { color = 'brand', max = 1.0, shape = 'rounded', thickness = 'medium', 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    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"]}

package/lib-amd/components/ProgressBar/useProgressBarStyles.js

@@ -0,0 +1,112 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "@fluentui/react-shared-contexts"], function (require, exports, tslib_1, react_1, react_theme_1, react_shared_contexts_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
+    exports.progressBarClassNames = {
+        root: 'fui-ProgressBar',
+        bar: 'fui-ProgressBar__bar',
+    };
+    // If the percentComplete is near 0, don't animate it.
+    // This prevents animations on reset to 0 scenarios.
+    var ZERO_THRESHOLD = 0.01;
+    var barThicknessValues = {
+        medium: '2px',
+        large: '4px',
+    };
+    var indeterminateProgressBar = {
+        '0%': {
+            left: '-100% /* @noflip */',
+        },
+        '100%': {
+            left: '100% /* @noflip */',
+        },
+    };
+    var indeterminateProgressBarRTL = {
+        '100%': {
+            right: '-100% /* @noflip */',
+        },
+        '0%': {
+            right: '100% /* @noflip */',
+        },
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useRootStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign({ display: 'block', backgroundColor: react_theme_1.tokens.colorNeutralBackground6, justifySelf: 'stretch' }, react_1.shorthands.overflow('hidden')), { '@media screen and (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderBottom('1px', 'solid', 'CanvasText')) }),
+        rounded: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
+        square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
+        medium: {
+            height: barThicknessValues.medium,
+        },
+        large: {
+            height: barThicknessValues.large,
+        },
+    });
+    /**
+     * Styles for the ProgressBar bar
+     */
+    var useBarStyles = react_1.makeStyles({
+        base: tslib_1.__assign({}, react_1.shorthands.borderRadius('inherit')),
+        medium: {
+            height: barThicknessValues.medium,
+        },
+        large: {
+            height: barThicknessValues.large,
+        },
+        nonZeroDeterminate: {
+            transitionProperty: 'width',
+            transitionDuration: '0.3s',
+            transitionTimingFunction: 'ease',
+        },
+        indeterminate: {
+            maxWidth: '33%',
+            position: 'relative',
+            backgroundImage: "linear-gradient(\n      to right,\n      " + react_theme_1.tokens.colorNeutralBackground6 + " 0%,\n      " + react_theme_1.tokens.colorTransparentBackground + " 50%,\n      " + react_theme_1.tokens.colorNeutralBackground6 + " 100%\n    )",
+            animationName: indeterminateProgressBar,
+            animationDuration: '3s',
+            animationIterationCount: 'infinite',
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                animationDuration: '0.01ms',
+                animationIterationCount: '1',
+            },
+        },
+        rtl: {
+            animationName: indeterminateProgressBarRTL,
+        },
+        brand: {
+            backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
+            '@media screen and (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+            },
+        },
+        error: {
+            backgroundColor: react_theme_1.tokens.colorPaletteRedBackground3,
+        },
+        warning: {
+            backgroundColor: react_theme_1.tokens.colorPaletteDarkOrangeBackground3,
+        },
+        success: {
+            backgroundColor: react_theme_1.tokens.colorPaletteGreenBackground3,
+        },
+    });
+    /**
+     * Apply styling to the ProgressBar slots based on the state
+     */
+    var useProgressBarStyles_unstable = function (state) {
+        var color = state.color, max = state.max, shape = state.shape, thickness = state.thickness, value = state.value;
+        var rootStyles = useRootStyles();
+        var barStyles = useBarStyles();
+        var dir = react_shared_contexts_1.useFluent_unstable().dir;
+        state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
+        if (state.bar) {
+            state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
+        }
+        if (state.bar && value !== undefined) {
+            state.bar.style = tslib_1.__assign({ width: Math.min(100, Math.max(0, (value / max) * 100)) + '%' }, state.bar.style);
+        }
+        return state;
+    };
+    exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable;
+});
+//# sourceMappingURL=useProgressBarStyles.js.map