@fluentui/react-progress 0.0.0-nightly-20221216-0421.1 → 0.0.0-nightly-20221219-0421.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/README.md +7 -7
- package/dist/index.d.ts +1 -31
- package/lib/components/ProgressBar/ProgressBar.js +1 -5
- package/lib/components/ProgressBar/ProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -1
- package/lib/components/ProgressBar/renderProgressBar.js +1 -5
- package/lib/components/ProgressBar/renderProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBar.js +1 -5
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBarStyles.js +10 -18
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib/index.js +1 -11
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/ProgressBar.js +2 -6
- package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js +2 -6
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBar.js +2 -6
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +11 -19
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-commonjs/index.js +2 -42
- 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": "Mon, 19 Dec 2022 04:28:16 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v0.0.0-nightly-20221219-0421.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221219-0421.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-20221219-0421.1",
|
|
20
|
+
"commit": "c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e"
|
|
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-20221219-0421.1",
|
|
26
|
+
"commit": "c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e"
|
|
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-20221219-0421.1",
|
|
32
|
+
"commit": "c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e"
|
|
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-20221219-0421.1",
|
|
38
|
+
"commit": "c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e"
|
|
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-20221219-0421.1",
|
|
44
|
+
"commit": "c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e"
|
|
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 Mon, 19 Dec 2022 04:28: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-20221219-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221219-0421.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
|
+
Mon, 19 Dec 2022 04:28: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-20221219-0421.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-20221219-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221219-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221219-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221219-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221219-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c1bf61abfa8720ed9ae7a1c5e0657ccf60e0364e) 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/README.md
CHANGED
|
@@ -8,29 +8,29 @@ These are not production-ready components and **should never be used in product*
|
|
|
8
8
|
|
|
9
9
|
## Usage
|
|
10
10
|
|
|
11
|
-
To import `
|
|
11
|
+
To import `ProgressBar`:
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
|
-
import {
|
|
14
|
+
import { ProgressBar } from '@fluentui/react-progress';
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
Once the Progress component graduates to a production release, the component will be available at:
|
|
18
18
|
|
|
19
19
|
```js
|
|
20
|
-
import {
|
|
20
|
+
import { ProgressBar } from '@fluentui/react-components';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### Examples
|
|
24
24
|
|
|
25
25
|
```jsx
|
|
26
|
-
const
|
|
27
|
-
return <
|
|
26
|
+
const ProgressBarExample = () => {
|
|
27
|
+
return <ProgressBar thickness="large" value={0.5} />;
|
|
28
28
|
};
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
#### Using ProgressField
|
|
32
32
|
|
|
33
|
-
The `ProgressField` component is a wrapper around the `
|
|
33
|
+
The `ProgressField` component is a wrapper around the `ProgressBar` component that allows the user to add a `label`, `hint`, `validationMessage`, and `validationState` to the `ProgressBar` component. You can pass these props, as well as the regular `ProgressBar` props to a `ProgressField` component.
|
|
34
34
|
|
|
35
35
|
To import `ProgressField`:
|
|
36
36
|
|
|
@@ -42,7 +42,7 @@ import { ProgressField } from '@fluentui/react-field';
|
|
|
42
42
|
const ProgressFieldExample = () => {
|
|
43
43
|
return (
|
|
44
44
|
<ProgressField
|
|
45
|
-
label="Determinate
|
|
45
|
+
label="Determinate ProgressBar"
|
|
46
46
|
hint="This is a determinate Progress with description"
|
|
47
47
|
value={0.5}
|
|
48
48
|
validationState="warning"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
|
-
import { ComponentProps } from '@fluentui/react-utilities';
|
|
3
|
+
import type { 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,15 +10,6 @@ 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
|
-
|
|
22
13
|
/**
|
|
23
14
|
* A ProgressBar bar shows the progression of a task.
|
|
24
15
|
*/
|
|
@@ -75,35 +66,17 @@ export declare type ProgressBarSlots = {
|
|
|
75
66
|
*/
|
|
76
67
|
export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'validationState'>;
|
|
77
68
|
|
|
78
|
-
/** @deprecated renamed to progressBarClassNames */
|
|
79
|
-
export declare const progressClassNames: SlotClassNames<ProgressBarSlots>;
|
|
80
|
-
|
|
81
69
|
export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
|
|
82
70
|
|
|
83
71
|
export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
|
|
84
72
|
|
|
85
73
|
export declare type ProgressFieldProps_unstable = FieldProps<typeof ProgressBar>;
|
|
86
74
|
|
|
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;
|
|
98
|
-
|
|
99
75
|
/**
|
|
100
76
|
* Render the final JSX of ProgressBar
|
|
101
77
|
*/
|
|
102
78
|
export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element;
|
|
103
79
|
|
|
104
|
-
/** @deprecated renamed to useProgressBar_unstable */
|
|
105
|
-
export declare const useProgress_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
|
|
106
|
-
|
|
107
80
|
/**
|
|
108
81
|
* Create the state required to render ProgressBar.
|
|
109
82
|
*
|
|
@@ -120,7 +93,4 @@ export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: Rea
|
|
|
120
93
|
*/
|
|
121
94
|
export declare const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState;
|
|
122
95
|
|
|
123
|
-
/** @deprecated renamed to useProgressBarStyles_unstable */
|
|
124
|
-
export declare const useProgressStyles_unstable: (state: ProgressBarState) => ProgressBarState;
|
|
125
|
-
|
|
126
96
|
export { }
|
|
@@ -10,10 +10,6 @@ export const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
10
10
|
const state = useProgressBar_unstable(props, ref);
|
|
11
11
|
useProgressBarStyles_unstable(state);
|
|
12
12
|
return renderProgressBar_unstable(state);
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
/** @deprecated renamed to ProgressBar */
|
|
16
|
-
|
|
17
|
-
export const Progress = ProgressBar;
|
|
13
|
+
});
|
|
18
14
|
ProgressBar.displayName = 'ProgressBar';
|
|
19
15
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +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
|
|
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;AAOP,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\nProgressBar.displayName = 'ProgressBar';\n"],"sourceRoot":""}
|
|
@@ -1 +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
|
|
1
|
+
{"version":3,"file":"ProgressBar.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n /**\n * The track behind the ProgressBar bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n /**\n * The shape of the bar and track.\n * @default 'rounded'\n */\n shape?: 'rounded' | '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/**\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"]}
|
|
@@ -12,9 +12,5 @@ export const renderProgressBar_unstable = state => {
|
|
|
12
12
|
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
13
13
|
}, slots.bar && /*#__PURE__*/React.createElement(slots.bar, { ...slotProps.bar
|
|
14
14
|
}));
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
/** @deprecated renamed to renderProgressBar_unstable */
|
|
18
|
-
|
|
19
|
-
export const renderProgress_unstable = renderProgressBar_unstable;
|
|
15
|
+
};
|
|
20
16
|
//# sourceMappingURL=renderProgressBar.js.map
|
|
@@ -1 +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
|
|
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","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"],"sourceRoot":""}
|
|
@@ -43,9 +43,5 @@ export const useProgressBar_unstable = (props, ref) => {
|
|
|
43
43
|
bar
|
|
44
44
|
};
|
|
45
45
|
return state;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/** @deprecated renamed to useProgressBar_unstable */
|
|
49
|
-
|
|
50
|
-
export const useProgress_unstable = useProgressBar_unstable;
|
|
46
|
+
};
|
|
51
47
|
//# sourceMappingURL=useProgressBar.js.map
|
|
@@ -1 +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
|
|
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","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"],"sourceRoot":""}
|
|
@@ -4,11 +4,7 @@ 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
|
-
}; //
|
|
8
|
-
|
|
9
|
-
/** @deprecated renamed to progressBarClassNames */
|
|
10
|
-
|
|
11
|
-
export const progressClassNames = progressBarClassNames; // If the percentComplete is near 0, don't animate it.
|
|
7
|
+
}; // If the percentComplete is near 0, don't animate it.
|
|
12
8
|
// This prevents animations on reset to 0 scenarios.
|
|
13
9
|
|
|
14
10
|
const ZERO_THRESHOLD = 0.01;
|
|
@@ -18,18 +14,18 @@ const barThicknessValues = {
|
|
|
18
14
|
};
|
|
19
15
|
const indeterminateProgressBar = {
|
|
20
16
|
'0%': {
|
|
21
|
-
left: '0%'
|
|
17
|
+
left: '0% /* @noflip */'
|
|
22
18
|
},
|
|
23
19
|
'100%': {
|
|
24
|
-
left: '100%'
|
|
20
|
+
left: '100% /* @noflip */'
|
|
25
21
|
}
|
|
26
22
|
};
|
|
27
23
|
const indeterminateProgressBarRTL = {
|
|
28
24
|
'100%': {
|
|
29
|
-
right: '-100%'
|
|
25
|
+
right: '-100% /* @noflip */'
|
|
30
26
|
},
|
|
31
27
|
'0%': {
|
|
32
|
-
right: '100%'
|
|
28
|
+
right: '100% /* @noflip */'
|
|
33
29
|
}
|
|
34
30
|
};
|
|
35
31
|
/**
|
|
@@ -104,14 +100,14 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
104
100
|
"B2u0y6b": "fa0wk36",
|
|
105
101
|
"qhf8xq": "f10pi13n",
|
|
106
102
|
"Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
|
|
107
|
-
"Bv12yb3":
|
|
103
|
+
"Bv12yb3": "f1h4fm7e",
|
|
108
104
|
"vin17d": "f1a27w2r",
|
|
109
105
|
"w3vfg9": "f1cpbl36",
|
|
110
106
|
"Gqtpxc": "f4akx1t",
|
|
111
107
|
"B3vm3ge": "f18p5put"
|
|
112
108
|
},
|
|
113
109
|
"rtl": {
|
|
114
|
-
"Bv12yb3":
|
|
110
|
+
"Bv12yb3": "fjhwsai"
|
|
115
111
|
},
|
|
116
112
|
"error": {
|
|
117
113
|
"De3pzq": "fdl5y0r"
|
|
@@ -123,7 +119,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
123
119
|
"De3pzq": "flxk52p"
|
|
124
120
|
}
|
|
125
121
|
}, {
|
|
126
|
-
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".
|
|
122
|
+
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1h4fm7e{-webkit-animation-name:fd3k50f;animation-name:fd3k50f;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
127
123
|
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
128
124
|
"m": "screen and (forced-colors: active)"
|
|
129
125
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
@@ -131,7 +127,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
131
127
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
132
128
|
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
133
129
|
}]],
|
|
134
|
-
"k": ["@-webkit-keyframes
|
|
130
|
+
"k": ["@-webkit-keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
|
135
131
|
});
|
|
136
132
|
/**
|
|
137
133
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -165,9 +161,5 @@ export const useProgressBarStyles_unstable = state => {
|
|
|
165
161
|
}
|
|
166
162
|
|
|
167
163
|
return state;
|
|
168
|
-
};
|
|
169
|
-
|
|
170
|
-
/** @deprecated renamed to useProgressBarStyles_unstable */
|
|
171
|
-
|
|
172
|
-
export const useProgressStyles_unstable = useProgressBarStyles_unstable;
|
|
164
|
+
};
|
|
173
165
|
//# sourceMappingURL=useProgressBarStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,GAAG,EAAE;AAFgE,CAAhE,C,CAKP
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '0% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressBarClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
package/lib/index.js
CHANGED
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
export {
|
|
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';
|
|
1
|
+
export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
|
|
12
2
|
export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';
|
|
13
3
|
//# 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,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,uBAJF,EAKE,6BALF,QAMO,eANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":""}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.ProgressBar = void 0;
|
|
7
7
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
@@ -21,10 +21,6 @@ exports.ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
21
21
|
const state = useProgressBar_1.useProgressBar_unstable(props, ref);
|
|
22
22
|
useProgressBarStyles_1.useProgressBarStyles_unstable(state);
|
|
23
23
|
return renderProgressBar_1.renderProgressBar_unstable(state);
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
/** @deprecated renamed to ProgressBar */
|
|
27
|
-
|
|
28
|
-
exports.Progress = exports.ProgressBar;
|
|
24
|
+
});
|
|
29
25
|
exports.ProgressBar.displayName = 'ProgressBar';
|
|
30
26
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +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
|
|
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;AAOb,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\nProgressBar.displayName = 'ProgressBar';\n"],"sourceRoot":""}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.renderProgressBar_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
@@ -23,9 +23,5 @@ const renderProgressBar_unstable = state => {
|
|
|
23
23
|
}));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
exports.renderProgressBar_unstable = renderProgressBar_unstable;
|
|
27
|
-
|
|
28
|
-
/** @deprecated renamed to renderProgressBar_unstable */
|
|
29
|
-
|
|
30
|
-
exports.renderProgress_unstable = exports.renderProgressBar_unstable;
|
|
26
|
+
exports.renderProgressBar_unstable = renderProgressBar_unstable;
|
|
31
27
|
//# sourceMappingURL=renderProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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"],"sourceRoot":""}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useProgressBar_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
/**
|
|
@@ -53,9 +53,5 @@ const useProgressBar_unstable = (props, ref) => {
|
|
|
53
53
|
return state;
|
|
54
54
|
};
|
|
55
55
|
|
|
56
|
-
exports.useProgressBar_unstable = useProgressBar_unstable;
|
|
57
|
-
|
|
58
|
-
/** @deprecated renamed to useProgressBar_unstable */
|
|
59
|
-
|
|
60
|
-
exports.useProgress_unstable = exports.useProgressBar_unstable;
|
|
56
|
+
exports.useProgressBar_unstable = useProgressBar_unstable;
|
|
61
57
|
//# sourceMappingURL=useProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAA7B,CAAb;EASA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE;EAD4B,CAA5B,CAAZ;EAIA,MAAM,KAAK,GAAqB;IAC9B,GAD8B;IAE9B,KAF8B;IAG9B,SAH8B;IAI9B,KAJ8B;IAK9B,eAL8B;IAM9B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANkB;IAU9B,IAV8B;IAW9B;EAX8B,CAAhC;EAcA,OAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAA7B,CAAb;EASA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE;EAD4B,CAA5B,CAAZ;EAIA,MAAM,KAAK,GAAqB;IAC9B,GAD8B;IAE9B,KAF8B;IAG9B,SAH8B;IAI9B,KAJ8B;IAK9B,eAL8B;IAM9B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANkB;IAU9B,IAV8B;IAW9B;EAX8B,CAAhC;EAcA,OAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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"],"sourceRoot":""}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
@@ -14,11 +14,7 @@ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-con
|
|
|
14
14
|
exports.progressBarClassNames = {
|
|
15
15
|
root: 'fui-ProgressBar',
|
|
16
16
|
bar: 'fui-ProgressBar__bar'
|
|
17
|
-
}; //
|
|
18
|
-
|
|
19
|
-
/** @deprecated renamed to progressBarClassNames */
|
|
20
|
-
|
|
21
|
-
exports.progressClassNames = exports.progressBarClassNames; // If the percentComplete is near 0, don't animate it.
|
|
17
|
+
}; // If the percentComplete is near 0, don't animate it.
|
|
22
18
|
// This prevents animations on reset to 0 scenarios.
|
|
23
19
|
|
|
24
20
|
const ZERO_THRESHOLD = 0.01;
|
|
@@ -28,18 +24,18 @@ const barThicknessValues = {
|
|
|
28
24
|
};
|
|
29
25
|
const indeterminateProgressBar = {
|
|
30
26
|
'0%': {
|
|
31
|
-
left: '0%'
|
|
27
|
+
left: '0% /* @noflip */'
|
|
32
28
|
},
|
|
33
29
|
'100%': {
|
|
34
|
-
left: '100%'
|
|
30
|
+
left: '100% /* @noflip */'
|
|
35
31
|
}
|
|
36
32
|
};
|
|
37
33
|
const indeterminateProgressBarRTL = {
|
|
38
34
|
'100%': {
|
|
39
|
-
right: '-100%'
|
|
35
|
+
right: '-100% /* @noflip */'
|
|
40
36
|
},
|
|
41
37
|
'0%': {
|
|
42
|
-
right: '100%'
|
|
38
|
+
right: '100% /* @noflip */'
|
|
43
39
|
}
|
|
44
40
|
};
|
|
45
41
|
/**
|
|
@@ -114,14 +110,14 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
114
110
|
"B2u0y6b": "fa0wk36",
|
|
115
111
|
"qhf8xq": "f10pi13n",
|
|
116
112
|
"Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
|
|
117
|
-
"Bv12yb3":
|
|
113
|
+
"Bv12yb3": "f1h4fm7e",
|
|
118
114
|
"vin17d": "f1a27w2r",
|
|
119
115
|
"w3vfg9": "f1cpbl36",
|
|
120
116
|
"Gqtpxc": "f4akx1t",
|
|
121
117
|
"B3vm3ge": "f18p5put"
|
|
122
118
|
},
|
|
123
119
|
"rtl": {
|
|
124
|
-
"Bv12yb3":
|
|
120
|
+
"Bv12yb3": "fjhwsai"
|
|
125
121
|
},
|
|
126
122
|
"error": {
|
|
127
123
|
"De3pzq": "fdl5y0r"
|
|
@@ -133,7 +129,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
133
129
|
"De3pzq": "flxk52p"
|
|
134
130
|
}
|
|
135
131
|
}, {
|
|
136
|
-
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".
|
|
132
|
+
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1h4fm7e{-webkit-animation-name:fd3k50f;animation-name:fd3k50f;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
137
133
|
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
138
134
|
"m": "screen and (forced-colors: active)"
|
|
139
135
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
@@ -141,7 +137,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
141
137
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
142
138
|
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
143
139
|
}]],
|
|
144
|
-
"k": ["@-webkit-keyframes
|
|
140
|
+
"k": ["@-webkit-keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
|
145
141
|
});
|
|
146
142
|
/**
|
|
147
143
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -177,9 +173,5 @@ const useProgressBarStyles_unstable = state => {
|
|
|
177
173
|
return state;
|
|
178
174
|
};
|
|
179
175
|
|
|
180
|
-
exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable;
|
|
181
|
-
|
|
182
|
-
/** @deprecated renamed to useProgressBarStyles_unstable */
|
|
183
|
-
|
|
184
|
-
exports.useProgressStyles_unstable = exports.useProgressBarStyles_unstable;
|
|
176
|
+
exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable;
|
|
185
177
|
//# sourceMappingURL=useProgressBarStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,GAAG,EAAE;AAFgE,CAA1D,C,CAKb
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '0% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressBarClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,50 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressBarStyles_unstable = exports.useProgressBar_unstable = exports.renderProgressBar_unstable = exports.progressBarClassNames = exports.ProgressBar =
|
|
6
|
+
exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressBarStyles_unstable = exports.useProgressBar_unstable = exports.renderProgressBar_unstable = exports.progressBarClassNames = exports.ProgressBar = void 0;
|
|
7
7
|
|
|
8
|
-
var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar");
|
|
9
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
8
|
+
var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar");
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
Object.defineProperty(exports, "Progress", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return ProgressBar_1.Progress;
|
|
16
|
-
}
|
|
17
|
-
}); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
|
18
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
19
|
-
|
|
20
|
-
Object.defineProperty(exports, "progressClassNames", {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function () {
|
|
23
|
-
return ProgressBar_1.progressClassNames;
|
|
24
|
-
}
|
|
25
|
-
}); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
|
26
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
27
|
-
|
|
28
|
-
Object.defineProperty(exports, "renderProgress_unstable", {
|
|
29
|
-
enumerable: true,
|
|
30
|
-
get: function () {
|
|
31
|
-
return ProgressBar_1.renderProgress_unstable;
|
|
32
|
-
}
|
|
33
|
-
}); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
|
34
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
35
|
-
|
|
36
|
-
Object.defineProperty(exports, "useProgress_unstable", {
|
|
37
|
-
enumerable: true,
|
|
38
|
-
get: function () {
|
|
39
|
-
return ProgressBar_1.useProgress_unstable;
|
|
40
|
-
}
|
|
41
|
-
}); // TODO #25997: Remove deprecated export before ProgressBar is released as stable
|
|
42
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
43
|
-
|
|
44
|
-
Object.defineProperty(exports, "useProgressStyles_unstable", {
|
|
45
|
-
enumerable: true,
|
|
46
|
-
get: function () {
|
|
47
|
-
return ProgressBar_1.useProgressStyles_unstable;
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
10
|
Object.defineProperty(exports, "ProgressBar", {
|
|
51
11
|
enumerable: true,
|
|
52
12
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":""}
|
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-20221219-0421.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-20221219-0421.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-20221219-0421.1",
|
|
35
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20221219-0421.1",
|
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221219-0421.1",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221219-0421.1",
|
|
38
38
|
"@griffel/react": "^1.4.2",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|