@fluentui/react-progress 0.0.0-nightly-20221007-1237.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. package/CHANGELOG.json +101 -0
  2. package/CHANGELOG.md +46 -0
  3. package/LICENSE +15 -0
  4. package/README.md +5 -0
  5. package/Spec.md +105 -0
  6. package/dist/index.d.ts +76 -0
  7. package/lib/Progress.js +2 -0
  8. package/lib/Progress.js.map +1 -0
  9. package/lib/components/Progress/Progress.js +15 -0
  10. package/lib/components/Progress/Progress.js.map +1 -0
  11. package/lib/components/Progress/Progress.types.js +2 -0
  12. package/lib/components/Progress/Progress.types.js.map +1 -0
  13. package/lib/components/Progress/index.js +6 -0
  14. package/lib/components/Progress/index.js.map +1 -0
  15. package/lib/components/Progress/renderProgress.js +16 -0
  16. package/lib/components/Progress/renderProgress.js.map +1 -0
  17. package/lib/components/Progress/useProgress.js +45 -0
  18. package/lib/components/Progress/useProgress.js.map +1 -0
  19. package/lib/components/Progress/useProgressStyles.js +124 -0
  20. package/lib/components/Progress/useProgressStyles.js.map +1 -0
  21. package/lib/index.js +2 -0
  22. package/lib/index.js.map +1 -0
  23. package/lib-commonjs/Progress.js +10 -0
  24. package/lib-commonjs/Progress.js.map +1 -0
  25. package/lib-commonjs/components/Progress/Progress.js +26 -0
  26. package/lib-commonjs/components/Progress/Progress.js.map +1 -0
  27. package/lib-commonjs/components/Progress/Progress.types.js +6 -0
  28. package/lib-commonjs/components/Progress/Progress.types.js.map +1 -0
  29. package/lib-commonjs/components/Progress/index.js +18 -0
  30. package/lib-commonjs/components/Progress/index.js.map +1 -0
  31. package/lib-commonjs/components/Progress/renderProgress.js +27 -0
  32. package/lib-commonjs/components/Progress/renderProgress.js.map +1 -0
  33. package/lib-commonjs/components/Progress/useProgress.js +55 -0
  34. package/lib-commonjs/components/Progress/useProgress.js.map +1 -0
  35. package/lib-commonjs/components/Progress/useProgressStyles.js +136 -0
  36. package/lib-commonjs/components/Progress/useProgressStyles.js.map +1 -0
  37. package/lib-commonjs/index.js +40 -0
  38. package/lib-commonjs/index.js.map +1 -0
  39. package/package.json +48 -0
