@fluentui/react-progress 9.5.1 → 9.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -6
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js +3 -2
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js +3 -1
- package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js +3 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js +3 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.3)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:42 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.2..@fluentui/react-progress_v9.5.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-motion to v9.16.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.2)
|
|
21
|
+
|
|
22
|
+
Tue, 26 May 2026 09:39:33 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.1..@fluentui/react-progress_v9.5.2)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
28
|
+
- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
29
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.1)
|
|
8
33
|
|
|
9
|
-
Thu, 23 Apr 2026
|
|
34
|
+
Thu, 23 Apr 2026 14:21:10 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.5.0..@fluentui/react-progress_v9.5.1)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
13
38
|
|
|
14
39
|
- fix: drop unnecessary dependencies from base hooks ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-motion to v9.15.0 ([PR #
|
|
16
|
-
- Bump @fluentui/react-field to v9.5.1 ([PR #
|
|
17
|
-
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #
|
|
18
|
-
- Bump @fluentui/react-utilities to v9.26.3 ([PR #
|
|
40
|
+
- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
41
|
+
- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
42
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
19
44
|
|
|
20
45
|
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.0)
|
|
21
46
|
|
|
@@ -108,8 +108,6 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
108
108
|
* Apply styling to the ProgressBar slots based on the state
|
|
109
109
|
*/
|
|
110
110
|
export const useProgressBarStyles_unstable = state => {
|
|
111
|
-
'use no memo';
|
|
112
|
-
|
|
113
111
|
const {
|
|
114
112
|
color,
|
|
115
113
|
max,
|
|
@@ -119,11 +117,14 @@ export const useProgressBarStyles_unstable = state => {
|
|
|
119
117
|
} = state;
|
|
120
118
|
const rootStyles = useRootStyles();
|
|
121
119
|
const barStyles = useBarStyles();
|
|
120
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
122
121
|
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
123
122
|
if (state.bar) {
|
|
123
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
124
124
|
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
125
125
|
}
|
|
126
126
|
if (state.bar && value !== undefined) {
|
|
127
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
127
128
|
state.bar.style = {
|
|
128
129
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
129
130
|
...state.bar.style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\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;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%'\n }\n },\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground\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 * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\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;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%'\n }\n },\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground\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 * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n const { color, max, shape, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n if (state.bar) {\n // eslint-disable-next-line react-hooks/immutability\n state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n }\n if (state.bar && value !== undefined) {\n // eslint-disable-next-line react-hooks/immutability\n state.bar.style = {\n width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n ...state.bar.style\n };\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -82,15 +82,17 @@ const barThicknessValues = {
|
|
|
82
82
|
/**
|
|
83
83
|
* Apply styling to the ProgressBar slots based on the state
|
|
84
84
|
*/ export const useProgressBarStyles_unstable = (state)=>{
|
|
85
|
-
'use no memo';
|
|
86
85
|
const { color, max, shape, thickness, value } = state;
|
|
87
86
|
const rootStyles = useRootStyles();
|
|
88
87
|
const barStyles = useBarStyles();
|
|
88
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
89
89
|
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
90
90
|
if (state.bar) {
|
|
91
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
91
92
|
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
92
93
|
}
|
|
93
94
|
if (state.bar && value !== undefined) {
|
|
95
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
94
96
|
state.bar.style = {
|
|
95
97
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
96
98
|
...state.bar.style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n 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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n borderRadius: 'inherit',\n height: '100%',\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%',\n },\n },\n\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\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
|
|
1
|
+
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n 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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n borderRadius: 'inherit',\n height: '100%',\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%',\n },\n },\n\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\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\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n barStyles.brand,\n value === undefined && barStyles.indeterminate,\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 // eslint-disable-next-line react-hooks/immutability\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"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAAuF;IAClGC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,gBAAgBV,WAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,OAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,OAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,OAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,eAAetB,WAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,OAAOW,uBAAuB,CAAC;MACjC,EAAEX,OAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,OAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,OAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,OAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,OAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,OAAOsC,4BAA4B;IACtD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElB,oDAAoD;IACpDoB,MAAMtC,IAAI,CAAC8C,SAAS,GAAGjD,aACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACb,oDAAoD;QACpDqC,MAAMrC,GAAG,CAAC6C,SAAS,GAAGjD,aACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpC,oDAAoD;QACpDT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAG,AAACG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}
|
|
@@ -171,15 +171,17 @@ const barThicknessValues = {
|
|
|
171
171
|
]
|
|
172
172
|
});
|
|
173
173
|
const useProgressBarStyles_unstable = (state)=>{
|
|
174
|
-
'use no memo';
|
|
175
174
|
const { color, max, shape, thickness, value } = state;
|
|
176
175
|
const rootStyles = useRootStyles();
|
|
177
176
|
const barStyles = useBarStyles();
|
|
177
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
178
178
|
state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
179
179
|
if (state.bar) {
|
|
180
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
180
181
|
state.bar.className = (0, _react.mergeClasses)(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
181
182
|
}
|
|
182
183
|
if (state.bar && value !== undefined) {
|
|
184
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
183
185
|
state.bar.style = {
|
|
184
186
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
185
187
|
...state.bar.style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\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;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%'\n }\n },\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground\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 * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\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;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%'\n }\n },\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground\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 * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n const { color, max, shape, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n if (state.bar) {\n // eslint-disable-next-line react-hooks/immutability\n state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n }\n if (state.bar && value !== undefined) {\n // eslint-disable-next-line react-hooks/immutability\n state.bar.style = {\n width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n ...state.bar.style\n };\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"mappings":"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"}
|
|
@@ -98,15 +98,17 @@ const barThicknessValues = {
|
|
|
98
98
|
}
|
|
99
99
|
});
|
|
100
100
|
const useProgressBarStyles_unstable = (state)=>{
|
|
101
|
-
'use no memo';
|
|
102
101
|
const { color, max, shape, thickness, value } = state;
|
|
103
102
|
const rootStyles = useRootStyles();
|
|
104
103
|
const barStyles = useBarStyles();
|
|
104
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
105
105
|
state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
106
106
|
if (state.bar) {
|
|
107
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
107
108
|
state.bar.className = (0, _react.mergeClasses)(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
108
109
|
}
|
|
109
110
|
if (state.bar && value !== undefined) {
|
|
111
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
110
112
|
state.bar.style = {
|
|
111
113
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
112
114
|
...state.bar.style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n 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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n borderRadius: 'inherit',\n height: '100%',\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%',\n },\n },\n\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\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
|
|
1
|
+
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\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\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n 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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n borderRadius: 'inherit',\n height: '100%',\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 '@media screen and (prefers-reduced-motion: reduce)': {\n // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n maxWidth: '100%',\n },\n },\n\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\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\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n barStyles.brand,\n value === undefined && barStyles.indeterminate,\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 // eslint-disable-next-line react-hooks/immutability\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"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.3",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-motion": "^9.
|
|
16
|
-
"@fluentui/react-field": "^9.5.
|
|
17
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
15
|
+
"@fluentui/react-motion": "^9.16.1",
|
|
16
|
+
"@fluentui/react-field": "^9.5.3",
|
|
17
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
18
18
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
19
19
|
"@fluentui/react-theme": "^9.2.1",
|
|
20
|
-
"@fluentui/react-utilities": "^9.26.
|
|
20
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
21
21
|
"@griffel/react": "^1.5.32",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|