@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.11
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 +393 -1
- package/CHANGELOG.md +126 -2
- package/README.md +9 -7
- package/dist/index.d.ts +44 -24
- package/lib/ProgressBar.js +2 -0
- package/lib/ProgressBar.js.map +1 -0
- package/lib/ProgressField.js +2 -0
- package/lib/ProgressField.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.js +14 -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 +17 -0
- package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +13 -10
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/useProgressBarStyles.js +157 -0
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib/components/ProgressField/ProgressField.js +17 -0
- package/lib/components/ProgressField/ProgressField.js.map +1 -0
- package/lib/components/ProgressField/index.js +2 -0
- package/lib/components/ProgressField/index.js.map +1 -0
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/ProgressBar.js +8 -0
- package/lib-commonjs/ProgressBar.js.map +1 -0
- package/lib-commonjs/ProgressField.js +8 -0
- package/lib-commonjs/ProgressField.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js +20 -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/ProgressBar/ProgressBar.types.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/index.js +12 -0
- package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js +24 -0
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +15 -15
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +164 -0
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib-commonjs/components/ProgressField/ProgressField.js +23 -0
- package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -0
- package/lib-commonjs/{Progress.js → components/ProgressField/index.js} +2 -4
- package/lib-commonjs/components/ProgressField/index.js.map +1 -0
- package/lib-commonjs/index.js +25 -14
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +23 -15
- package/MIGRATION.md +0 -26
- package/Spec.md +0 -120
- 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 +0 -132
- 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/Progress.types.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 +0 -144
- package/lib-commonjs/components/Progress/useProgressStyles.js.map +0 -1
package/dist/index.d.ts
CHANGED
@@ -1,76 +1,96 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
|
1
3
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
5
|
+
import { FieldControl } from '@fluentui/react-field';
|
6
|
+
import type { FieldProps } from '@fluentui/react-field';
|
7
|
+
import { FieldSlots } from '@fluentui/react-field';
|
3
8
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
9
|
import * as React_2 from 'react';
|
5
10
|
import type { Slot } from '@fluentui/react-utilities';
|
6
|
-
import
|
11
|
+
import { SlotClassNames } from '@fluentui/react-utilities';
|
7
12
|
|
8
13
|
/**
|
9
|
-
* A
|
14
|
+
* A ProgressBar bar shows the progression of a task.
|
10
15
|
*/
|
11
|
-
export declare const
|
16
|
+
export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
|
12
17
|
|
13
|
-
export declare const
|
18
|
+
export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
|
14
19
|
|
15
20
|
/**
|
16
|
-
*
|
21
|
+
* ProgressBar Props
|
17
22
|
*/
|
18
|
-
export declare type
|
23
|
+
export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {
|
24
|
+
/**
|
25
|
+
* The shape of the bar and track.
|
26
|
+
* @default 'rounded'
|
27
|
+
*/
|
28
|
+
shape?: 'rounded' | 'rectangular';
|
19
29
|
/**
|
20
30
|
* A decimal number between `0` and `1` (or between `0` and `max` if given),
|
21
31
|
* which specifies how much of the task has been completed.
|
22
32
|
*
|
23
|
-
* If `undefined` (default), the
|
33
|
+
* If `undefined` (default), the ProgressBar will display an **indeterminate** state.
|
24
34
|
*/
|
25
35
|
value?: number;
|
26
36
|
/**
|
27
37
|
* The maximum value, which indicates the task is complete.
|
28
|
-
* The
|
38
|
+
* The ProgressBar bar will be full when `value` equals `max`.
|
29
39
|
* @default 1
|
30
40
|
*/
|
31
41
|
max?: number;
|
32
42
|
/**
|
33
|
-
* The thickness of the
|
43
|
+
* The thickness of the ProgressBar bar
|
34
44
|
* @default 'medium'
|
35
45
|
*/
|
36
46
|
thickness?: 'medium' | 'large';
|
47
|
+
/**
|
48
|
+
* The status of the ProgressBar bar. Changes the color of the bar.
|
49
|
+
*/
|
50
|
+
validationState?: 'success' | 'warning' | 'error';
|
37
51
|
};
|
38
52
|
|
39
|
-
export declare type
|
53
|
+
export declare type ProgressBarSlots = {
|
40
54
|
/**
|
41
|
-
* The track behind the
|
55
|
+
* The track behind the ProgressBar bar
|
42
56
|
*/
|
43
57
|
root: NonNullable<Slot<'div'>>;
|
44
58
|
/**
|
45
|
-
* The filled portion of the
|
59
|
+
* The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.
|
46
60
|
*/
|
47
61
|
bar?: NonNullable<Slot<'div'>>;
|
48
62
|
};
|
49
63
|
|
50
64
|
/**
|
51
|
-
* State used in rendering
|
65
|
+
* State used in rendering ProgressBar
|
52
66
|
*/
|
53
|
-
export declare type
|
67
|
+
export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'validationState'>;
|
68
|
+
|
69
|
+
export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
|
70
|
+
|
71
|
+
export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
|
72
|
+
|
73
|
+
export declare type ProgressFieldProps_unstable = FieldProps<typeof ProgressBar>;
|
54
74
|
|
55
75
|
/**
|
56
|
-
* Render the final JSX of
|
76
|
+
* Render the final JSX of ProgressBar
|
57
77
|
*/
|
58
|
-
export declare const
|
78
|
+
export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element;
|
59
79
|
|
60
80
|
/**
|
61
|
-
* Create the state required to render
|
81
|
+
* Create the state required to render ProgressBar.
|
62
82
|
*
|
63
|
-
* The returned state can be modified with hooks such as
|
64
|
-
* before being passed to
|
83
|
+
* The returned state can be modified with hooks such as useProgressBarStyles_unstable,
|
84
|
+
* before being passed to renderProgressBar_unstable.
|
65
85
|
*
|
66
|
-
* @param props - props from this instance of
|
67
|
-
* @param ref - reference to root HTMLElement of
|
86
|
+
* @param props - props from this instance of ProgressBar
|
87
|
+
* @param ref - reference to root HTMLElement of ProgressBar
|
68
88
|
*/
|
69
|
-
export declare const
|
89
|
+
export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
|
70
90
|
|
71
91
|
/**
|
72
|
-
* Apply styling to the
|
92
|
+
* Apply styling to the ProgressBar slots based on the state
|
73
93
|
*/
|
74
|
-
export declare const
|
94
|
+
export declare const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState;
|
75
95
|
|
76
96
|
export { }
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"../src/","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 @@
|
|
1
|
+
{"version":3,"file":"ProgressField.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ProgressField/index';\n"]}
|
@@ -0,0 +1,14 @@
|
|
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
|
+
export const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
9
|
+
const state = useProgressBar_unstable(props, ref);
|
10
|
+
useProgressBarStyles_unstable(state);
|
11
|
+
return renderProgressBar_unstable(state);
|
12
|
+
});
|
13
|
+
ProgressBar.displayName = 'ProgressBar';
|
14
|
+
//# sourceMappingURL=ProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","ProgressBar","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n const state = useProgressBar_unstable(props, ref);\n\n useProgressBarStyles_unstable(state);\n return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ProgressBar.types.js","sourceRoot":"../src/","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"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","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,17 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* Render the final JSX of ProgressBar
|
5
|
+
*/
|
6
|
+
export const renderProgressBar_unstable = state => {
|
7
|
+
const {
|
8
|
+
slots,
|
9
|
+
slotProps
|
10
|
+
} = getSlots(state);
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
12
|
+
...slotProps.root
|
13
|
+
}, slots.bar && /*#__PURE__*/React.createElement(slots.bar, {
|
14
|
+
...slotProps.bar
|
15
|
+
}));
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=renderProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAC9D,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAAGF,KAAK,CAACG,GAAG,iBAAIP,oBAACI,KAAK,CAACG,GAAG;IAAA,GAAKF,SAAS,CAACE;EAAG,EAAI,CAAc;AACrG,CAAC","names":["React","getSlots","renderProgressBar_unstable","state","slots","slotProps","root","bar"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"]}
|
@@ -1,20 +1,21 @@
|
|
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
|
-
|
12
|
-
export const useProgress_unstable = (props, ref) => {
|
11
|
+
export const useProgressBar_unstable = (props, ref) => {
|
13
12
|
// Props
|
14
13
|
const {
|
14
|
+
max = 1.0,
|
15
|
+
shape = 'rounded',
|
15
16
|
thickness = 'medium',
|
16
|
-
|
17
|
-
|
17
|
+
validationState,
|
18
|
+
value
|
18
19
|
} = props;
|
19
20
|
const root = getNativeElementProps('div', {
|
20
21
|
ref,
|
@@ -29,8 +30,10 @@ export const useProgress_unstable = (props, ref) => {
|
|
29
30
|
});
|
30
31
|
const state = {
|
31
32
|
max,
|
33
|
+
shape,
|
32
34
|
thickness,
|
33
35
|
value,
|
36
|
+
validationState,
|
34
37
|
components: {
|
35
38
|
root: 'div',
|
36
39
|
bar: 'div'
|
@@ -40,4 +43,4 @@ export const useProgress_unstable = (props, ref) => {
|
|
40
43
|
};
|
41
44
|
return state;
|
42
45
|
};
|
43
|
-
//# sourceMappingURL=
|
46
|
+
//# sourceMappingURL=useProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGV,qBAAqB,CAAC,KAAK,EAAE;IACxCI,GAAG;IACHO,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGP,GAAG,GAAGO,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMU,GAAG,GAAGZ,gBAAgB,CAACE,KAAK,CAACU,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BV,GAAG;IACHC,KAAK;IACLC,SAAS;IACTE,KAAK;IACLD,eAAe;IACfQ,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC","names":["getNativeElementProps","resolveShorthand","useProgressBar_unstable","props","ref","max","shape","thickness","validationState","value","root","role","undefined","bar","required","state","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"]}
|
@@ -0,0 +1,157 @@
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
4
|
+
export const progressBarClassNames = {
|
5
|
+
root: 'fui-ProgressBar',
|
6
|
+
bar: 'fui-ProgressBar__bar'
|
7
|
+
};
|
8
|
+
// If the percentComplete is near 0, don't animate it.
|
9
|
+
// This prevents animations on reset to 0 scenarios.
|
10
|
+
const ZERO_THRESHOLD = 0.01;
|
11
|
+
const barThicknessValues = {
|
12
|
+
medium: '2px',
|
13
|
+
large: '4px'
|
14
|
+
};
|
15
|
+
const indeterminateProgressBar = {
|
16
|
+
'0%': {
|
17
|
+
left: '0% /* @noflip */'
|
18
|
+
},
|
19
|
+
'100%': {
|
20
|
+
left: '100% /* @noflip */'
|
21
|
+
}
|
22
|
+
};
|
23
|
+
const indeterminateProgressBarRTL = {
|
24
|
+
'100%': {
|
25
|
+
right: '-100% /* @noflip */'
|
26
|
+
},
|
27
|
+
'0%': {
|
28
|
+
right: '100% /* @noflip */'
|
29
|
+
}
|
30
|
+
};
|
31
|
+
/**
|
32
|
+
* Styles for the root slot
|
33
|
+
*/
|
34
|
+
const useRootStyles = /*#__PURE__*/__styles({
|
35
|
+
root: {
|
36
|
+
mc9l5x: "ftgm304",
|
37
|
+
De3pzq: "f18f03hv",
|
38
|
+
Bdqf98w: "fhb5wj7",
|
39
|
+
B68tc82: "f1p9o1ba",
|
40
|
+
Bmxbyg5: "f1sil6mw",
|
41
|
+
I5kgcl: "fs8b23g",
|
42
|
+
tu2nte: "f1mcb20s",
|
43
|
+
y0r1ed: "fek7wd8"
|
44
|
+
},
|
45
|
+
rounded: {
|
46
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
47
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
48
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
49
|
+
Btl43ni: ["fyu767a", "f1jar5jt"]
|
50
|
+
},
|
51
|
+
rectangular: {
|
52
|
+
Bbmb7ep: ["fzi6hpg", "fyowgf4"],
|
53
|
+
Beyfa6y: ["fyowgf4", "fzi6hpg"],
|
54
|
+
B7oj6ja: ["f3fg2lr", "f13av6d4"],
|
55
|
+
Btl43ni: ["f13av6d4", "f3fg2lr"]
|
56
|
+
},
|
57
|
+
medium: {
|
58
|
+
Bqenvij: "f4t8t6x"
|
59
|
+
},
|
60
|
+
large: {
|
61
|
+
Bqenvij: "f6ywr7j"
|
62
|
+
}
|
63
|
+
}, {
|
64
|
+
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
65
|
+
m: [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
66
|
+
m: "screen and (forced-colors: active)"
|
67
|
+
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
68
|
+
m: "screen and (forced-colors: active)"
|
69
|
+
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
70
|
+
m: "screen and (forced-colors: active)"
|
71
|
+
}]]
|
72
|
+
});
|
73
|
+
/**
|
74
|
+
* Styles for the ProgressBar bar
|
75
|
+
*/
|
76
|
+
const useBarStyles = /*#__PURE__*/__styles({
|
77
|
+
base: {
|
78
|
+
De3pzq: "ftywsgz",
|
79
|
+
Bpep1pd: "f1neahkh",
|
80
|
+
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
81
|
+
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
82
|
+
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
83
|
+
Btl43ni: ["f1vtqnvc", "fuoumxm"]
|
84
|
+
},
|
85
|
+
medium: {
|
86
|
+
Bqenvij: "f4t8t6x"
|
87
|
+
},
|
88
|
+
large: {
|
89
|
+
Bqenvij: "f6ywr7j"
|
90
|
+
},
|
91
|
+
nonZeroDeterminate: {
|
92
|
+
Bmy1vo4: "fjt6zfz",
|
93
|
+
B3o57yi: "f1wofebd",
|
94
|
+
Bkqvd7p: "fv71qf3"
|
95
|
+
},
|
96
|
+
indeterminate: {
|
97
|
+
B2u0y6b: "fa0wk36",
|
98
|
+
qhf8xq: "f10pi13n",
|
99
|
+
Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
|
100
|
+
Bv12yb3: "f1h4fm7e",
|
101
|
+
vin17d: "f1a27w2r",
|
102
|
+
w3vfg9: "f1cpbl36",
|
103
|
+
Gqtpxc: "f4akx1t",
|
104
|
+
B3vm3ge: "f18p5put"
|
105
|
+
},
|
106
|
+
rtl: {
|
107
|
+
Bv12yb3: "fjhwsai"
|
108
|
+
},
|
109
|
+
error: {
|
110
|
+
De3pzq: "fdl5y0r"
|
111
|
+
},
|
112
|
+
warning: {
|
113
|
+
De3pzq: "f1s438gw"
|
114
|
+
},
|
115
|
+
success: {
|
116
|
+
De3pzq: "flxk52p"
|
117
|
+
}
|
118
|
+
}, {
|
119
|
+
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);}"],
|
120
|
+
m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
121
|
+
m: "screen and (forced-colors: active)"
|
122
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
123
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
124
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
125
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
126
|
+
}]],
|
127
|
+
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%;}}"]
|
128
|
+
});
|
129
|
+
/**
|
130
|
+
* Apply styling to the ProgressBar slots based on the state
|
131
|
+
*/
|
132
|
+
export const useProgressBarStyles_unstable = state => {
|
133
|
+
const {
|
134
|
+
max,
|
135
|
+
shape,
|
136
|
+
thickness,
|
137
|
+
validationState,
|
138
|
+
value
|
139
|
+
} = state;
|
140
|
+
const rootStyles = useRootStyles();
|
141
|
+
const barStyles = useBarStyles();
|
142
|
+
const {
|
143
|
+
dir
|
144
|
+
} = useFluent();
|
145
|
+
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
146
|
+
if (state.bar) {
|
147
|
+
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
|
148
|
+
}
|
149
|
+
if (state.bar && value !== undefined) {
|
150
|
+
state.bar.style = {
|
151
|
+
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
152
|
+
...state.bar.style
|
153
|
+
};
|
154
|
+
}
|
155
|
+
return state;
|
156
|
+
};
|
157
|
+
//# sourceMappingURL=useProgressBarStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","useBarStyles","useProgressBarStyles_unstable","state","max","shape","thickness","validationState","value","rootStyles","barStyles","dir","className","base","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '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"]}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
|
3
|
+
import { ProgressBar } from '../../ProgressBar';
|
4
|
+
export const progressFieldClassNames = /*#__PURE__*/getFieldClassNames('ProgressField');
|
5
|
+
export const ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: ProgressBar,
|
8
|
+
classNames: progressFieldClassNames,
|
9
|
+
labelConnection: 'aria-labelledby',
|
10
|
+
ariaInvalidOnError: false
|
11
|
+
});
|
12
|
+
state.control.validationState = state.validationState;
|
13
|
+
useFieldStyles_unstable(state);
|
14
|
+
return renderField_unstable(state);
|
15
|
+
});
|
16
|
+
ProgressField.displayName = 'ProgressField';
|
17
|
+
//# sourceMappingURL=ProgressField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAE9B,SAASC,WAAW,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,uBAAuB,gBAAGL,kBAAkB,CAAC,eAAe,CAAC;AAE1E,OAAO,MAAMM,aAAa,gBAA4CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEP,WAAW;IACtBQ,UAAU,EAAEP,uBAAuB;IACnCQ,eAAe,EAAE,iBAAiB;IAClCC,kBAAkB,EAAE;GACrB,CAAC;EACFJ,KAAK,CAACK,OAAO,CAACC,eAAe,GAAGN,KAAK,CAACM,eAAe;EACrDd,uBAAuB,CAACQ,KAAK,CAAC;EAC9B,OAAOT,oBAAoB,CAACS,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,aAAa,CAACW,WAAW,GAAG,eAAe","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","ProgressBar","progressFieldClassNames","ProgressField","forwardRef","props","ref","state","component","classNames","labelConnection","ariaInvalidOnError","control","validationState","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: ProgressBar,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './ProgressField';\n"]}
|
package/lib/index.js
CHANGED
@@ -1,2 +1,3 @@
|
|
1
|
-
export {
|
1
|
+
export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
|
2
|
+
export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';
|
2
3
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,eAAe;AAGtB,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField","ProgressField_unstable","progressFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressBar.ts"],"sourcesContent":["export * from './components/ProgressBar/index';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressField.ts"],"sourcesContent":["export * from './components/ProgressField/index';\n"]}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.ProgressBar = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const useProgressBar_1 = /*#__PURE__*/require("./useProgressBar");
|
9
|
+
const renderProgressBar_1 = /*#__PURE__*/require("./renderProgressBar");
|
10
|
+
const useProgressBarStyles_1 = /*#__PURE__*/require("./useProgressBarStyles");
|
11
|
+
/**
|
12
|
+
* A ProgressBar bar shows the progression of a task.
|
13
|
+
*/
|
14
|
+
exports.ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
15
|
+
const state = useProgressBar_1.useProgressBar_unstable(props, ref);
|
16
|
+
useProgressBarStyles_1.useProgressBarStyles_unstable(state);
|
17
|
+
return renderProgressBar_1.renderProgressBar_unstable(state);
|
18
|
+
});
|
19
|
+
exports.ProgressBar.displayName = 'ProgressBar';
|
20
|
+
//# sourceMappingURL=ProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useProgressBar_1","useProgressBarStyles_1","renderProgressBar_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n const state = useProgressBar_unstable(props, ref);\n\n useProgressBarStyles_unstable(state);\n return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
7
|
+
tslib_1.__exportStar(require("./ProgressBar"), exports);
|
8
|
+
tslib_1.__exportStar(require("./ProgressBar.types"), exports);
|
9
|
+
tslib_1.__exportStar(require("./renderProgressBar"), exports);
|
10
|
+
tslib_1.__exportStar(require("./useProgressBar"), exports);
|
11
|
+
tslib_1.__exportStar(require("./useProgressBarStyles"), exports);
|
12
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.renderProgressBar_unstable = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
|
+
/**
|
10
|
+
* Render the final JSX of ProgressBar
|
11
|
+
*/
|
12
|
+
const renderProgressBar_unstable = state => {
|
13
|
+
const {
|
14
|
+
slots,
|
15
|
+
slotProps
|
16
|
+
} = react_utilities_1.getSlots(state);
|
17
|
+
return React.createElement(slots.root, {
|
18
|
+
...slotProps.root
|
19
|
+
}, slots.bar && React.createElement(slots.bar, {
|
20
|
+
...slotProps.bar
|
21
|
+
}));
|
22
|
+
};
|
23
|
+
exports.renderProgressBar_unstable = renderProgressBar_unstable;
|
24
|
+
//# sourceMappingURL=renderProgressBar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAC9D,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAAGJ,KAAK,CAACK,GAAG,IAAIF,oBAACH,KAAK,CAACK,GAAG;IAAA,GAAKJ,SAAS,CAACI;EAAG,EAAI,CAAc;AACrG,CAAC;AAHYC,kCAA0B","names":["renderProgressBar_unstable","state","slots","slotProps","react_utilities_1","React","root","bar","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"]}
|