package/CHANGELOG.json ADDED
@@ -0,0 +1,101 @@
1
+ {
2
+ "name": "@fluentui/react-progress",
3
+ "entries": [
4
+ {
5
+ "date": "Fri, 07 Oct 2022 12:44:23 GMT",
6
+ "tag": "@fluentui/react-progress_v0.0.0-nightly-20221007-1237.1",
7
+ "version": "0.0.0-nightly-20221007-1237.1",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "fluentui-internal@service.microsoft.com",
12
+ "package": "@fluentui/react-progress",
13
+ "commit": "not available",
14
+ "comment": "Release nightly v9"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-progress",
19
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1237.1",
20
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-progress",
25
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1",
26
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-progress",
31
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1",
32
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-progress",
37
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1",
38
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Tue, 20 Sep 2022 20:55:45 GMT",
45
+ "tag": "@fluentui/react-progress_v9.0.0-alpha.0",
46
+ "version": "9.0.0-alpha.0",
47
+ "comments": {
48
+ "patch": [
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-progress",
52
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
53
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
54
+ }
55
+ ]
56
+ }
57
+ },
58
+ {
59
+ "date": "Thu, 15 Sep 2022 09:50:08 GMT",
60
+ "tag": "@fluentui/react-progress_v9.0.0-alpha.0",
61
+ "version": "9.0.0-alpha.0",
62
+ "comments": {
63
+ "patch": [
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-progress",
67
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
68
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
69
+ },
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui/react-progress",
73
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
74
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
75
+ },
76
+ {
77
+ "author": "beachball",
78
+ "package": "@fluentui/react-progress",
79
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
80
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
81
+ }
82
+ ]
83
+ }
84
+ },
85
+ {
86
+ "date": "Wed, 03 Aug 2022 16:04:10 GMT",
87
+ "tag": "@fluentui/react-progress_v9.0.0-alpha.0",
88
+ "version": "9.0.0-alpha.0",
89
+ "comments": {
90
+ "patch": [
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-progress",
94
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
95
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
96
+ }
97
+ ]
98
+ }
99
+ }
100
+ ]
101
+ }
package/CHANGELOG.md ADDED
@@ -0,0 +1,46 @@
1
+ # Change Log - @fluentui/react-progress
2
+
3
+ This log was last generated on Fri, 07 Oct 2022 12:44:23 GMT and should not be manually modified.
4
+
5
+ <!-- Start content -->
6
+
7
+ ## [0.0.0-nightly-20221007-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221007-1237.1)
8
+
9
+ Fri, 07 Oct 2022 12:44:23 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v0.0.0-nightly-20221007-1237.1)
11
+
12
+ ### Changes
13
+
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
16
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
17
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
18
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
19
+
20
+ ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)
21
+
22
+ Tue, 20 Sep 2022 20:55:45 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v9.0.0-alpha.0)
24
+
25
+ ### Patches
26
+
27
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
28
+
29
+ ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)
30
+
31
+ Thu, 15 Sep 2022 09:50:08 GMT
32
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v9.0.0-alpha.0)
33
+
34
+ ### Patches
35
+
36
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
37
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
38
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
39
+
40
+ ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)
41
+
42
+ Wed, 03 Aug 2022 16:04:10 GMT
43
+
44
+ ### Patches
45
+
46
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
package/LICENSE ADDED
@@ -0,0 +1,15 @@
1
+ @fluentui/react-progress
2
+
3
+ Copyright (c) Microsoft Corporation
4
+
5
+ All rights reserved.
6
+
7
+ MIT License
8
+
9
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
14
+
15
+ Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
package/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # @fluentui/react-progress
2
+
3
+ **React Progress components for [Fluent UI React](https://react.fluentui.dev/)**
4
+
5
+ These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
package/Spec.md ADDED
@@ -0,0 +1,105 @@
1
+ # @fluentui/react-progress Spec
2
+
3
+ ## Background
4
+
5
+ The `Progress` component is used to display the current progress of an operation flow.
6
+
7
+ ## Prior Art
8
+
9
+ ### Open UI
10
+
11
+ | Library | Component Name | Spec Link | Notes |
12
+ | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
13
+ | Ant Design | Progress | [Progress](https://ant.design/components/progress/) | Specifies the type, a combined progress component |
14
+ | Atlassian Design | Progress bar | [ProgressBar](https://atlassian.design/components/progress-bar/success-progress-bar/examples) | Defaults to determinate state, which turns green when value reaches 1. Has an indeterminate state |
15
+ | Bootstrap | Progress | [Progress](https://getbootstrap.com/docs/4.3/components/progress/) | Allows for multiple different animation styles on the same Progress bar |
16
+ | Carbon Design | Progress Indicator | [ProgressIndicator](https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default) | Determinate Progress that has steps, similar to a Slider |
17
+ | Fast | Progress | [Progress](https://explore.fast.design/components/fast-progress) | Combined Progress and Spinner component, has a determinate and indeterminate state |
18
+ | Lightning Design System | Progress Bar | [ProgressBar](https://www.lightningdesignsystem.com/components/progress-bar/) | Has a vertical bar, only determinate, and can specify progress step |
19
+ | Semantic UI | Progress | [Progress](https://semantic-ui.com/modules/progress.html#indicating) | Allows for success and error states, default rounded edges. No indeterminate form |
20
+
21
+ ### Comparison of v8 and v0
22
+
23
+ The existing components are:
24
+
25
+ - v8
26
+ - `ProgressIndicator`
27
+ - v0
28
+
29
+ ## Sample Code
30
+
31
+ Basic example:
32
+
33
+ ```jsx
34
+ import { Progress } from '@fluentui/react-progress';
35
+
36
+ function App() {
37
+ return <Progress thickness="large" label="Loading" />;
38
+ }
39
+ ```
40
+
41
+ ## Variants
42
+
43
+ - Indeterminate Progress
44
+ - The default Progress that animates indefinitely
45
+ - Determinate Progress
46
+ - The determinate form of the Progress component that incrementally loads from 0% to 100%
47
+
48
+ ### Shape
49
+
50
+ The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point
51
+
52
+ ## API
53
+
54
+ ### Slots
55
+
56
+ - `root` - The root element of the Progress. The html element is a `div`
57
+ - `bar` - The div element that gets animated into a Progress bar. The html element is `div`
58
+ - `track` - The div element that functions as the track for the Progress bar. The html element is `div`
59
+ - `label` - The text shown above the Progress. The html element is a `span`
60
+ - `description` - The text shown below the Progress. The html element is a `span`
61
+
62
+ ### Props
63
+
64
+ See API at [Progress.types.tsx](./src/components/Progress/Progress.types.ts).
65
+
66
+ ## Structure
67
+
68
+ ```html
69
+ <div class="fui-Progress">
70
+ <!-- Label for Progress -->
71
+ <span className="fui-Progress__label">Loading...</span>
72
+ <!-- Track for Progress -->
73
+ <div class="fui-Progress__track" />
74
+ <!-- Bar for Progress -->
75
+ <div class="fui-Progess__bar" />
76
+ <!-- Label for Progress description -->
77
+ <span className="fui-Progress__description">Loading Text</span>
78
+ </div>
79
+ ```
80
+
81
+ ## Migration
82
+
83
+ See [MIGRATION.md](./MIGRATION.md).
84
+
85
+ ## Behaviors
86
+
87
+ ### States
88
+
89
+ - **Display** - The Progress will use the following priority:
90
+
91
+ - Specifying the `percentComplete` from `0` to `1` will alter the Progress from indeterminate to determinate.
92
+ - The component also has `rtl` support and will animate the progress bar from right to left if set.
93
+
94
+ ### Interaction
95
+
96
+ The Progress is non-interactive.
97
+
98
+ - **Keyboard** - Not keyboard focusable.
99
+ - **Mouse**
100
+
101
+ - Click: No action
102
+
103
+ - **Touch** - Nothing
104
+
105
+ ## Accessibility
@@ -0,0 +1,76 @@
1
+ import type { ComponentProps } from '@fluentui/react-utilities';
2
+ import type { ComponentState } from '@fluentui/react-utilities';
3
+ import type { ForwardRefComponent } from '@fluentui/react-utilities';
4
+ import * as React_2 from 'react';
5
+ import type { Slot } from '@fluentui/react-utilities';
6
+ import type { SlotClassNames } from '@fluentui/react-utilities';
7
+
8
+ /**
9
+ * A progress bar shows the progression of a task.
10
+ */
11
+ export declare const Progress: ForwardRefComponent<ProgressProps>;
12
+
13
+ export declare const progressClassNames: SlotClassNames<ProgressSlots>;
14
+
15
+ /**
16
+ * Progress Props
17
+ */
18
+ export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
19
+ /**
20
+ * A decimal number between `0` and `1` (or between `0` and `max` if given),
21
+ * which specifies how much of the task has been completed.
22
+ *
23
+ * If `undefined` (default), the Progress will display an **indeterminate** state.
24
+ */
25
+ value?: number;
26
+ /**
27
+ * The maximum value, which indicates the task is complete.
28
+ * The progress bar will be full when `value` equals `max`.
29
+ * @default 1
30
+ */
31
+ max?: number;
32
+ /**
33
+ * The thickness of the Progress bar
34
+ * @default 'medium'
35
+ */
36
+ thickness?: 'medium' | 'large';
37
+ };
38
+
39
+ export declare type ProgressSlots = {
40
+ /**
41
+ * The track behind the progress bar
42
+ */
43
+ root: NonNullable<Slot<'div'>>;
44
+ /**
45
+ * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.
46
+ */
47
+ bar?: NonNullable<Slot<'div'>>;
48
+ };
49
+
50
+ /**
51
+ * State used in rendering Progress
52
+ */
53
+ export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;
54
+
55
+ /**
56
+ * Render the final JSX of Progress
57
+ */
58
+ export declare const renderProgress_unstable: (state: ProgressState) => JSX.Element;
59
+
60
+ /**
61
+ * Create the state required to render Progress.
62
+ *
63
+ * The returned state can be modified with hooks such as useProgressStyles_unstable,
64
+ * before being passed to renderProgress_unstable.
65
+ *
66
+ * @param props - props from this instance of Progress
67
+ * @param ref - reference to root HTMLElement of Progress
68
+ */
69
+ export declare const useProgress_unstable: (props: ProgressProps, ref: React_2.Ref<HTMLElement>) => ProgressState;
70
+
71
+ /**
72
+ * Apply styling to the Progress slots based on the state
73
+ */
74
+ export declare const useProgressStyles_unstable: (state: ProgressState) => ProgressState;
75
+
76
+ export { }
@@ -0,0 +1,2 @@
1
+ export * from './components/Progress/index';
2
+ //# sourceMappingURL=Progress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../src/Progress.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Progress/index';\n"]}
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ import { useProgress_unstable } from './useProgress';
3
+ import { renderProgress_unstable } from './renderProgress';
4
+ import { useProgressStyles_unstable } from './useProgressStyles';
5
+ /**
6
+ * A progress bar shows the progression of a task.
7
+ */
8
+
9
+ export const Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
10
+ const state = useProgress_unstable(props, ref);
11
+ useProgressStyles_unstable(state);
12
+ return renderProgress_unstable(state);
13
+ });
14
+ Progress.displayName = 'Progress';
15
+ //# sourceMappingURL=Progress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n const state = useProgress_unstable(props, ref);\n\n useProgressStyles_unstable(state);\n return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Progress.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressSlots = {\n /**\n * The track behind the progress bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Progress Props\n */\nexport type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {\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 Progress will display an **indeterminate** state.\n */\n value?: number;\n /**\n * The maximum value, which indicates the task is complete.\n * The progress bar will be full when `value` equals `max`.\n * @default 1\n */\n max?: number;\n /**\n * The thickness of the Progress bar\n * @default 'medium'\n */\n thickness?: 'medium' | 'large';\n};\n\n/**\n * State used in rendering Progress\n */\nexport type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;\n"]}
@@ -0,0 +1,6 @@
1
+ export * from './Progress';
2
+ export * from './Progress.types';
3
+ export * from './renderProgress';
4
+ export * from './useProgress';
5
+ export * from './useProgressStyles';
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"]}
@@ -0,0 +1,16 @@
1
+ import * as React from 'react';
2
+ import { getSlots } from '@fluentui/react-utilities';
3
+ /**
4
+ * Render the final JSX of Progress
5
+ */
6
+
7
+ export const renderProgress_unstable = state => {
8
+ const {
9
+ slots,
10
+ slotProps
11
+ } = getSlots(state);
12
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
+ }, slots.bar && /*#__PURE__*/React.createElement(slots.bar, { ...slotProps.bar
14
+ }));
15
+ };
16
+ //# sourceMappingURL=renderProgress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/renderProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,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 { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":""}
@@ -0,0 +1,45 @@
1
+ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
2
+ /**
3
+ * Create the state required to render Progress.
4
+ *
5
+ * The returned state can be modified with hooks such as useProgressStyles_unstable,
6
+ * before being passed to renderProgress_unstable.
7
+ *
8
+ * @param props - props from this instance of Progress
9
+ * @param ref - reference to root HTMLElement of Progress
10
+ */
11
+
12
+ export const useProgress_unstable = (props, ref) => {
13
+ // Props
14
+ const {
15
+ thickness = 'medium',
16
+ value,
17
+ max = 1.0
18
+ } = props;
19
+ const root = getNativeElementProps('div', {
20
+ ref,
21
+ role: 'progressbar',
22
+ ...props
23
+ });
24
+ const bar = resolveShorthand(props.bar, {
25
+ required: true,
26
+ defaultProps: {
27
+ 'aria-valuemin': value ? 0 : undefined,
28
+ 'aria-valuemax': value ? max : undefined,
29
+ 'aria-valuenow': value
30
+ }
31
+ });
32
+ const state = {
33
+ max,
34
+ thickness,
35
+ value,
36
+ components: {
37
+ root: 'div',
38
+ bar: 'div'
39
+ },
40
+ root,
41
+ bar
42
+ };
43
+ return state;
44
+ };
45
+ //# sourceMappingURL=useProgress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/useProgress.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,SAAS,GAAG,QAAd;IAAwB,KAAxB;IAA+B,GAAG,GAAG;EAArC,IAA6C,KAAnD;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IAAE,GAAF;IAAO,IAAI,EAAE,aAAb;IAA4B,GAAG;EAA/B,CAAR,CAAlC;EAEA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE,IAD4B;IAEtC,YAAY,EAAE;MACZ,iBAAiB,KAAK,GAAG,CAAH,GAAO,SADjB;MAEZ,iBAAiB,KAAK,GAAG,GAAH,GAAS,SAFnB;MAGZ,iBAAiB;IAHL;EAFwB,CAAZ,CAA5B;EASA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,SAF2B;IAG3B,KAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CAJe;IAQ3B,IAR2B;IAS3B;EAT2B,CAA7B;EAYA,OAAO,KAAP;AACD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { thickness = 'medium', value, max = 1.0 } = props;\n\n const root = getNativeElementProps('div', { ref, role: 'progressbar', ...props });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n defaultProps: {\n 'aria-valuemin': value ? 0 : undefined,\n 'aria-valuemax': value ? max : undefined,\n 'aria-valuenow': value,\n },\n });\n\n const state: ProgressState = {\n max,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":""}
@@ -0,0 +1,124 @@
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 progressClassNames = {
5
+ root: 'fui-Progress',
6
+ bar: 'fui-Progress__bar'
7
+ }; // If the percentComplete is near 0, don't animate it.
8
+ // This prevents animations on reset to 0 scenarios.
9
+
10
+ const ZERO_THRESHOLD = 0.01;
11
+ const barThicknessValues = {
12
+ medium: '2px',
13
+ large: '4px'
14
+ };
15
+ const indeterminateProgress = {
16
+ '0%': {
17
+ left: '0%'
18
+ },
19
+ '100%': {
20
+ left: '100%'
21
+ }
22
+ };
23
+ /**
24
+ * Styles for the root slot
25
+ */
26
+
27
+ const useRootStyles = /*#__PURE__*/__styles({
28
+ "root": {
29
+ "mc9l5x": "ftgm304",
30
+ "De3pzq": "f18f03hv",
31
+ "Bdqf98w": "fhb5wj7",
32
+ "B68tc82": "f1p9o1ba",
33
+ "Bmxbyg5": "f1sil6mw",
34
+ "I5kgcl": "fs8b23g",
35
+ "tu2nte": "f1mcb20s",
36
+ "y0r1ed": "fek7wd8"
37
+ },
38
+ "medium": {
39
+ "Bqenvij": "f4t8t6x"
40
+ },
41
+ "large": {
42
+ "Bqenvij": "f6ywr7j"
43
+ }
44
+ }, {
45
+ "d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
46
+ "m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
47
+ "m": "screen and (forced-colors: active)"
48
+ }], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
49
+ "m": "screen and (forced-colors: active)"
50
+ }], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
51
+ "m": "screen and (forced-colors: active)"
52
+ }]]
53
+ });
54
+ /**
55
+ * Styles for the progress bar
56
+ */
57
+
58
+
59
+ const useBarStyles = /*#__PURE__*/__styles({
60
+ "base": {
61
+ "De3pzq": "ftywsgz",
62
+ "Bpep1pd": "f1neahkh"
63
+ },
64
+ "medium": {
65
+ "Bqenvij": "f4t8t6x"
66
+ },
67
+ "large": {
68
+ "Bqenvij": "f6ywr7j"
69
+ },
70
+ "nonZeroDeterminate": {
71
+ "Bmy1vo4": "fjt6zfz",
72
+ "B3o57yi": "f1wofebd",
73
+ "Bkqvd7p": "fv71qf3"
74
+ },
75
+ "indeterminate": {
76
+ "B2u0y6b": "fa0wk36",
77
+ "qhf8xq": "f10pi13n",
78
+ "Bcmaq0h": ["fhjp9mj", "ffmeyi5"],
79
+ "Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
80
+ "vin17d": "f1a27w2r",
81
+ "w3vfg9": "f1cpbl36"
82
+ },
83
+ "rtl": {
84
+ "Bxajw12": "f8zwtth"
85
+ }
86
+ }, {
87
+ "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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;}", ".fhjp9mj{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".ffmeyi5{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f8zwtth{-webkit-animation-direction:reverse;animation-direction:reverse;}"],
88
+ "m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
89
+ "m": "screen and (forced-colors: active)"
90
+ }]],
91
+ "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}"]
92
+ });
93
+ /**
94
+ * Apply styling to the Progress slots based on the state
95
+ */
96
+
97
+
98
+ export const useProgressStyles_unstable = state => {
99
+ const {
100
+ max,
101
+ thickness,
102
+ value
103
+ } = state;
104
+ const rootStyles = useRootStyles();
105
+ const barStyles = useBarStyles();
106
+ const {
107
+ dir
108
+ } = useFluent();
109
+ state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
110
+
111
+ if (state.bar) {
112
+ state.bar.className = mergeClasses(progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
113
+ }
114
+
115
+ if (state.bar && value !== undefined) {
116
+ state.bar.style = {
117
+ width: Math.min(100, Math.max(0, value / max * 100)) + '%',
118
+ ...state.bar.style
119
+ };
120
+ }
121
+
122
+ return state;
123
+ };
124
+ //# sourceMappingURL=useProgressStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/useProgressStyles.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,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAA1D,C,CAKP;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAmBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAsCA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,SAAP;IAAkB;EAAlB,IAA4B,KAAlC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,SAAD,CAHuB,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,YAAY,CAChC,kBAAkB,CAAC,GADa,EAEhC,SAAS,CAAC,IAFsB,EAGhC,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHD,EAIhC,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJlB,EAKhC,SAAS,CAAC,SAAD,CALuB,EAMhC,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBAN3B,EAOhC,KAAK,CAAC,GAAN,CAAU,SAPsB,CAAlC;EASD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAjCM","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 { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__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 indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\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.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationDirection: 'reverse',\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.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 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 ADDED
@@ -0,0 +1,2 @@
1
+ export { Progress, progressClassNames, renderProgress_unstable, useProgress_unstable, useProgressStyles_unstable } from './Progress';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,oBAJF,EAKE,0BALF,QAMO,YANP","sourcesContent":["export {\n Progress,\n progressClassNames,\n renderProgress_unstable,\n useProgress_unstable,\n useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n"],"sourceRoot":""}
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./components/Progress/index"), exports);
10
+ //# sourceMappingURL=Progress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Progress.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Progress/index';\n"],"sourceRoot":""}
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Progress = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const useProgress_1 = /*#__PURE__*/require("./useProgress");
11
+
12
+ const renderProgress_1 = /*#__PURE__*/require("./renderProgress");
13
+
14
+ const useProgressStyles_1 = /*#__PURE__*/require("./useProgressStyles");
15
+ /**
16
+ * A progress bar shows the progression of a task.
17
+ */
18
+
19
+
20
+ exports.Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
21
+ const state = useProgress_1.useProgress_unstable(props, ref);
22
+ useProgressStyles_1.useProgressStyles_unstable(state);
23
+ return renderProgress_1.renderProgress_unstable(state);
24
+ });
25
+ exports.Progress.displayName = 'Progress';
26
+ //# sourceMappingURL=Progress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n const state = useProgress_unstable(props, ref);\n\n useProgressStyles_unstable(state);\n return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":""}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=Progress.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./Progress"), exports);
10
+
11
+ tslib_1.__exportStar(require("./Progress.types"), exports);
12
+
13
+ tslib_1.__exportStar(require("./renderProgress"), exports);
14
+
15
+ tslib_1.__exportStar(require("./useProgress"), exports);
16
+
17
+ tslib_1.__exportStar(require("./useProgressStyles"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"],"sourceRoot":""}
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.renderProgress_unstable = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
+ /**
12
+ * Render the final JSX of Progress
13
+ */
14
+
15
+
16
+ const renderProgress_unstable = state => {
17
+ const {
18
+ slots,
19
+ slotProps
20
+ } = react_utilities_1.getSlots(state);
21
+ return React.createElement(slots.root, { ...slotProps.root
22
+ }, slots.bar && React.createElement(slots.bar, { ...slotProps.bar
23
+ }));
24
+ };
25
+
26
+ exports.renderProgress_unstable = renderProgress_unstable;
27
+ //# sourceMappingURL=renderProgress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/renderProgress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,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,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":""}
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useProgress_unstable = void 0;
7
+
8
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
+ /**
10
+ * Create the state required to render Progress.
11
+ *
12
+ * The returned state can be modified with hooks such as useProgressStyles_unstable,
13
+ * before being passed to renderProgress_unstable.
14
+ *
15
+ * @param props - props from this instance of Progress
16
+ * @param ref - reference to root HTMLElement of Progress
17
+ */
18
+
19
+
20
+ const useProgress_unstable = (props, ref) => {
21
+ // Props
22
+ const {
23
+ thickness = 'medium',
24
+ value,
25
+ max = 1.0
26
+ } = props;
27
+ const root = react_utilities_1.getNativeElementProps('div', {
28
+ ref,
29
+ role: 'progressbar',
30
+ ...props
31
+ });
32
+ const bar = react_utilities_1.resolveShorthand(props.bar, {
33
+ required: true,
34
+ defaultProps: {
35
+ 'aria-valuemin': value ? 0 : undefined,
36
+ 'aria-valuemax': value ? max : undefined,
37
+ 'aria-valuenow': value
38
+ }
39
+ });
40
+ const state = {
41
+ max,
42
+ thickness,
43
+ value,
44
+ components: {
45
+ root: 'div',
46
+ bar: 'div'
47
+ },
48
+ root,
49
+ bar
50
+ };
51
+ return state;
52
+ };
53
+
54
+ exports.useProgress_unstable = useProgress_unstable;
55
+ //# sourceMappingURL=useProgress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/useProgress.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,SAAS,GAAG,QAAd;IAAwB,KAAxB;IAA+B,GAAG,GAAG;EAArC,IAA6C,KAAnD;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IAAE,GAAF;IAAO,IAAI,EAAE,aAAb;IAA4B,GAAG;EAA/B,CAA7B,CAAb;EAEA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE,IAD4B;IAEtC,YAAY,EAAE;MACZ,iBAAiB,KAAK,GAAG,CAAH,GAAO,SADjB;MAEZ,iBAAiB,KAAK,GAAG,GAAH,GAAS,SAFnB;MAGZ,iBAAiB;IAHL;EAFwB,CAA5B,CAAZ;EASA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,SAF2B;IAG3B,KAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CAJe;IAQ3B,IAR2B;IAS3B;EAT2B,CAA7B;EAYA,OAAO,KAAP;AACD,CA5BM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { thickness = 'medium', value, max = 1.0 } = props;\n\n const root = getNativeElementProps('div', { ref, role: 'progressbar', ...props });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n defaultProps: {\n 'aria-valuemin': value ? 0 : undefined,\n 'aria-valuemax': value ? max : undefined,\n 'aria-valuenow': value,\n },\n });\n\n const state: ProgressState = {\n max,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":""}
@@ -0,0 +1,136 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useProgressStyles_unstable = exports.progressClassNames = void 0;
7
+
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
+
12
+ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
13
+
14
+ exports.progressClassNames = {
15
+ root: 'fui-Progress',
16
+ bar: 'fui-Progress__bar'
17
+ }; // If the percentComplete is near 0, don't animate it.
18
+ // This prevents animations on reset to 0 scenarios.
19
+
20
+ const ZERO_THRESHOLD = 0.01;
21
+ const barThicknessValues = {
22
+ medium: '2px',
23
+ large: '4px'
24
+ };
25
+ const indeterminateProgress = {
26
+ '0%': {
27
+ left: '0%'
28
+ },
29
+ '100%': {
30
+ left: '100%'
31
+ }
32
+ };
33
+ /**
34
+ * Styles for the root slot
35
+ */
36
+
37
+ const useRootStyles = /*#__PURE__*/react_1.__styles({
38
+ "root": {
39
+ "mc9l5x": "ftgm304",
40
+ "De3pzq": "f18f03hv",
41
+ "Bdqf98w": "fhb5wj7",
42
+ "B68tc82": "f1p9o1ba",
43
+ "Bmxbyg5": "f1sil6mw",
44
+ "I5kgcl": "fs8b23g",
45
+ "tu2nte": "f1mcb20s",
46
+ "y0r1ed": "fek7wd8"
47
+ },
48
+ "medium": {
49
+ "Bqenvij": "f4t8t6x"
50
+ },
51
+ "large": {
52
+ "Bqenvij": "f6ywr7j"
53
+ }
54
+ }, {
55
+ "d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
56
+ "m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
57
+ "m": "screen and (forced-colors: active)"
58
+ }], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
59
+ "m": "screen and (forced-colors: active)"
60
+ }], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
61
+ "m": "screen and (forced-colors: active)"
62
+ }]]
63
+ });
64
+ /**
65
+ * Styles for the progress bar
66
+ */
67
+
68
+
69
+ const useBarStyles = /*#__PURE__*/react_1.__styles({
70
+ "base": {
71
+ "De3pzq": "ftywsgz",
72
+ "Bpep1pd": "f1neahkh"
73
+ },
74
+ "medium": {
75
+ "Bqenvij": "f4t8t6x"
76
+ },
77
+ "large": {
78
+ "Bqenvij": "f6ywr7j"
79
+ },
80
+ "nonZeroDeterminate": {
81
+ "Bmy1vo4": "fjt6zfz",
82
+ "B3o57yi": "f1wofebd",
83
+ "Bkqvd7p": "fv71qf3"
84
+ },
85
+ "indeterminate": {
86
+ "B2u0y6b": "fa0wk36",
87
+ "qhf8xq": "f10pi13n",
88
+ "Bcmaq0h": ["fhjp9mj", "ffmeyi5"],
89
+ "Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
90
+ "vin17d": "f1a27w2r",
91
+ "w3vfg9": "f1cpbl36"
92
+ },
93
+ "rtl": {
94
+ "Bxajw12": "f8zwtth"
95
+ }
96
+ }, {
97
+ "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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;}", ".fhjp9mj{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".ffmeyi5{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f8zwtth{-webkit-animation-direction:reverse;animation-direction:reverse;}"],
98
+ "m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
99
+ "m": "screen and (forced-colors: active)"
100
+ }]],
101
+ "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}"]
102
+ });
103
+ /**
104
+ * Apply styling to the Progress slots based on the state
105
+ */
106
+
107
+
108
+ const useProgressStyles_unstable = state => {
109
+ const {
110
+ max,
111
+ thickness,
112
+ value
113
+ } = state;
114
+ const rootStyles = useRootStyles();
115
+ const barStyles = useBarStyles();
116
+ const {
117
+ dir
118
+ } = react_shared_contexts_1.useFluent_unstable();
119
+ state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
120
+
121
+ if (state.bar) {
122
+ state.bar.className = react_1.mergeClasses(exports.progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
123
+ }
124
+
125
+ if (state.bar && value !== undefined) {
126
+ state.bar.style = {
127
+ width: Math.min(100, Math.max(0, value / max * 100)) + '%',
128
+ ...state.bar.style
129
+ };
130
+ }
131
+
132
+ return state;
133
+ };
134
+
135
+ exports.useProgressStyles_unstable = useProgressStyles_unstable;
136
+ //# sourceMappingURL=useProgressStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/Progress/useProgressStyles.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,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAApD,C,CAKb;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAmBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAsCA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,SAAP;IAAkB;EAAlB,IAA4B,KAAlC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,uBAAA,CAAA,kBAAA,EAAhB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,kBAAA,CAAmB,IADE,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,CAAC,SAAD,CAHW,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,OAAA,CAAA,YAAA,CACpB,OAAA,CAAA,kBAAA,CAAmB,GADC,EAEpB,SAAS,CAAC,IAFU,EAGpB,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHb,EAIpB,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJ9B,EAKpB,SAAS,CAAC,SAAD,CALW,EAMpB,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBANvC,EAOpB,KAAK,CAAC,GAAN,CAAU,SAPU,CAAtB;EASD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAjCM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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 { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__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 indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\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.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationDirection: 'reverse',\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.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 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":""}
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useProgressStyles_unstable = exports.useProgress_unstable = exports.renderProgress_unstable = exports.progressClassNames = exports.Progress = void 0;
7
+
8
+ var Progress_1 = /*#__PURE__*/require("./Progress");
9
+
10
+ Object.defineProperty(exports, "Progress", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return Progress_1.Progress;
14
+ }
15
+ });
16
+ Object.defineProperty(exports, "progressClassNames", {
17
+ enumerable: true,
18
+ get: function () {
19
+ return Progress_1.progressClassNames;
20
+ }
21
+ });
22
+ Object.defineProperty(exports, "renderProgress_unstable", {
23
+ enumerable: true,
24
+ get: function () {
25
+ return Progress_1.renderProgress_unstable;
26
+ }
27
+ });
28
+ Object.defineProperty(exports, "useProgress_unstable", {
29
+ enumerable: true,
30
+ get: function () {
31
+ return Progress_1.useProgress_unstable;
32
+ }
33
+ });
34
+ Object.defineProperty(exports, "useProgressStyles_unstable", {
35
+ enumerable: true,
36
+ get: function () {
37
+ return Progress_1.useProgressStyles_unstable;
38
+ }
39
+ });
40
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA","sourcesContent":["export {\n Progress,\n progressClassNames,\n renderProgress_unstable,\n useProgress_unstable,\n useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n"],"sourceRoot":""}
package/package.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@fluentui/react-progress",
3
+ "version": "0.0.0-nightly-20221007-1237.1",
4
+ "description": "Progress component for FluentUI v9",
5
+ "main": "lib-commonjs/index.js",
6
+ "module": "lib/index.js",
7
+ "typings": "dist/index.d.ts",
8
+ "sideEffects": false,
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/microsoft/fluentui"
12
+ },
13
+ "license": "MIT",
14
+ "scripts": {
15
+ "build": "just-scripts build",
16
+ "bundle-size": "bundle-size measure",
17
+ "clean": "just-scripts clean",
18
+ "code-style": "just-scripts code-style",
19
+ "just": "just-scripts",
20
+ "lint": "just-scripts lint",
21
+ "test": "jest --passWithNoTests",
22
+ "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-progress/src && yarn docs",
24
+ "type-check": "tsc -b tsconfig.json",
25
+ "storybook": "start-storybook",
26
+ "start": "yarn storybook"
27
+ },
28
+ "devDependencies": {
29
+ "@fluentui/eslint-plugin": "*",
30
+ "@fluentui/react-conformance": "*",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221007-1237.1",
32
+ "@fluentui/scripts": "^1.0.0"
33
+ },
34
+ "dependencies": {
35
+ "@fluentui/react-shared-contexts": "^0.0.0-nightly-20221007-1237.1",
36
+ "@fluentui/react-theme": "^0.0.0-nightly-20221007-1237.1",
37
+ "@fluentui/react-utilities": "^0.0.0-nightly-20221007-1237.1",
38
+ "@griffel/react": "^1.3.0",
39
+ "tslib": "^2.1.0"
40
+ },
41
+ "peerDependencies": {
42
+ "@types/react": ">=16.8.0 <18.0.0",
43
+ "@types/react-dom": ">=16.8.0 <18.0.0",
44
+ "react": ">=16.8.0 <18.0.0",
45
+ "react-dom": ">=16.8.0 <18.0.0"
46
+ },
47
+ "beachball": {}
48
+ }