@fluentui/react-progress 0.0.0-nightly-20221227-0422.1 → 0.0.0-nightly-20221229-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.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/components/ProgressBar/ProgressBar.js +0 -1
- package/lib/components/ProgressBar/ProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/renderProgressBar.js +4 -3
- package/lib/components/ProgressBar/renderProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBar.js +0 -1
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBarStyles.js +2 -10
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib/components/ProgressField/ProgressField.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/ProgressBar.js +0 -2
- package/lib-commonjs/ProgressBar.js.map +1 -1
- package/lib-commonjs/ProgressField.js +0 -2
- package/lib-commonjs/ProgressField.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/ProgressBar.js +0 -6
- package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/ProgressBar.types.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/index.js +0 -6
- package/lib-commonjs/components/ProgressBar/index.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js +4 -7
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBar.js +0 -4
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +2 -15
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-commonjs/components/ProgressField/ProgressField.js +0 -4
- package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -1
- package/lib-commonjs/components/ProgressField/index.js +0 -2
- package/lib-commonjs/components/ProgressField/index.js.map +1 -1
- package/lib-commonjs/index.js +0 -4
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-progress",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-progress_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Thu, 29 Dec 2022 04:34:23 GMT",
|
6
|
+
"tag": "@fluentui/react-progress_v0.0.0-nightly-20221229-0425.1",
|
7
|
+
"version": "0.0.0-nightly-20221229-0425.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,32 +16,32 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-progress",
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20221229-0425.1",
|
20
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
21
21
|
},
|
22
22
|
{
|
23
23
|
"author": "beachball",
|
24
24
|
"package": "@fluentui/react-progress",
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
26
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221229-0425.1",
|
26
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
"author": "beachball",
|
30
30
|
"package": "@fluentui/react-progress",
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
32
|
-
"commit": "
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221229-0425.1",
|
32
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
33
33
|
},
|
34
34
|
{
|
35
35
|
"author": "beachball",
|
36
36
|
"package": "@fluentui/react-progress",
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
38
|
-
"commit": "
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221229-0425.1",
|
38
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
39
39
|
},
|
40
40
|
{
|
41
41
|
"author": "beachball",
|
42
42
|
"package": "@fluentui/react-progress",
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
44
|
-
"commit": "
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221229-0425.1",
|
44
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
45
45
|
}
|
46
46
|
]
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,22 +1,22 @@
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Thu, 29 Dec 2022 04:34:23 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20221229-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221229-0425.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.9..@fluentui/react-progress_v0.0.0-nightly-
|
9
|
+
Thu, 29 Dec 2022 04:34:23 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.9..@fluentui/react-progress_v0.0.0-nightly-20221229-0425.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
20
20
|
|
21
21
|
## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.9)
|
22
22
|
|
@@ -5,7 +5,6 @@ import { useProgressBarStyles_unstable } from './useProgressBarStyles';
|
|
5
5
|
/**
|
6
6
|
* A ProgressBar bar shows the progression of a task.
|
7
7
|
*/
|
8
|
-
|
9
8
|
export const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
9
|
const state = useProgressBar_unstable(props, ref);
|
11
10
|
useProgressBarStyles_unstable(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","ProgressBar","forwardRef","props","ref","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"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"]}
|
@@ -3,14 +3,15 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
4
4
|
* Render the final JSX of ProgressBar
|
5
5
|
*/
|
6
|
-
|
7
6
|
export const renderProgressBar_unstable = state => {
|
8
7
|
const {
|
9
8
|
slots,
|
10
9
|
slotProps
|
11
10
|
} = getSlots(state);
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
13
|
-
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
12
|
+
...slotProps.root
|
13
|
+
}, slots.bar && /*#__PURE__*/React.createElement(slots.bar, {
|
14
|
+
...slotProps.bar
|
14
15
|
}));
|
15
16
|
};
|
16
17
|
//# sourceMappingURL=renderProgressBar.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAC9D,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAAGF,KAAK,CAACG,GAAG,iBAAIP,oBAACI,KAAK,CAACG,GAAG;IAAA,GAAKF,SAAS,CAACE;EAAG,EAAI,CAAc;AACrG,CAAC","names":["React","getSlots","renderProgressBar_unstable","state","slots","slotProps","root","bar"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"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"]}
|
@@ -8,7 +8,6 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
8
8
|
* @param props - props from this instance of ProgressBar
|
9
9
|
* @param ref - reference to root HTMLElement of ProgressBar
|
10
10
|
*/
|
11
|
-
|
12
11
|
export const useProgressBar_unstable = (props, ref) => {
|
13
12
|
// Props
|
14
13
|
const {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGV,qBAAqB,CAAC,KAAK,EAAE;IACxCI,GAAG;IACHO,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGP,GAAG,GAAGO,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMU,GAAG,GAAGZ,gBAAgB,CAACE,KAAK,CAACU,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BV,GAAG;IACHC,KAAK;IACLC,SAAS;IACTE,KAAK;IACLD,eAAe;IACfQ,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC","names":["getNativeElementProps","resolveShorthand","useProgressBar_unstable","props","ref","max","shape","thickness","validationState","value","root","role","undefined","bar","required","state","components"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"]}
|
@@ -4,9 +4,9 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
4
4
|
export const progressBarClassNames = {
|
5
5
|
root: 'fui-ProgressBar',
|
6
6
|
bar: 'fui-ProgressBar__bar'
|
7
|
-
};
|
7
|
+
};
|
8
|
+
// If the percentComplete is near 0, don't animate it.
|
8
9
|
// This prevents animations on reset to 0 scenarios.
|
9
|
-
|
10
10
|
const ZERO_THRESHOLD = 0.01;
|
11
11
|
const barThicknessValues = {
|
12
12
|
medium: '2px',
|
@@ -31,7 +31,6 @@ const indeterminateProgressBarRTL = {
|
|
31
31
|
/**
|
32
32
|
* Styles for the root slot
|
33
33
|
*/
|
34
|
-
|
35
34
|
const useRootStyles = /*#__PURE__*/__styles({
|
36
35
|
"root": {
|
37
36
|
"mc9l5x": "ftgm304",
|
@@ -74,8 +73,6 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
74
73
|
/**
|
75
74
|
* Styles for the ProgressBar bar
|
76
75
|
*/
|
77
|
-
|
78
|
-
|
79
76
|
const useBarStyles = /*#__PURE__*/__styles({
|
80
77
|
"base": {
|
81
78
|
"De3pzq": "ftywsgz",
|
@@ -132,8 +129,6 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
132
129
|
/**
|
133
130
|
* Apply styling to the ProgressBar slots based on the state
|
134
131
|
*/
|
135
|
-
|
136
|
-
|
137
132
|
export const useProgressBarStyles_unstable = state => {
|
138
133
|
const {
|
139
134
|
max,
|
@@ -148,18 +143,15 @@ export const useProgressBarStyles_unstable = state => {
|
|
148
143
|
dir
|
149
144
|
} = useFluent();
|
150
145
|
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
151
|
-
|
152
146
|
if (state.bar) {
|
153
147
|
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);
|
154
148
|
}
|
155
|
-
|
156
149
|
if (state.bar && value !== undefined) {
|
157
150
|
state.bar.style = {
|
158
151
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
159
152
|
...state.bar.style
|
160
153
|
};
|
161
154
|
}
|
162
|
-
|
163
155
|
return state;
|
164
156
|
};
|
165
157
|
//# sourceMappingURL=useProgressBarStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"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","max","shape","thickness","validationState","value","rootStyles","barStyles","dir","className","base","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '0% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressBarClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAE9B,SAASC,WAAW,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,uBAAuB,gBAAGL,kBAAkB,CAAC,eAAe,CAAC;AAE1E,OAAO,MAAMM,aAAa,gBAA4CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEP,WAAW;IACtBQ,UAAU,EAAEP,uBAAuB;IACnCQ,eAAe,EAAE,iBAAiB;IAClCC,kBAAkB,EAAE;GACrB,CAAC;EACFJ,KAAK,CAACK,OAAO,CAACC,eAAe,GAAGN,KAAK,CAACM,eAAe;EACrDd,uBAAuB,CAACQ,KAAK,CAAC;EAC9B,OAAOT,oBAAoB,CAACS,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,aAAa,CAACW,WAAW,GAAG,eAAe","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","ProgressBar","progressFieldClassNames","ProgressField","forwardRef","props","ref","state","component","classNames","labelConnection","ariaInvalidOnError","control","validationState","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: ProgressBar,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"]}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,eAAe;AAGtB,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField","ProgressField_unstable","progressFieldClassNames"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/ProgressBar.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/ProgressBar.ts"],"sourcesContent":["export * from './components/ProgressBar/index';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/ProgressField.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/ProgressField.ts"],"sourcesContent":["export * from './components/ProgressField/index';\n"]}
|
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.ProgressBar = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const useProgressBar_1 = /*#__PURE__*/require("./useProgressBar");
|
11
|
-
|
12
9
|
const renderProgressBar_1 = /*#__PURE__*/require("./renderProgressBar");
|
13
|
-
|
14
10
|
const useProgressBarStyles_1 = /*#__PURE__*/require("./useProgressBarStyles");
|
15
11
|
/**
|
16
12
|
* A ProgressBar bar shows the progression of a task.
|
17
13
|
*/
|
18
|
-
|
19
|
-
|
20
14
|
exports.ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
15
|
const state = useProgressBar_1.useProgressBar_unstable(props, ref);
|
22
16
|
useProgressBarStyles_1.useProgressBarStyles_unstable(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useProgressBar_1","useProgressBarStyles_1","renderProgressBar_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"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"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}
|
@@ -3,16 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./ProgressBar"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./ProgressBar.types"), exports);
|
12
|
-
|
13
9
|
tslib_1.__exportStar(require("./renderProgressBar"), exports);
|
14
|
-
|
15
10
|
tslib_1.__exportStar(require("./useProgressBar"), exports);
|
16
|
-
|
17
11
|
tslib_1.__exportStar(require("./useProgressBarStyles"), exports);
|
18
12
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}
|
@@ -4,24 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.renderProgressBar_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
9
|
/**
|
12
10
|
* Render the final JSX of ProgressBar
|
13
11
|
*/
|
14
|
-
|
15
|
-
|
16
12
|
const renderProgressBar_unstable = state => {
|
17
13
|
const {
|
18
14
|
slots,
|
19
15
|
slotProps
|
20
16
|
} = react_utilities_1.getSlots(state);
|
21
|
-
return React.createElement(slots.root, {
|
22
|
-
|
17
|
+
return React.createElement(slots.root, {
|
18
|
+
...slotProps.root
|
19
|
+
}, slots.bar && React.createElement(slots.bar, {
|
20
|
+
...slotProps.bar
|
23
21
|
}));
|
24
22
|
};
|
25
|
-
|
26
23
|
exports.renderProgressBar_unstable = renderProgressBar_unstable;
|
27
24
|
//# sourceMappingURL=renderProgressBar.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAC9D,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAAGJ,KAAK,CAACK,GAAG,IAAIF,oBAACH,KAAK,CAACK,GAAG;IAAA,GAAKJ,SAAS,CAACI;EAAG,EAAI,CAAc;AACrG,CAAC;AAHYC,kCAA0B","names":["renderProgressBar_unstable","state","slots","slotProps","react_utilities_1","React","root","bar","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"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"]}
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useProgressBar_unstable = void 0;
|
7
|
-
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
8
|
/**
|
10
9
|
* Create the state required to render ProgressBar.
|
@@ -15,8 +14,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
14
|
* @param props - props from this instance of ProgressBar
|
16
15
|
* @param ref - reference to root HTMLElement of ProgressBar
|
17
16
|
*/
|
18
|
-
|
19
|
-
|
20
17
|
const useProgressBar_unstable = (props, ref) => {
|
21
18
|
// Props
|
22
19
|
const {
|
@@ -52,6 +49,5 @@ const useProgressBar_unstable = (props, ref) => {
|
|
52
49
|
};
|
53
50
|
return state;
|
54
51
|
};
|
55
|
-
|
56
52
|
exports.useProgressBar_unstable = useProgressBar_unstable;
|
57
53
|
//# sourceMappingURL=useProgressBar.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGC,uCAAqB,CAAC,KAAK,EAAE;IACxCP,GAAG;IACHQ,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEH,KAAK,KAAKI,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEJ,KAAK,KAAKI,SAAS,GAAGR,GAAG,GAAGQ,SAAS;IACtD,eAAe,EAAEJ,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMW,GAAG,GAAGH,kCAAgB,CAACR,KAAK,CAACW,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BX,GAAG;IACHC,KAAK;IACLC,SAAS;IACTE,KAAK;IACLD,eAAe;IACfS,UAAU,EAAE;MACVP,IAAI,EAAE,KAAK;MACXI,GAAG,EAAE;KACN;IACDJ,IAAI;IACJI;GACD;EAED,OAAOE,KAAK;AACd,CAAC;AAhCYE,+BAAuB","names":["useProgressBar_unstable","props","ref","max","shape","thickness","validationState","value","root","react_utilities_1","role","undefined","bar","required","state","components","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"]}
|
@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
|
7
|
-
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
-
|
10
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
-
|
12
9
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
13
|
-
|
14
10
|
exports.progressBarClassNames = {
|
15
11
|
root: 'fui-ProgressBar',
|
16
12
|
bar: 'fui-ProgressBar__bar'
|
17
|
-
};
|
13
|
+
};
|
14
|
+
// If the percentComplete is near 0, don't animate it.
|
18
15
|
// This prevents animations on reset to 0 scenarios.
|
19
|
-
|
20
16
|
const ZERO_THRESHOLD = 0.01;
|
21
17
|
const barThicknessValues = {
|
22
18
|
medium: '2px',
|
@@ -41,7 +37,6 @@ const indeterminateProgressBarRTL = {
|
|
41
37
|
/**
|
42
38
|
* Styles for the root slot
|
43
39
|
*/
|
44
|
-
|
45
40
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
46
41
|
"root": {
|
47
42
|
"mc9l5x": "ftgm304",
|
@@ -84,8 +79,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
84
79
|
/**
|
85
80
|
* Styles for the ProgressBar bar
|
86
81
|
*/
|
87
|
-
|
88
|
-
|
89
82
|
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
90
83
|
"base": {
|
91
84
|
"De3pzq": "ftywsgz",
|
@@ -142,8 +135,6 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
142
135
|
/**
|
143
136
|
* Apply styling to the ProgressBar slots based on the state
|
144
137
|
*/
|
145
|
-
|
146
|
-
|
147
138
|
const useProgressBarStyles_unstable = state => {
|
148
139
|
const {
|
149
140
|
max,
|
@@ -158,20 +149,16 @@ const useProgressBarStyles_unstable = state => {
|
|
158
149
|
dir
|
159
150
|
} = react_shared_contexts_1.useFluent_unstable();
|
160
151
|
state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
161
|
-
|
162
152
|
if (state.bar) {
|
163
153
|
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
|
164
154
|
}
|
165
|
-
|
166
155
|
if (state.bar && value !== undefined) {
|
167
156
|
state.bar.style = {
|
168
157
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
169
158
|
...state.bar.style
|
170
159
|
};
|
171
160
|
}
|
172
|
-
|
173
161
|
return state;
|
174
162
|
};
|
175
|
-
|
176
163
|
exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable;
|
177
164
|
//# sourceMappingURL=useProgressBarStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","react_1","useBarStyles","useProgressBarStyles_unstable","state","max","shape","thickness","validationState","value","rootStyles","barStyles","dir","react_shared_contexts_1","className","base","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '0% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressBarClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"]}
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.ProgressField = exports.progressFieldClassNames = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
|
11
|
-
|
12
9
|
const ProgressBar_1 = /*#__PURE__*/require("../../ProgressBar");
|
13
|
-
|
14
10
|
exports.progressFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('ProgressField');
|
15
11
|
exports.ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
16
12
|
const state = react_field_1.useField_unstable(props, ref, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA;AAIaA,+BAAuB,gBAAGC,gCAAkB,CAAC,eAAe,CAAC;AAE7DD,qBAAa,gBAA4CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGL,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEC,yBAAW;IACtBC,UAAU,EAAET,+BAAuB;IACnCU,eAAe,EAAE,iBAAiB;IAClCC,kBAAkB,EAAE;GACrB,CAAC;EACFL,KAAK,CAACM,OAAO,CAACC,eAAe,GAAGP,KAAK,CAACO,eAAe;EACrDZ,qCAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOL,kCAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFN,qBAAa,CAACc,WAAW,GAAG,eAAe","names":["exports","react_field_1","React","forwardRef","props","ref","state","component","ProgressBar_1","classNames","labelConnection","ariaInvalidOnError","control","validationState","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: ProgressBar,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressField/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressField/index.ts"],"sourcesContent":["export * from './ProgressField';\n"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressBarStyles_unstable = exports.useProgressBar_unstable = exports.renderProgressBar_unstable = exports.progressBarClassNames = exports.ProgressBar = void 0;
|
7
|
-
|
8
7
|
var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar");
|
9
|
-
|
10
8
|
Object.defineProperty(exports, "ProgressBar", {
|
11
9
|
enumerable: true,
|
12
10
|
get: function () {
|
@@ -37,9 +35,7 @@ Object.defineProperty(exports, "useProgressBarStyles_unstable", {
|
|
37
35
|
return ProgressBar_1.useProgressBarStyles_unstable;
|
38
36
|
}
|
39
37
|
});
|
40
|
-
|
41
38
|
var ProgressField_1 = /*#__PURE__*/require("./ProgressField");
|
42
|
-
|
43
39
|
Object.defineProperty(exports, "ProgressField_unstable", {
|
44
40
|
enumerable: true,
|
45
41
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAI/B;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAA4BF;EAAAC;EAAAC;IAAA,8CAAuB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-progress",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20221229-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-
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221229-0425.1",
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
32
32
|
},
|
33
33
|
"dependencies": {
|
34
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
35
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
34
|
+
"@fluentui/react-field": "0.0.0-nightly-20221229-0425.1",
|
35
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20221229-0425.1",
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221229-0425.1",
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221229-0425.1",
|
38
38
|
"@griffel/react": "^1.4.2",
|
39
39
|
"tslib": "^2.1.0"
|
40
40
|
},
|