@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.2
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 +60 -1
- package/CHANGELOG.md +17 -2
- package/MIGRATION.md +8 -8
- package/dist/index.d.ts +6 -1
- package/lib/components/Progress/Progress.types.js.map +1 -1
- package/lib/components/Progress/useProgress.js +4 -2
- package/lib/components/Progress/useProgress.js.map +1 -1
- package/lib/components/Progress/useProgressStyles.js +21 -4
- package/lib/components/Progress/useProgressStyles.js.map +1 -1
- package/lib-commonjs/components/Progress/useProgress.js +4 -2
- package/lib-commonjs/components/Progress/useProgress.js.map +1 -1
- package/lib-commonjs/components/Progress/useProgressStyles.js +21 -4
- package/lib-commonjs/components/Progress/useProgressStyles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,66 @@
|
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 20 Oct 2022 08:35:18 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.2",
|
|
7
|
+
"version": "9.0.0-alpha.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "ololubek@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-progress",
|
|
13
|
+
"commit": "e14e5348f1f08aee8da7cb911a24a811d9f9cb09",
|
|
14
|
+
"comment": "feat: Add shape prop to Progress"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "mgodbolt@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-progress",
|
|
19
|
+
"commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
|
|
20
|
+
"comment": "chore: Bump peer deps to support React 18"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "olfedias@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-progress",
|
|
25
|
+
"commit": "06865dada128321804646582f564ee86d835d174",
|
|
26
|
+
"comment": "chore: Update Griffel to latest version"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-progress",
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.2",
|
|
32
|
+
"commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-progress",
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.1.1",
|
|
38
|
+
"commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-progress",
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.2",
|
|
44
|
+
"commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-progress",
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
|
|
50
|
+
"commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
"none": [
|
|
54
|
+
{
|
|
55
|
+
"author": "mgodbolt@microsoft.com",
|
|
56
|
+
"package": "@fluentui/react-progress",
|
|
57
|
+
"commit": "82650ef8b3d436c039e33f3eb8a658a3d878064f",
|
|
58
|
+
"comment": "prettier update"
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"date": "Thu, 13 Oct 2022 11:02:58 GMT",
|
|
6
65
|
"tag": "@fluentui/react-progress_v9.0.0-alpha.1",
|
|
7
66
|
"version": "9.0.0-alpha.1",
|
|
8
67
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 20 Oct 2022 08:35:18 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.2)
|
|
8
|
+
|
|
9
|
+
Thu, 20 Oct 2022 08:35:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.1..@fluentui/react-progress_v9.0.0-alpha.2)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: Add shape prop to Progress ([PR #25219](https://github.com/microsoft/fluentui/pull/25219) by ololubek@microsoft.com)
|
|
15
|
+
- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
|
|
16
|
+
- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.0.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
|
|
21
|
+
|
|
7
22
|
## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.1)
|
|
8
23
|
|
|
9
|
-
Thu, 13 Oct 2022
|
|
24
|
+
Thu, 13 Oct 2022 11:02:58 GMT
|
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v9.0.0-alpha.1)
|
|
11
26
|
|
|
12
27
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -16,11 +16,11 @@ Here's how the API of v8's `Progress` compares to the one from v9's `Progress` c
|
|
|
16
16
|
|
|
17
17
|
## Property Mapping
|
|
18
18
|
|
|
19
|
-
| v8 `ProgressIndicator` | v9 `Progress`
|
|
20
|
-
| ---------------------- |
|
|
21
|
-
| `barHeight` | `thickness`
|
|
22
|
-
| `className` | `className`
|
|
23
|
-
| `componentRef` | `ref`
|
|
24
|
-
| `description` | use `ProgressField` hint
|
|
25
|
-
| `label` | use `ProgressField` label
|
|
26
|
-
| `percentComplete` | `value`
|
|
19
|
+
| v8 `ProgressIndicator` | v9 `Progress` |
|
|
20
|
+
| ---------------------- | ------------------------- |
|
|
21
|
+
| `barHeight` | `thickness` |
|
|
22
|
+
| `className` | `className` |
|
|
23
|
+
| `componentRef` | `ref` |
|
|
24
|
+
| `description` | use `ProgressField` hint |
|
|
25
|
+
| `label` | use `ProgressField` label |
|
|
26
|
+
| `percentComplete` | `value` |
|
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,11 @@ export declare const progressClassNames: SlotClassNames<ProgressSlots>;
|
|
|
16
16
|
* Progress Props
|
|
17
17
|
*/
|
|
18
18
|
export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
|
|
19
|
+
/**
|
|
20
|
+
* The shape of the bar and track.
|
|
21
|
+
* @default 'rounded'
|
|
22
|
+
*/
|
|
23
|
+
shape?: 'rounded' | 'rectangular';
|
|
19
24
|
/**
|
|
20
25
|
* A decimal number between `0` and `1` (or between `0` and `max` if given),
|
|
21
26
|
* which specifies how much of the task has been completed.
|
|
@@ -50,7 +55,7 @@ export declare type ProgressSlots = {
|
|
|
50
55
|
/**
|
|
51
56
|
* State used in rendering Progress
|
|
52
57
|
*/
|
|
53
|
-
export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;
|
|
58
|
+
export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressProps, 'value'>;
|
|
54
59
|
|
|
55
60
|
/**
|
|
56
61
|
* Render the final JSX of Progress
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.types.js","sourceRoot":"../src/","sources":["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
|
|
1
|
+
{"version":3,"file":"Progress.types.js","sourceRoot":"../src/","sources":["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 * 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 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> &\n Required<Pick<ProgressProps, 'max' | 'shape' | 'thickness'>> &\n Pick<ProgressProps, 'value'>;\n"]}
|
|
@@ -12,9 +12,10 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
|
12
12
|
export const useProgress_unstable = (props, ref) => {
|
|
13
13
|
// Props
|
|
14
14
|
const {
|
|
15
|
+
max = 1.0,
|
|
16
|
+
shape = 'rounded',
|
|
15
17
|
thickness = 'medium',
|
|
16
|
-
value
|
|
17
|
-
max = 1.0
|
|
18
|
+
value
|
|
18
19
|
} = props;
|
|
19
20
|
const root = getNativeElementProps('div', {
|
|
20
21
|
ref,
|
|
@@ -29,6 +30,7 @@ export const useProgress_unstable = (props, ref) => {
|
|
|
29
30
|
});
|
|
30
31
|
const state = {
|
|
31
32
|
max,
|
|
33
|
+
shape,
|
|
32
34
|
thickness,
|
|
33
35
|
value,
|
|
34
36
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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,
|
|
1
|
+
{"version":3,"sources":["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,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD;EAAtD,IAAgE,KAAtE;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAAR,CAAlC;EASA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE;EAD4B,CAAZ,CAA5B;EAIA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,KAF2B;IAG3B,SAH2B;IAI3B,KAJ2B;IAK3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CALe;IAS3B,IAT2B;IAU3B;EAV2B,CAA7B;EAaA,OAAO,KAAP;AACD,CA/BM","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 { max = 1.0, shape = 'rounded', thickness = 'medium', 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: ProgressState = {\n max,\n shape,\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":"../src/"}
|
|
@@ -43,6 +43,18 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
43
43
|
"tu2nte": "f1mcb20s",
|
|
44
44
|
"y0r1ed": "fek7wd8"
|
|
45
45
|
},
|
|
46
|
+
"rounded": {
|
|
47
|
+
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
48
|
+
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
49
|
+
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
50
|
+
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
51
|
+
},
|
|
52
|
+
"rectangular": {
|
|
53
|
+
"Bbmb7ep": ["fzi6hpg", "fyowgf4"],
|
|
54
|
+
"Beyfa6y": ["fyowgf4", "fzi6hpg"],
|
|
55
|
+
"B7oj6ja": ["f3fg2lr", "f13av6d4"],
|
|
56
|
+
"Btl43ni": ["f13av6d4", "f3fg2lr"]
|
|
57
|
+
},
|
|
46
58
|
"medium": {
|
|
47
59
|
"Bqenvij": "f4t8t6x"
|
|
48
60
|
},
|
|
@@ -50,7 +62,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
50
62
|
"Bqenvij": "f6ywr7j"
|
|
51
63
|
}
|
|
52
64
|
}, {
|
|
53
|
-
"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;}"],
|
|
65
|
+
"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;}"],
|
|
54
66
|
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
|
55
67
|
"m": "screen and (forced-colors: active)"
|
|
56
68
|
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
|
@@ -67,7 +79,11 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
67
79
|
const useBarStyles = /*#__PURE__*/__styles({
|
|
68
80
|
"base": {
|
|
69
81
|
"De3pzq": "ftywsgz",
|
|
70
|
-
"Bpep1pd": "f1neahkh"
|
|
82
|
+
"Bpep1pd": "f1neahkh",
|
|
83
|
+
"Bbmb7ep": ["f1d9uwra", "fzibvwi"],
|
|
84
|
+
"Beyfa6y": ["fzibvwi", "f1d9uwra"],
|
|
85
|
+
"B7oj6ja": ["fuoumxm", "f1vtqnvc"],
|
|
86
|
+
"Btl43ni": ["f1vtqnvc", "fuoumxm"]
|
|
71
87
|
},
|
|
72
88
|
"medium": {
|
|
73
89
|
"Bqenvij": "f4t8t6x"
|
|
@@ -92,7 +108,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
92
108
|
"Bv12yb3": ["fw97ye2", "fqbve9y"]
|
|
93
109
|
}
|
|
94
110
|
}, {
|
|
95
|
-
"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;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
|
|
111
|
+
"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;}", ".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;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
|
|
96
112
|
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
97
113
|
"m": "screen and (forced-colors: active)"
|
|
98
114
|
}]],
|
|
@@ -106,6 +122,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
106
122
|
export const useProgressStyles_unstable = state => {
|
|
107
123
|
const {
|
|
108
124
|
max,
|
|
125
|
+
shape,
|
|
109
126
|
thickness,
|
|
110
127
|
value
|
|
111
128
|
} = state;
|
|
@@ -114,7 +131,7 @@ export const useProgressStyles_unstable = state => {
|
|
|
114
131
|
const {
|
|
115
132
|
dir
|
|
116
133
|
} = useFluent();
|
|
117
|
-
state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
|
134
|
+
state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
118
135
|
|
|
119
136
|
if (state.bar) {
|
|
120
137
|
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;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;
|
|
1
|
+
{"version":3,"sources":["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;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAyBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;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;AAuCA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,KAAP;IAAc,SAAd;IAAyB;EAAzB,IAAmC,KAAzC;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,KAAD,CAHuB,EAIjC,UAAU,CAAC,SAAD,CAJuB,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAQA,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,CAlCM","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};\nconst indeterminateProgressRTL = {\n '100%': {\n right: '-100%',\n },\n '0%': {\n right: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the 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 ...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.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationName: indeterminateProgressRTL,\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, shape, 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[shape],\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":"../src/"}
|
|
@@ -20,9 +20,10 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
20
20
|
const useProgress_unstable = (props, ref) => {
|
|
21
21
|
// Props
|
|
22
22
|
const {
|
|
23
|
+
max = 1.0,
|
|
24
|
+
shape = 'rounded',
|
|
23
25
|
thickness = 'medium',
|
|
24
|
-
value
|
|
25
|
-
max = 1.0
|
|
26
|
+
value
|
|
26
27
|
} = props;
|
|
27
28
|
const root = react_utilities_1.getNativeElementProps('div', {
|
|
28
29
|
ref,
|
|
@@ -37,6 +38,7 @@ const useProgress_unstable = (props, ref) => {
|
|
|
37
38
|
});
|
|
38
39
|
const state = {
|
|
39
40
|
max,
|
|
41
|
+
shape,
|
|
40
42
|
thickness,
|
|
41
43
|
value,
|
|
42
44
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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,
|
|
1
|
+
{"version":3,"sources":["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,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD;EAAtD,IAAgE,KAAtE;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAA7B,CAAb;EASA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE;EAD4B,CAA5B,CAAZ;EAIA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,KAF2B;IAG3B,SAH2B;IAI3B,KAJ2B;IAK3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CALe;IAS3B,IAT2B;IAU3B;EAV2B,CAA7B;EAaA,OAAO,KAAP;AACD,CA/BM;;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 { max = 1.0, shape = 'rounded', thickness = 'medium', 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: ProgressState = {\n max,\n shape,\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":"../src/"}
|
|
@@ -53,6 +53,18 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
53
53
|
"tu2nte": "f1mcb20s",
|
|
54
54
|
"y0r1ed": "fek7wd8"
|
|
55
55
|
},
|
|
56
|
+
"rounded": {
|
|
57
|
+
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
58
|
+
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
59
|
+
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
60
|
+
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
61
|
+
},
|
|
62
|
+
"rectangular": {
|
|
63
|
+
"Bbmb7ep": ["fzi6hpg", "fyowgf4"],
|
|
64
|
+
"Beyfa6y": ["fyowgf4", "fzi6hpg"],
|
|
65
|
+
"B7oj6ja": ["f3fg2lr", "f13av6d4"],
|
|
66
|
+
"Btl43ni": ["f13av6d4", "f3fg2lr"]
|
|
67
|
+
},
|
|
56
68
|
"medium": {
|
|
57
69
|
"Bqenvij": "f4t8t6x"
|
|
58
70
|
},
|
|
@@ -60,7 +72,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
60
72
|
"Bqenvij": "f6ywr7j"
|
|
61
73
|
}
|
|
62
74
|
}, {
|
|
63
|
-
"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;}"],
|
|
75
|
+
"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;}"],
|
|
64
76
|
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
|
65
77
|
"m": "screen and (forced-colors: active)"
|
|
66
78
|
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
|
@@ -77,7 +89,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
77
89
|
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
78
90
|
"base": {
|
|
79
91
|
"De3pzq": "ftywsgz",
|
|
80
|
-
"Bpep1pd": "f1neahkh"
|
|
92
|
+
"Bpep1pd": "f1neahkh",
|
|
93
|
+
"Bbmb7ep": ["f1d9uwra", "fzibvwi"],
|
|
94
|
+
"Beyfa6y": ["fzibvwi", "f1d9uwra"],
|
|
95
|
+
"B7oj6ja": ["fuoumxm", "f1vtqnvc"],
|
|
96
|
+
"Btl43ni": ["f1vtqnvc", "fuoumxm"]
|
|
81
97
|
},
|
|
82
98
|
"medium": {
|
|
83
99
|
"Bqenvij": "f4t8t6x"
|
|
@@ -102,7 +118,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
102
118
|
"Bv12yb3": ["fw97ye2", "fqbve9y"]
|
|
103
119
|
}
|
|
104
120
|
}, {
|
|
105
|
-
"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;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
|
|
121
|
+
"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;}", ".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;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
|
|
106
122
|
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
107
123
|
"m": "screen and (forced-colors: active)"
|
|
108
124
|
}]],
|
|
@@ -116,6 +132,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
116
132
|
const useProgressStyles_unstable = state => {
|
|
117
133
|
const {
|
|
118
134
|
max,
|
|
135
|
+
shape,
|
|
119
136
|
thickness,
|
|
120
137
|
value
|
|
121
138
|
} = state;
|
|
@@ -124,7 +141,7 @@ const useProgressStyles_unstable = state => {
|
|
|
124
141
|
const {
|
|
125
142
|
dir
|
|
126
143
|
} = react_shared_contexts_1.useFluent_unstable();
|
|
127
|
-
state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
|
144
|
+
state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
128
145
|
|
|
129
146
|
if (state.bar) {
|
|
130
147
|
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;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;
|
|
1
|
+
{"version":3,"sources":["components/Progress/useProgressStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { 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};\nconst indeterminateProgressRTL = {\n '100%': {\n right: '-100%',\n },\n '0%': {\n right: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the 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 ...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.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationName: indeterminateProgressRTL,\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, shape, 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[shape],\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":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.2",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,21 +28,21 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.16",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-shared-contexts": "^9.0.
|
|
36
|
-
"@fluentui/react-theme": "^9.1.
|
|
37
|
-
"@fluentui/react-utilities": "^9.1.
|
|
38
|
-
"@griffel/react": "^1.4.
|
|
35
|
+
"@fluentui/react-shared-contexts": "^9.0.2",
|
|
36
|
+
"@fluentui/react-theme": "^9.1.1",
|
|
37
|
+
"@fluentui/react-utilities": "^9.1.2",
|
|
38
|
+
"@griffel/react": "^1.4.1",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@types/react": ">=16.8.0 <
|
|
43
|
-
"@types/react-dom": ">=16.8.0 <
|
|
44
|
-
"react": ">=16.8.0 <
|
|
45
|
-
"react-dom": ">=16.8.0 <
|
|
42
|
+
"@types/react": ">=16.8.0 <19.0.0",
|
|
43
|
+
"@types/react-dom": ">=16.8.0 <19.0.0",
|
|
44
|
+
"react": ">=16.8.0 <19.0.0",
|
|
45
|
+
"react-dom": ">=16.8.0 <19.0.0"
|
|
46
46
|
},
|
|
47
47
|
"beachball": {
|
|
48
48
|
"disallowedChangeTypes": [
|