@fluentui/react-progress 0.0.0-nightly-20221213-0427.1 → 0.0.0-nightly-20221215-0425.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/dist/index.d.ts +61 -31
- package/lib/ProgressBar.js +2 -0
- package/lib/ProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.js +19 -0
- package/lib/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.types.js +2 -0
- package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -0
- package/lib/components/ProgressBar/index.js +6 -0
- package/lib/components/ProgressBar/index.js.map +1 -0
- package/lib/components/ProgressBar/renderProgressBar.js +20 -0
- package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +12 -8
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +21 -13
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib/components/ProgressField/ProgressField.js +2 -2
- package/lib/components/ProgressField/ProgressField.js.map +1 -1
- package/lib/index.js +11 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Progress.js → ProgressBar.js} +2 -2
- package/lib-commonjs/ProgressBar.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js +30 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js} +1 -1
- package/lib-commonjs/components/{Progress/Progress.types.js.map → ProgressBar/ProgressBar.types.js.map} +0 -0
- package/lib-commonjs/components/ProgressBar/index.js +18 -0
- package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js +31 -0
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +13 -9
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +22 -14
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib-commonjs/components/ProgressField/ProgressField.js +2 -2
- package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -1
- package/lib-commonjs/index.js +51 -11
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
- package/lib/Progress.js +0 -2
- package/lib/Progress.js.map +0 -1
- package/lib/components/Progress/Progress.js +0 -15
- package/lib/components/Progress/Progress.js.map +0 -1
- package/lib/components/Progress/Progress.types.js +0 -2
- package/lib/components/Progress/Progress.types.js.map +0 -1
- package/lib/components/Progress/index.js +0 -6
- package/lib/components/Progress/index.js.map +0 -1
- package/lib/components/Progress/renderProgress.js +0 -16
- package/lib/components/Progress/renderProgress.js.map +0 -1
- package/lib/components/Progress/useProgress.js.map +0 -1
- package/lib/components/Progress/useProgressStyles.js.map +0 -1
- package/lib-commonjs/Progress.js.map +0 -1
- package/lib-commonjs/components/Progress/Progress.js +0 -26
- package/lib-commonjs/components/Progress/Progress.js.map +0 -1
- package/lib-commonjs/components/Progress/index.js +0 -18
- package/lib-commonjs/components/Progress/index.js.map +0 -1
- package/lib-commonjs/components/Progress/renderProgress.js +0 -27
- package/lib-commonjs/components/Progress/renderProgress.js.map +0 -1
- package/lib-commonjs/components/Progress/useProgress.js.map +0 -1
- package/lib-commonjs/components/Progress/useProgressStyles.js.map +0 -1
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, 15 Dec 2022 04:33:16 GMT",
|
6
|
+
"tag": "@fluentui/react-progress_v0.0.0-nightly-20221215-0425.1",
|
7
|
+
"version": "0.0.0-nightly-20221215-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-20221215-0425.1",
|
20
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
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-20221215-0425.1",
|
26
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
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-20221215-0425.1",
|
32
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
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-20221215-0425.1",
|
38
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
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-20221215-0425.1",
|
44
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
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, 15 Dec 2022 04:33:16 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-20221215-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221215-0425.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.7..@fluentui/react-progress_v0.0.0-nightly-
|
9
|
+
Thu, 15 Dec 2022 04:33:16 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.7..@fluentui/react-progress_v0.0.0-nightly-20221215-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-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
20
20
|
|
21
21
|
## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.7)
|
22
22
|
|
package/dist/index.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
|
3
|
-
import
|
3
|
+
import { ComponentProps } from '@fluentui/react-utilities';
|
4
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
5
5
|
import { FieldControl } from '@fluentui/react-field';
|
6
6
|
import type { FieldProps } from '@fluentui/react-field';
|
@@ -10,23 +10,26 @@ import * as React_2 from 'react';
|
|
10
10
|
import type { Slot } from '@fluentui/react-utilities';
|
11
11
|
import { SlotClassNames } from '@fluentui/react-utilities';
|
12
12
|
|
13
|
+
/** @deprecated renamed to ProgressBar */
|
14
|
+
export declare const Progress: React_2.ForwardRefExoticComponent<Omit<ComponentProps<ProgressBarSlots, "root">, "size"> & {
|
15
|
+
shape?: "rounded" | "rectangular" | undefined;
|
16
|
+
value?: number | undefined;
|
17
|
+
max?: number | undefined;
|
18
|
+
thickness?: "medium" | "large" | undefined;
|
19
|
+
validationState?: "error" | "success" | "warning" | undefined;
|
20
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
21
|
+
|
13
22
|
/**
|
14
|
-
* A
|
23
|
+
* A ProgressBar bar shows the progression of a task.
|
15
24
|
*/
|
16
|
-
export declare const
|
17
|
-
|
18
|
-
export declare const progressClassNames: SlotClassNames<ProgressSlots>;
|
25
|
+
export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
|
19
26
|
|
20
|
-
export declare const
|
21
|
-
|
22
|
-
export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
|
23
|
-
|
24
|
-
export declare type ProgressFieldProps_unstable = FieldProps<typeof Progress>;
|
27
|
+
export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
|
25
28
|
|
26
29
|
/**
|
27
|
-
*
|
30
|
+
* ProgressBar Props
|
28
31
|
*/
|
29
|
-
export declare type
|
32
|
+
export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {
|
30
33
|
/**
|
31
34
|
* The shape of the bar and track.
|
32
35
|
* @default 'rounded'
|
@@ -36,61 +39,88 @@ export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'>
|
|
36
39
|
* A decimal number between `0` and `1` (or between `0` and `max` if given),
|
37
40
|
* which specifies how much of the task has been completed.
|
38
41
|
*
|
39
|
-
* If `undefined` (default), the
|
42
|
+
* If `undefined` (default), the ProgressBar will display an **indeterminate** state.
|
40
43
|
*/
|
41
44
|
value?: number;
|
42
45
|
/**
|
43
46
|
* The maximum value, which indicates the task is complete.
|
44
|
-
* The
|
47
|
+
* The ProgressBar bar will be full when `value` equals `max`.
|
45
48
|
* @default 1
|
46
49
|
*/
|
47
50
|
max?: number;
|
48
51
|
/**
|
49
|
-
* The thickness of the
|
52
|
+
* The thickness of the ProgressBar bar
|
50
53
|
* @default 'medium'
|
51
54
|
*/
|
52
55
|
thickness?: 'medium' | 'large';
|
53
56
|
/**
|
54
|
-
* The status of the
|
57
|
+
* The status of the ProgressBar bar. Changes the color of the bar.
|
55
58
|
*/
|
56
59
|
validationState?: 'success' | 'warning' | 'error';
|
57
60
|
};
|
58
61
|
|
59
|
-
export declare type
|
62
|
+
export declare type ProgressBarSlots = {
|
60
63
|
/**
|
61
|
-
* The track behind the
|
64
|
+
* The track behind the ProgressBar bar
|
62
65
|
*/
|
63
66
|
root: NonNullable<Slot<'div'>>;
|
64
67
|
/**
|
65
|
-
* The filled portion of the
|
68
|
+
* The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.
|
66
69
|
*/
|
67
70
|
bar?: NonNullable<Slot<'div'>>;
|
68
71
|
};
|
69
72
|
|
70
73
|
/**
|
71
|
-
* State used in rendering
|
74
|
+
* State used in rendering ProgressBar
|
72
75
|
*/
|
73
|
-
export declare type
|
76
|
+
export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'validationState'>;
|
77
|
+
|
78
|
+
/** @deprecated renamed to progressBarClassNames */
|
79
|
+
export declare const progressClassNames: SlotClassNames<ProgressBarSlots>;
|
80
|
+
|
81
|
+
export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
|
82
|
+
|
83
|
+
export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
|
84
|
+
|
85
|
+
export declare type ProgressFieldProps_unstable = FieldProps<typeof ProgressBar>;
|
86
|
+
|
87
|
+
/** @deprecated renamed to ProgressBarProps */
|
88
|
+
export declare type ProgressProps = ProgressBarProps;
|
89
|
+
|
90
|
+
/** @deprecated renamed to ProgressBarSlots */
|
91
|
+
export declare type ProgressSlots = ProgressBarSlots;
|
92
|
+
|
93
|
+
/** @deprecated renamed to ProgressBarState */
|
94
|
+
export declare type ProgressState = ProgressBarState;
|
95
|
+
|
96
|
+
/** @deprecated renamed to renderProgressBar_unstable */
|
97
|
+
export declare const renderProgress_unstable: (state: ProgressBarState) => JSX.Element;
|
74
98
|
|
75
99
|
/**
|
76
|
-
* Render the final JSX of
|
100
|
+
* Render the final JSX of ProgressBar
|
77
101
|
*/
|
78
|
-
export declare const
|
102
|
+
export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element;
|
103
|
+
|
104
|
+
/** @deprecated renamed to useProgressBar_unstable */
|
105
|
+
export declare const useProgress_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
|
79
106
|
|
80
107
|
/**
|
81
|
-
* Create the state required to render
|
108
|
+
* Create the state required to render ProgressBar.
|
82
109
|
*
|
83
|
-
* The returned state can be modified with hooks such as
|
84
|
-
* before being passed to
|
110
|
+
* The returned state can be modified with hooks such as useProgressBarStyles_unstable,
|
111
|
+
* before being passed to renderProgressBar_unstable.
|
85
112
|
*
|
86
|
-
* @param props - props from this instance of
|
87
|
-
* @param ref - reference to root HTMLElement of
|
113
|
+
* @param props - props from this instance of ProgressBar
|
114
|
+
* @param ref - reference to root HTMLElement of ProgressBar
|
88
115
|
*/
|
89
|
-
export declare const
|
116
|
+
export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
|
90
117
|
|
91
118
|
/**
|
92
|
-
* Apply styling to the
|
119
|
+
* Apply styling to the ProgressBar slots based on the state
|
93
120
|
*/
|
94
|
-
export declare const
|
121
|
+
export declare const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState;
|
122
|
+
|
123
|
+
/** @deprecated renamed to useProgressBarStyles_unstable */
|
124
|
+
export declare const useProgressStyles_unstable: (state: ProgressBarState) => ProgressBarState;
|
95
125
|
|
96
126
|
export { }
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-progress/src/ProgressBar.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/ProgressBar/index';\n"]}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useProgressBar_unstable } from './useProgressBar';
|
3
|
+
import { renderProgressBar_unstable } from './renderProgressBar';
|
4
|
+
import { useProgressBarStyles_unstable } from './useProgressBarStyles';
|
5
|
+
/**
|
6
|
+
* A ProgressBar bar shows the progression of a task.
|
7
|
+
*/
|
8
|
+
|
9
|
+
export const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
+
const state = useProgressBar_unstable(props, ref);
|
11
|
+
useProgressBarStyles_unstable(state);
|
12
|
+
return renderProgressBar_unstable(state);
|
13
|
+
}); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
14
|
+
|
15
|
+
/** @deprecated renamed to ProgressBar */
|
16
|
+
|
17
|
+
export const Progress = ProgressBar;
|
18
|
+
ProgressBar.displayName = 'ProgressBar';
|
19
|
+
//# sourceMappingURL=ProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D,C,CAOP;;AACA;;AACA,OAAO,MAAM,QAAQ,GAAG,WAAjB;AAEP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","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\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to ProgressBar */\nexport const Progress = ProgressBar;\n\nProgressBar.displayName = 'ProgressBar';\n"],"sourceRoot":""}
|
@@ -0,0 +1 @@
|
|
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// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to ProgressBarSlots */\nexport type ProgressSlots = ProgressBarSlots;\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' | 'rectangular';\n /**\n * A decimal number between `0` and `1` (or between `0` and `max` if given),\n * which specifies how much of the task has been completed.\n *\n * If `undefined` (default), the 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 */\n validationState?: 'success' | 'warning' | 'error';\n};\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to ProgressBarProps */\nexport type ProgressProps = ProgressBarProps;\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' | 'validationState'>;\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to ProgressBarState */\nexport type ProgressState = ProgressBarState;\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* Render the final JSX of ProgressBar
|
5
|
+
*/
|
6
|
+
|
7
|
+
export const renderProgressBar_unstable = state => {
|
8
|
+
const {
|
9
|
+
slots,
|
10
|
+
slotProps
|
11
|
+
} = getSlots(state);
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
+
}, slots.bar && /*#__PURE__*/React.createElement(slots.bar, { ...slotProps.bar
|
14
|
+
}));
|
15
|
+
}; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
16
|
+
|
17
|
+
/** @deprecated renamed to renderProgressBar_unstable */
|
18
|
+
|
19
|
+
export const renderProgress_unstable = renderProgressBar_unstable;
|
20
|
+
//# sourceMappingURL=renderProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,iBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM,C,CAKP;;AACA;;AACA,OAAO,MAAM,uBAAuB,GAAG,0BAAhC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to renderProgressBar_unstable */\nexport const renderProgress_unstable = renderProgressBar_unstable;\n"],"sourceRoot":""}
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
2
2
|
/**
|
3
|
-
* Create the state required to render
|
3
|
+
* Create the state required to render ProgressBar.
|
4
4
|
*
|
5
|
-
* The returned state can be modified with hooks such as
|
6
|
-
* before being passed to
|
5
|
+
* The returned state can be modified with hooks such as useProgressBarStyles_unstable,
|
6
|
+
* before being passed to renderProgressBar_unstable.
|
7
7
|
*
|
8
|
-
* @param props - props from this instance of
|
9
|
-
* @param ref - reference to root HTMLElement of
|
8
|
+
* @param props - props from this instance of ProgressBar
|
9
|
+
* @param ref - reference to root HTMLElement of ProgressBar
|
10
10
|
*/
|
11
11
|
|
12
|
-
export const
|
12
|
+
export const useProgressBar_unstable = (props, ref) => {
|
13
13
|
// Props
|
14
14
|
const {
|
15
15
|
max = 1.0,
|
@@ -43,5 +43,9 @@ export const useProgress_unstable = (props, ref) => {
|
|
43
43
|
bar
|
44
44
|
};
|
45
45
|
return state;
|
46
|
-
};
|
47
|
-
|
46
|
+
}; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
47
|
+
|
48
|
+
/** @deprecated renamed to useProgressBar_unstable */
|
49
|
+
|
50
|
+
export const useProgress_unstable = useProgressBar_unstable;
|
51
|
+
//# sourceMappingURL=useProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAAR,CAAlC;EASA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE;EAD4B,CAAZ,CAA5B;EAIA,MAAM,KAAK,GAAqB;IAC9B,GAD8B;IAE9B,KAF8B;IAG9B,SAH8B;IAI9B,KAJ8B;IAK9B,eAL8B;IAM9B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANkB;IAU9B,IAV8B;IAW9B;EAX8B,CAAhC;EAcA,OAAO,KAAP;AACD,CAhCM,C,CAkCP;;AACA;;AACA,OAAO,MAAM,oBAAoB,GAAG,uBAA7B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to useProgressBar_unstable */\nexport const useProgress_unstable = useProgressBar_unstable;\n"],"sourceRoot":""}
|
package/lib/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js}
RENAMED
@@ -1,10 +1,14 @@
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
3
3
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
4
|
-
export const
|
5
|
-
root: 'fui-
|
6
|
-
bar: 'fui-
|
7
|
-
}; //
|
4
|
+
export const progressBarClassNames = {
|
5
|
+
root: 'fui-ProgressBar',
|
6
|
+
bar: 'fui-ProgressBar__bar'
|
7
|
+
}; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
8
|
+
|
9
|
+
/** @deprecated renamed to progressBarClassNames */
|
10
|
+
|
11
|
+
export const progressClassNames = progressBarClassNames; // If the percentComplete is near 0, don't animate it.
|
8
12
|
// This prevents animations on reset to 0 scenarios.
|
9
13
|
|
10
14
|
const ZERO_THRESHOLD = 0.01;
|
@@ -12,7 +16,7 @@ const barThicknessValues = {
|
|
12
16
|
medium: '2px',
|
13
17
|
large: '4px'
|
14
18
|
};
|
15
|
-
const
|
19
|
+
const indeterminateProgressBar = {
|
16
20
|
'0%': {
|
17
21
|
left: '0%'
|
18
22
|
},
|
@@ -20,7 +24,7 @@ const indeterminateProgress = {
|
|
20
24
|
left: '100%'
|
21
25
|
}
|
22
26
|
};
|
23
|
-
const
|
27
|
+
const indeterminateProgressBarRTL = {
|
24
28
|
'100%': {
|
25
29
|
right: '-100%'
|
26
30
|
},
|
@@ -72,7 +76,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
72
76
|
}]]
|
73
77
|
});
|
74
78
|
/**
|
75
|
-
* Styles for the
|
79
|
+
* Styles for the ProgressBar bar
|
76
80
|
*/
|
77
81
|
|
78
82
|
|
@@ -130,11 +134,11 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
130
134
|
"k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
|
131
135
|
});
|
132
136
|
/**
|
133
|
-
* Apply styling to the
|
137
|
+
* Apply styling to the ProgressBar slots based on the state
|
134
138
|
*/
|
135
139
|
|
136
140
|
|
137
|
-
export const
|
141
|
+
export const useProgressBarStyles_unstable = state => {
|
138
142
|
const {
|
139
143
|
max,
|
140
144
|
shape,
|
@@ -147,10 +151,10 @@ export const useProgressStyles_unstable = state => {
|
|
147
151
|
const {
|
148
152
|
dir
|
149
153
|
} = useFluent();
|
150
|
-
state.root.className = mergeClasses(
|
154
|
+
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
151
155
|
|
152
156
|
if (state.bar) {
|
153
|
-
state.bar.className = mergeClasses(
|
157
|
+
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
158
|
}
|
155
159
|
|
156
160
|
if (state.bar && value !== undefined) {
|
@@ -161,5 +165,9 @@ export const useProgressStyles_unstable = state => {
|
|
161
165
|
}
|
162
166
|
|
163
167
|
return state;
|
164
|
-
};
|
165
|
-
|
168
|
+
}; // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
169
|
+
|
170
|
+
/** @deprecated renamed to useProgressBarStyles_unstable */
|
171
|
+
|
172
|
+
export const useProgressStyles_unstable = useProgressBarStyles_unstable;
|
173
|
+
//# sourceMappingURL=useProgressBarStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to progressBarClassNames */\nexport const progressClassNames = progressBarClassNames;\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100%',\n },\n '0%': {\n right: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressBarClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to useProgressBarStyles_unstable */\nexport const useProgressStyles_unstable = useProgressBarStyles_unstable;\n"],"sourceRoot":""}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
|
3
|
-
import {
|
3
|
+
import { ProgressBar } from '../../ProgressBar';
|
4
4
|
export const progressFieldClassNames = /*#__PURE__*/getFieldClassNames('ProgressField');
|
5
5
|
export const ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
6
|
const state = useField_unstable(props, ref, {
|
7
|
-
component:
|
7
|
+
component: ProgressBar,
|
8
8
|
classNames: progressFieldClassNames,
|
9
9
|
labelConnection: 'aria-labelledby',
|
10
10
|
ariaInvalidOnError: false
|
@@ -1 +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,
|
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":""}
|
package/lib/index.js
CHANGED
@@ -1,3 +1,13 @@
|
|
1
|
-
export {
|
1
|
+
export { // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
2
|
+
// eslint-disable-next-line deprecation/deprecation
|
3
|
+
Progress, // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
4
|
+
// eslint-disable-next-line deprecation/deprecation
|
5
|
+
progressClassNames, // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
6
|
+
// eslint-disable-next-line deprecation/deprecation
|
7
|
+
renderProgress_unstable, // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
8
|
+
// eslint-disable-next-line deprecation/deprecation
|
9
|
+
useProgress_unstable, // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
10
|
+
// eslint-disable-next-line deprecation/deprecation
|
11
|
+
useProgressStyles_unstable, ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
|
2
12
|
export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';
|
3
13
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":"AAAA,SACE,
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":"AAAA,SACE;AACA;AACA,QAHF,EAIE;AACA;AACA,kBANF,EAOE;AACA;AACA,uBATF,EAUE;AACA;AACA,oBAZF,EAaE;AACA;AACA,0BAfF,EAgBE,WAhBF,EAiBE,qBAjBF,EAkBE,0BAlBF,EAmBE,uBAnBF,EAoBE,6BApBF,QAqBO,eArBP;AAqCA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","sourcesContent":["export {\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n Progress,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n progressClassNames,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n renderProgress_unstable,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n useProgress_unstable,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n useProgressStyles_unstable,\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type {\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n ProgressProps,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n ProgressSlots,\n // TODO #25997: Remove deprecated export before ProgressBar is released as stable\n // eslint-disable-next-line deprecation/deprecation\n ProgressState,\n ProgressBarProps,\n ProgressBarSlots,\n ProgressBarState,\n} from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":""}
|
@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
|
7
7
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
|
-
tslib_1.__exportStar(require("./components/
|
10
|
-
//# sourceMappingURL=
|
9
|
+
tslib_1.__exportStar(require("./components/ProgressBar/index"), exports);
|
10
|
+
//# sourceMappingURL=ProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/ProgressBar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ProgressBar/index';\n"],"sourceRoot":""}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Progress = exports.ProgressBar = void 0;
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const useProgressBar_1 = /*#__PURE__*/require("./useProgressBar");
|
11
|
+
|
12
|
+
const renderProgressBar_1 = /*#__PURE__*/require("./renderProgressBar");
|
13
|
+
|
14
|
+
const useProgressBarStyles_1 = /*#__PURE__*/require("./useProgressBarStyles");
|
15
|
+
/**
|
16
|
+
* A ProgressBar bar shows the progression of a task.
|
17
|
+
*/
|
18
|
+
|
19
|
+
|
20
|
+
exports.ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
+
const state = useProgressBar_1.useProgressBar_unstable(props, ref);
|
22
|
+
useProgressBarStyles_1.useProgressBarStyles_unstable(state);
|
23
|
+
return renderProgressBar_1.renderProgressBar_unstable(state);
|
24
|
+
}); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
25
|
+
|
26
|
+
/** @deprecated renamed to ProgressBar */
|
27
|
+
|
28
|
+
exports.Progress = exports.ProgressBar;
|
29
|
+
exports.ProgressBar.displayName = 'ProgressBar';
|
30
|
+
//# sourceMappingURL=ProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD,C,CAOb;;AACA;;AACa,OAAA,CAAA,QAAA,GAAW,OAAA,CAAA,WAAX;AAEb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","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\n// TODO #25997: Remove deprecated export before ProgressBar is released as stable\n/** @deprecated renamed to ProgressBar */\nexport const Progress = ProgressBar;\n\nProgressBar.displayName = 'ProgressBar';\n"],"sourceRoot":""}
|
File without changes
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
+
|
9
|
+
tslib_1.__exportStar(require("./ProgressBar"), exports);
|
10
|
+
|
11
|
+
tslib_1.__exportStar(require("./ProgressBar.types"), exports);
|
12
|
+
|
13
|
+
tslib_1.__exportStar(require("./renderProgressBar"), exports);
|
14
|
+
|
15
|
+
tslib_1.__exportStar(require("./useProgressBar"), exports);
|
16
|
+
|
17
|
+
tslib_1.__exportStar(require("./useProgressBarStyles"), exports);
|
18
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"],"sourceRoot":""}
|