@fluentui/react-alert 9.0.0-beta.21 → 9.0.0-beta.23

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.
Files changed (26) hide show
  1. package/CHANGELOG.json +93 -1
  2. package/CHANGELOG.md +28 -2
  3. package/lib/components/Alert/Alert.js +0 -1
  4. package/lib/components/Alert/Alert.js.map +1 -1
  5. package/lib/components/Alert/renderAlert.js +8 -4
  6. package/lib/components/Alert/renderAlert.js.map +1 -1
  7. package/lib/components/Alert/useAlert.js +0 -9
  8. package/lib/components/Alert/useAlert.js.map +1 -1
  9. package/lib/components/Alert/useAlertStyles.js +79 -89
  10. package/lib/components/Alert/useAlertStyles.js.map +1 -1
  11. package/lib-commonjs/Alert.js +0 -2
  12. package/lib-commonjs/Alert.js.map +1 -1
  13. package/lib-commonjs/components/Alert/Alert.js +0 -6
  14. package/lib-commonjs/components/Alert/Alert.js.map +1 -1
  15. package/lib-commonjs/components/Alert/Alert.types.js.map +1 -1
  16. package/lib-commonjs/components/Alert/index.js +0 -6
  17. package/lib-commonjs/components/Alert/index.js.map +1 -1
  18. package/lib-commonjs/components/Alert/renderAlert.js +8 -8
  19. package/lib-commonjs/components/Alert/renderAlert.js.map +1 -1
  20. package/lib-commonjs/components/Alert/useAlert.js +0 -16
  21. package/lib-commonjs/components/Alert/useAlert.js.map +1 -1
  22. package/lib-commonjs/components/Alert/useAlertStyles.js +79 -94
  23. package/lib-commonjs/components/Alert/useAlertStyles.js.map +1 -1
  24. package/lib-commonjs/index.js +0 -2
  25. package/lib-commonjs/index.js.map +1 -1
  26. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,99 @@
2
2
  "name": "@fluentui/react-alert",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 21 Dec 2022 10:17:16 GMT",
5
+ "date": "Mon, 09 Jan 2023 14:31:49 GMT",
6
+ "tag": "@fluentui/react-alert_v9.0.0-beta.23",
7
+ "version": "9.0.0-beta.23",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-alert",
13
+ "comment": "Bump @fluentui/react-avatar to v9.2.12",
14
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-alert",
19
+ "comment": "Bump @fluentui/react-button to v9.1.14",
20
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-alert",
25
+ "comment": "Bump @fluentui/react-tabster to v9.3.6",
26
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-alert",
31
+ "comment": "Bump @fluentui/react-utilities to v9.4.0",
32
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Wed, 04 Jan 2023 01:40:49 GMT",
39
+ "tag": "@fluentui/react-alert_v9.0.0-beta.22",
40
+ "version": "9.0.0-beta.22",
41
+ "comments": {
42
+ "none": [
43
+ {
44
+ "author": "martinhochel@microsoft.com",
45
+ "package": "@fluentui/react-alert",
46
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
47
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
48
+ },
49
+ {
50
+ "author": "martinhochel@microsoft.com",
51
+ "package": "@fluentui/react-alert",
52
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
53
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
54
+ }
55
+ ],
56
+ "prerelease": [
57
+ {
58
+ "author": "olfedias@microsoft.com",
59
+ "package": "@fluentui/react-alert",
60
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
61
+ "comment": "chore: Update Griffel to latest version"
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-alert",
66
+ "comment": "Bump @fluentui/react-avatar to v9.2.11",
67
+ "commit": "3e322d15529451be153e97298873253e21af4082"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-alert",
72
+ "comment": "Bump @fluentui/react-button to v9.1.13",
73
+ "commit": "3e322d15529451be153e97298873253e21af4082"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-alert",
78
+ "comment": "Bump @fluentui/react-tabster to v9.3.5",
79
+ "commit": "3e322d15529451be153e97298873253e21af4082"
80
+ },
81
+ {
82
+ "author": "beachball",
83
+ "package": "@fluentui/react-alert",
84
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
85
+ "commit": "3e322d15529451be153e97298873253e21af4082"
86
+ },
87
+ {
88
+ "author": "beachball",
89
+ "package": "@fluentui/react-alert",
90
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
91
+ "commit": "3e322d15529451be153e97298873253e21af4082"
92
+ }
93
+ ]
94
+ }
95
+ },
96
+ {
97
+ "date": "Wed, 21 Dec 2022 10:20:33 GMT",
6
98
  "tag": "@fluentui/react-alert_v9.0.0-beta.21",
7
99
  "version": "9.0.0-beta.21",
8
100
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,38 @@
1
1
  # Change Log - @fluentui/react-alert
2
2
 
3
- This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.23)
8
+
9
+ Mon, 09 Jan 2023 14:31:49 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.22..@fluentui/react-alert_v9.0.0-beta.23)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-avatar to v9.2.12 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
15
+ - Bump @fluentui/react-button to v9.1.14 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
18
+
19
+ ## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.22)
20
+
21
+ Wed, 04 Jan 2023 01:40:49 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.21..@fluentui/react-alert_v9.0.0-beta.22)
23
+
24
+ ### Changes
25
+
26
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
27
+ - Bump @fluentui/react-avatar to v9.2.11 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
28
+ - Bump @fluentui/react-button to v9.1.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
29
+ - Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
30
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
31
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
32
+
7
33
  ## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.21)
8
34
 
9
- Wed, 21 Dec 2022 10:17:16 GMT
35
+ Wed, 21 Dec 2022 10:20:33 GMT
10
36
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.20..@fluentui/react-alert_v9.0.0-beta.21)
11
37
 
12
38
  ### Changes
package/lib/components/Alert/Alert.js CHANGED
@@ -6,7 +6,6 @@ import { useAlertStyles_unstable } from './useAlertStyles';
6
6
  * An Alert component displays a brief, important message to attract a user's attention
7
7
  * without interrupting their current task.
8
8
  */
9
-
10
9
  export const Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
11
10
  const state = useAlert_unstable(props, ref);
12
11
  useAlertStyles_unstable(state);
package/lib/components/Alert/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAKA;;;AAGG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAK1D;;;;AAIA,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGN,iBAAiB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE3CJ,uBAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAoC;AAErCJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","renderAlert_unstable","useAlert_unstable","useAlertStyles_unstable","Alert","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"]}
package/lib/components/Alert/renderAlert.js CHANGED
@@ -5,10 +5,14 @@ export const renderAlert_unstable = state => {
5
5
  slots,
6
6
  slotProps
7
7
  } = getSlots(state);
8
- return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
9
- }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
10
- }), slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
11
- }), slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
8
+ return /*#__PURE__*/React.createElement(slots.root, {
9
+ ...slotProps.root
10
+ }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
11
+ ...slotProps.icon
12
+ }), slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, {
13
+ ...slotProps.avatar
14
+ }), slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, {
15
+ ...slotProps.action
12
16
  }));
13
17
  };
14
18
  //# sourceMappingURL=renderAlert.js.map
package/lib/components/Alert/renderAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,QAAQ,QAAQ,2BAA2B;AAIpD,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,IAAI,iBAAIP,oBAACI,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,EAChDH,KAAK,CAACI,MAAM,iBAAIR,oBAACI,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI,EACtDH,SAAS,CAACC,IAAI,CAACG,QAAQ,EACvBL,KAAK,CAACM,MAAM,iBAAIV,oBAACI,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,CAC5C;AAEjB,CAAC","names":["React","getSlots","renderAlert_unstable","state","slots","slotProps","root","icon","avatar","children","action"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/renderAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"]}
package/lib/components/Alert/useAlert.js CHANGED
@@ -12,37 +12,30 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
12
12
  * @param props - props from this instance of Alert
13
13
  * @param ref - reference to root HTMLElement of Alert
14
14
  */
15
-
16
15
  export const useAlert_unstable = (props, ref) => {
17
16
  const {
18
17
  appearance = 'primary',
19
18
  intent
20
19
  } = props;
21
20
  /** Determine the role and icon to render based on the intent */
22
-
23
21
  let defaultIcon;
24
22
  let defaultRole = 'status';
25
-
26
23
  switch (intent) {
27
24
  case 'success':
28
25
  defaultIcon = /*#__PURE__*/React.createElement(CheckmarkCircleFilled, null);
29
26
  break;
30
-
31
27
  case 'error':
32
28
  defaultIcon = /*#__PURE__*/React.createElement(DismissCircleFilled, null);
33
29
  defaultRole = 'alert';
34
30
  break;
35
-
36
31
  case 'warning':
37
32
  defaultIcon = /*#__PURE__*/React.createElement(WarningFilled, null);
38
33
  defaultRole = 'alert';
39
34
  break;
40
-
41
35
  case 'info':
42
36
  defaultIcon = /*#__PURE__*/React.createElement(InfoFilled, null);
43
37
  break;
44
38
  }
45
-
46
39
  const action = resolveShorthand(props.action, {
47
40
  defaultProps: {
48
41
  appearance: 'transparent'
@@ -51,7 +44,6 @@ export const useAlert_unstable = (props, ref) => {
51
44
  const avatar = resolveShorthand(props.avatar);
52
45
  let icon;
53
46
  /** Avatar prop takes precedence over the icon or intent prop */
54
-
55
47
  if (!avatar) {
56
48
  icon = resolveShorthand(props.icon, {
57
49
  defaultProps: {
@@ -60,7 +52,6 @@ export const useAlert_unstable = (props, ref) => {
60
52
  required: !!props.intent
61
53
  });
62
54
  }
63
-
64
55
  return {
65
56
  action,
66
57
  appearance,
package/lib/components/Alert/useAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAAf,CAA/B;EACA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAA/B;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAAb,CAAvB;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,MAHE;MAIV,MAAM,EAAE;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAAR;EAZtB,CAAP;AAmBD,CAvDM","sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,uBAAuB;AAC7G,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAInF;;;;;;;;;AASA,OAAO,MAAMC,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC;EAAM,CAAE,GAAGH,KAAK;EAEhD;EACA,IAAII,WAAW;EACf,IAAIC,WAAW,GAAG,QAAQ;EAC1B,QAAQF,MAAM;IACZ,KAAK,SAAS;MACZC,WAAW,gBAAGd,oBAACG,qBAAqB,OAAG;MACvC;IACF,KAAK,OAAO;MACVW,WAAW,gBAAGd,oBAACI,mBAAmB,OAAG;MACrCW,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,SAAS;MACZD,WAAW,gBAAGd,oBAACM,aAAa,OAAG;MAC/BS,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,MAAM;MACTD,WAAW,gBAAGd,oBAACK,UAAU,OAAG;MAC5B;EAAM;EAGV,MAAMW,MAAM,GAAGR,gBAAgB,CAACE,KAAK,CAACM,MAAM,EAAE;IAAEC,YAAY,EAAE;MAAEL,UAAU,EAAE;IAAa;EAAE,CAAE,CAAC;EAC9F,MAAMM,MAAM,GAAGV,gBAAgB,CAACE,KAAK,CAACQ,MAAM,CAAC;EAC7C,IAAIC,IAAI;EACR;EACA,IAAI,CAACD,MAAM,EAAE;IACXC,IAAI,GAAGX,gBAAgB,CAACE,KAAK,CAACS,IAAI,EAAE;MAClCF,YAAY,EAAE;QACZG,QAAQ,EAAEN;OACX;MACDO,QAAQ,EAAE,CAAC,CAACX,KAAK,CAACG;KACnB,CAAC;;EAGJ,OAAO;IACLG,MAAM;IACNJ,UAAU;IACVM,MAAM;IACNI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,IAAI,EAAE,MAAM;MACZH,MAAM,EAAEd,MAAM;MACdgB,MAAM,EAAEjB;KACT;IACDkB,IAAI;IACJN,MAAM;IACNU,IAAI,EAAEhB,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACHa,IAAI,EAAET,WAAW;MACjBK,QAAQ,EAAEV,KAAK,CAACU,QAAQ;MACxB,GAAGV;KACJ;GACF;AACH,CAAC","names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getNativeElementProps","resolveShorthand","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","action","defaultProps","avatar","icon","children","required","components","root","role"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"]}
package/lib/components/Alert/useAlertStyles.js CHANGED
@@ -7,120 +7,114 @@ export const alertClassNames = {
7
7
  action: 'fui-Alert__action',
8
8
  avatar: 'fui-Alert__avatar'
9
9
  };
10
-
11
10
  const useStyles = /*#__PURE__*/__styles({
12
- "root": {
13
- "mc9l5x": "f22iagw",
14
- "Bt984gj": "f122n59",
15
- "sshi5w": "f5pgtk9",
16
- "z8tnut": "f1g0x7ka",
17
- "z189sj": ["f11qrl6u", "fjlbh76"],
18
- "Byoj8tv": "f1qch9an",
19
- "uwmqm3": ["fjlbh76", "f11qrl6u"],
20
- "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
21
- "Beyfa6y": ["f1bjk9e1", "fff7au0"],
22
- "B7oj6ja": ["fwsfkhu", "f8wkphi"],
23
- "Btl43ni": ["f8wkphi", "fwsfkhu"],
24
- "B4j52fo": "f5ogflp",
25
- "Bekrc4i": ["f1hqa2wf", "finvdd3"],
26
- "Bn0qgzm": "f1f09k3d",
27
- "ibv6hh": ["finvdd3", "f1hqa2wf"],
28
- "icvyot": "fzkkow9",
29
- "vrafjx": ["fcdblym", "fjik90z"],
30
- "oivjwe": "fg706s2",
31
- "wvpqe5": ["fjik90z", "fcdblym"],
32
- "g2u3we": "fghlq4f",
33
- "h3c5rm": ["f1gn591s", "fjscplz"],
34
- "B9xav0g": "fb073pr",
35
- "zhjwy3": ["fjscplz", "f1gn591s"],
36
- "E5pizo": "fz58gqq",
37
- "Be2twd7": "fkhj508",
38
- "Bhrd7zp": "fl43uef",
39
- "sj55zd": "f19n0e5",
40
- "De3pzq": "fxugw4r"
11
+ root: {
12
+ mc9l5x: "f22iagw",
13
+ Bt984gj: "f122n59",
14
+ sshi5w: "f5pgtk9",
15
+ z8tnut: "f1g0x7ka",
16
+ z189sj: ["f11qrl6u", "fjlbh76"],
17
+ Byoj8tv: "f1qch9an",
18
+ uwmqm3: ["fjlbh76", "f11qrl6u"],
19
+ Bbmb7ep: ["fff7au0", "f1bjk9e1"],
20
+ Beyfa6y: ["f1bjk9e1", "fff7au0"],
21
+ B7oj6ja: ["fwsfkhu", "f8wkphi"],
22
+ Btl43ni: ["f8wkphi", "fwsfkhu"],
23
+ B4j52fo: "f5ogflp",
24
+ Bekrc4i: ["f1hqa2wf", "finvdd3"],
25
+ Bn0qgzm: "f1f09k3d",
26
+ ibv6hh: ["finvdd3", "f1hqa2wf"],
27
+ icvyot: "fzkkow9",
28
+ vrafjx: ["fcdblym", "fjik90z"],
29
+ oivjwe: "fg706s2",
30
+ wvpqe5: ["fjik90z", "fcdblym"],
31
+ g2u3we: "fghlq4f",
32
+ h3c5rm: ["f1gn591s", "fjscplz"],
33
+ B9xav0g: "fb073pr",
34
+ zhjwy3: ["fjscplz", "f1gn591s"],
35
+ E5pizo: "fz58gqq",
36
+ Be2twd7: "fkhj508",
37
+ Bhrd7zp: "fl43uef",
38
+ sj55zd: "f19n0e5",
39
+ De3pzq: "fxugw4r"
41
40
  },
42
- "inverted": {
43
- "sj55zd": "f1w7i9ko",
44
- "De3pzq": "f5pduvr"
41
+ inverted: {
42
+ sj55zd: "f1w7i9ko",
43
+ De3pzq: "f5pduvr"
45
44
  },
46
- "icon": {
47
- "Bqenvij": "fd461yt",
48
- "Be2twd7": "f4ybsrx",
49
- "z8tnut": "f1g0x7ka",
50
- "z189sj": ["f19lj068", "f177v4lu"],
51
- "Byoj8tv": "f1qch9an",
52
- "uwmqm3": ["f1cnd47f", "fhxju0i"]
45
+ icon: {
46
+ Bqenvij: "fd461yt",
47
+ Be2twd7: "f4ybsrx",
48
+ z8tnut: "f1g0x7ka",
49
+ z189sj: ["f19lj068", "f177v4lu"],
50
+ Byoj8tv: "f1qch9an",
51
+ uwmqm3: ["f1cnd47f", "fhxju0i"]
53
52
  },
54
- "avatar": {
55
- "B6of3ja": "f1hu3pq6",
56
- "t21cq0": ["f1phki43", "ff9s3yw"],
57
- "jrapky": "f19f4twv",
58
- "Frg6f3": ["f1tyq0we", "f11qmguv"]
53
+ avatar: {
54
+ B6of3ja: "f1hu3pq6",
55
+ t21cq0: ["f1phki43", "ff9s3yw"],
56
+ jrapky: "f19f4twv",
57
+ Frg6f3: ["f1tyq0we", "f11qmguv"]
59
58
  },
60
- "action": {
61
- "z8tnut": "f1sbtcvk",
62
- "z189sj": ["f81rol6", "frdkuqy"],
63
- "Byoj8tv": "fdghr9",
64
- "uwmqm3": ["frdkuqy", "f81rol6"],
65
- "Bf4jedk": "fy77jfu",
66
- "Frg6f3": ["fcgxt0o", "f1ujusj6"],
67
- "sj55zd": "f16muhyy"
59
+ action: {
60
+ z8tnut: "f1sbtcvk",
61
+ z189sj: ["f81rol6", "frdkuqy"],
62
+ Byoj8tv: "fdghr9",
63
+ uwmqm3: ["frdkuqy", "f81rol6"],
64
+ Bf4jedk: "fy77jfu",
65
+ Frg6f3: ["fcgxt0o", "f1ujusj6"],
66
+ sj55zd: "f16muhyy"
68
67
  }
69
68
  }, {
70
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
69
+ d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
71
70
  });
72
-
73
71
  const useIntentIconStyles = /*#__PURE__*/__styles({
74
- "success": {
75
- "sj55zd": "f1m7fhi8"
72
+ success: {
73
+ sj55zd: "f1m7fhi8"
76
74
  },
77
- "error": {
78
- "sj55zd": "f1whyuy6"
75
+ error: {
76
+ sj55zd: "f1whyuy6"
79
77
  },
80
- "warning": {
81
- "sj55zd": "fpti2h4"
78
+ warning: {
79
+ sj55zd: "fpti2h4"
82
80
  },
83
- "info": {
84
- "sj55zd": "fkfq4zb"
81
+ info: {
82
+ sj55zd: "fkfq4zb"
85
83
  }
86
84
  }, {
87
- "d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
85
+ d: [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
88
86
  });
89
-
90
87
  const useIntentIconStylesInverted = /*#__PURE__*/__styles({
91
- "success": {
92
- "sj55zd": "f1pvjcpr"
88
+ success: {
89
+ sj55zd: "f1pvjcpr"
93
90
  },
94
- "error": {
95
- "sj55zd": "fcrp5ll"
91
+ error: {
92
+ sj55zd: "fcrp5ll"
96
93
  },
97
- "warning": {
98
- "sj55zd": "f1r8f1cl"
94
+ warning: {
95
+ sj55zd: "f1r8f1cl"
99
96
  },
100
- "info": {
101
- "sj55zd": "f1w7i9ko"
97
+ info: {
98
+ sj55zd: "f1w7i9ko"
102
99
  }
103
100
  }, {
104
- "d": [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
101
+ d: [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
105
102
  });
106
-
107
103
  const useActionButtonColorInverted = /*#__PURE__*/__styles({
108
- "action": {
109
- "sj55zd": "f1qz2gb0",
110
- "B8q5s1w": "fa5e339",
111
- "Bci5o5g": ["fk4svks", "fqzoz0o"],
112
- "n8qw10": "fw8q0i0",
113
- "Bdrgwmp": ["fqzoz0o", "fk4svks"],
114
- "Bfpq7zp": "f1dlk4fq"
104
+ action: {
105
+ sj55zd: "f1qz2gb0",
106
+ B8q5s1w: "fa5e339",
107
+ Bci5o5g: ["fk4svks", "fqzoz0o"],
108
+ n8qw10: "fw8q0i0",
109
+ Bdrgwmp: ["fqzoz0o", "fk4svks"],
110
+ Bfpq7zp: "f1dlk4fq"
115
111
  }
116
112
  }, {
117
- "d": [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
113
+ d: [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
118
114
  });
119
115
  /**
120
116
  * Apply styling to the Alert slots based on the state
121
117
  */
122
-
123
-
124
118
  export const useAlertStyles_unstable = state => {
125
119
  const inverted = state.appearance === 'inverted';
126
120
  const styles = useStyles();
@@ -128,20 +122,16 @@ export const useAlertStyles_unstable = state => {
128
122
  const intentIconStylesInverted = useIntentIconStylesInverted();
129
123
  const actionStylesInverted = useActionButtonColorInverted();
130
124
  state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
131
-
132
125
  if (state.icon) {
133
126
  state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
134
127
  }
135
-
136
128
  if (state.avatar) {
137
129
  state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);
138
130
  }
139
-
140
131
  if (state.action) {
141
132
  // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
142
133
  state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
143
134
  }
144
-
145
135
  return state;
146
136
  };
147
137
  //# sourceMappingURL=useAlertStyles.js.map
package/lib/components/Alert/useAlertStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAApD;;AAOP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAkCA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;;AAeA,MAAM,2BAA2B,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAApC;;AAeA,MAAM,4BAA4B,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAArC;AAaA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAN,KAAqB,UAAtC;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,uBAAuB,GAAG,mBAAmB,EAAnD;EACA,MAAM,wBAAwB,GAAG,2BAA2B,EAA5D;EACA,MAAM,oBAAoB,GAAG,4BAA4B,EAAzD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,KAAiB,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,MAAP,CAA3B,GAA4C,uBAAuB,CAAC,KAAK,CAAC,MAAP,CAA5F,CAHiC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB;IACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,eAAe,CAAC,MADmB,EAEnC,MAAM,CAAC,MAF4B,EAGnC,QAAQ,IAAI,oBAAoB,CAAC,MAHE,EAInC,KAAK,CAAC,MAAN,CAAa,SAJsB,CAArC;EAMD;;EAED,OAAO,KAAP;AACD,CAtCM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AAIzE,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE,mBAAmB;EAC3BC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgChB;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAa1B;AAEF,MAAMC,2BAA2B,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAalC;AAEF,MAAMC,4BAA4B,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWnC;AAEF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAMC,QAAQ,GAAGD,KAAK,CAACE,UAAU,KAAK,UAAU;EAChD,MAAMC,MAAM,GAAGR,SAAS,EAAE;EAC1B,MAAMS,uBAAuB,GAAGR,mBAAmB,EAAE;EACrD,MAAMS,wBAAwB,GAAGR,2BAA2B,EAAE;EAC9D,MAAMS,oBAAoB,GAAGR,4BAA4B,EAAE;EAE3DE,KAAK,CAACT,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CACjCG,eAAe,CAACC,IAAI,EACpBY,MAAM,CAACZ,IAAI,EACXU,QAAQ,IAAIE,MAAM,CAACF,QAAQ,EAC3BD,KAAK,CAACT,IAAI,CAACgB,SAAS,CACrB;EAED,IAAIP,KAAK,CAACR,IAAI,EAAE;IACdQ,KAAK,CAACR,IAAI,CAACe,SAAS,GAAGpB,YAAY,CACjCG,eAAe,CAACE,IAAI,EACpBW,MAAM,CAACX,IAAI,EACXQ,KAAK,CAACQ,MAAM,KAAKP,QAAQ,GAAGI,wBAAwB,CAACL,KAAK,CAACQ,MAAM,CAAC,GAAGJ,uBAAuB,CAACJ,KAAK,CAACQ,MAAM,CAAC,CAAC,EAC3GR,KAAK,CAACR,IAAI,CAACe,SAAS,CACrB;;EAGH,IAAIP,KAAK,CAACN,MAAM,EAAE;IAChBM,KAAK,CAACN,MAAM,CAACa,SAAS,GAAGpB,YAAY,CAACG,eAAe,CAACI,MAAM,EAAES,MAAM,CAACT,MAAM,EAAEM,KAAK,CAACN,MAAM,CAACa,SAAS,CAAC;;EAGtG,IAAIP,KAAK,CAACP,MAAM,EAAE;IAChB;IACAO,KAAK,CAACP,MAAM,CAACc,SAAS,GAAGpB,YAAY,CACnCG,eAAe,CAACG,MAAM,EACtBU,MAAM,CAACV,MAAM,EACbQ,QAAQ,IAAIK,oBAAoB,CAACb,MAAM,EACvCO,KAAK,CAACP,MAAM,CAACc,SAAS,CACvB;;EAGH,OAAOP,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","useIntentIconStyles","useIntentIconStylesInverted","useActionButtonColorInverted","useAlertStyles_unstable","state","inverted","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"]}
package/lib-commonjs/Alert.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./components/Alert/index"), exports);
10
8
  //# sourceMappingURL=Alert.js.map
package/lib-commonjs/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/Alert.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Alert/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/Alert.ts"],"sourcesContent":["export * from './components/Alert/index';\n"]}
package/lib-commonjs/components/Alert/Alert.js CHANGED
@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Alert = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const renderAlert_1 = /*#__PURE__*/require("./renderAlert");
11
-
12
9
  const useAlert_1 = /*#__PURE__*/require("./useAlert");
13
-
14
10
  const useAlertStyles_1 = /*#__PURE__*/require("./useAlertStyles");
15
11
  /**
16
12
  * An Alert component displays a brief, important message to attract a user's attention
17
13
  * without interrupting their current task.
18
14
  */
19
-
20
-
21
15
  exports.Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
22
16
  const state = useAlert_1.useAlert_unstable(props, ref);
23
17
  useAlertStyles_1.useAlertStyles_unstable(state);
package/lib-commonjs/components/Alert/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAKA;;;AAGG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAKA;;;;AAIaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAoC;AAErCL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useAlert_1","useAlertStyles_1","renderAlert_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"]}
package/lib-commonjs/components/Alert/Alert.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
package/lib-commonjs/components/Alert/index.js CHANGED
@@ -3,16 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./Alert"), exports);
10
-
11
8
  tslib_1.__exportStar(require("./Alert.types"), exports);
12
-
13
9
  tslib_1.__exportStar(require("./renderAlert"), exports);
14
-
15
10
  tslib_1.__exportStar(require("./useAlert"), exports);
16
-
17
11
  tslib_1.__exportStar(require("./useAlertStyles"), exports);
18
12
  //# sourceMappingURL=index.js.map
package/lib-commonjs/components/Alert/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/index.ts"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"]}
package/lib-commonjs/components/Alert/renderAlert.js CHANGED
@@ -4,22 +4,22 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.renderAlert_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
9
  const renderAlert_unstable = state => {
13
10
  const {
14
11
  slots,
15
12
  slotProps
16
13
  } = react_utilities_1.getSlots(state);
17
- return React.createElement(slots.root, { ...slotProps.root
18
- }, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
19
- }), slots.avatar && React.createElement(slots.avatar, { ...slotProps.avatar
20
- }), slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
14
+ return React.createElement(slots.root, {
15
+ ...slotProps.root
16
+ }, slots.icon && React.createElement(slots.icon, {
17
+ ...slotProps.icon
18
+ }), slots.avatar && React.createElement(slots.avatar, {
19
+ ...slotProps.avatar
20
+ }), slotProps.root.children, slots.action && React.createElement(slots.action, {
21
+ ...slotProps.action
21
22
  }));
22
23
  };
23
-
24
24
  exports.renderAlert_unstable = renderAlert_unstable;
25
25
  //# sourceMappingURL=renderAlert.js.map
package/lib-commonjs/components/Alert/renderAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/renderAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AAIO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,IAAI,IAAIF,oBAACH,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAChDL,KAAK,CAACM,MAAM,IAAIH,oBAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,EACtDL,SAAS,CAACG,IAAI,CAACG,QAAQ,EACvBP,KAAK,CAACQ,MAAM,IAAIL,oBAACH,KAAK,CAACQ,MAAM;IAAA,GAAKP,SAAS,CAACO;EAAM,EAAI,CAC5C;AAEjB,CAAC;AAXYC,4BAAoB","names":["renderAlert_unstable","state","slots","slotProps","react_utilities_1","React","root","icon","avatar","children","action","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/renderAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"]}
package/lib-commonjs/components/Alert/useAlert.js CHANGED
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useAlert_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_avatar_1 = /*#__PURE__*/require("@fluentui/react-avatar");
11
-
12
9
  const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
13
-
14
10
  const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
15
-
16
11
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
17
12
  /**
18
13
  * Create the state required to render Alert.
@@ -23,38 +18,30 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
23
18
  * @param props - props from this instance of Alert
24
19
  * @param ref - reference to root HTMLElement of Alert
25
20
  */
26
-
27
-
28
21
  const useAlert_unstable = (props, ref) => {
29
22
  const {
30
23
  appearance = 'primary',
31
24
  intent
32
25
  } = props;
33
26
  /** Determine the role and icon to render based on the intent */
34
-
35
27
  let defaultIcon;
36
28
  let defaultRole = 'status';
37
-
38
29
  switch (intent) {
39
30
  case 'success':
40
31
  defaultIcon = React.createElement(react_icons_1.CheckmarkCircleFilled, null);
41
32
  break;
42
-
43
33
  case 'error':
44
34
  defaultIcon = React.createElement(react_icons_1.DismissCircleFilled, null);
45
35
  defaultRole = 'alert';
46
36
  break;
47
-
48
37
  case 'warning':
49
38
  defaultIcon = React.createElement(react_icons_1.WarningFilled, null);
50
39
  defaultRole = 'alert';
51
40
  break;
52
-
53
41
  case 'info':
54
42
  defaultIcon = React.createElement(react_icons_1.InfoFilled, null);
55
43
  break;
56
44
  }
57
-
58
45
  const action = react_utilities_1.resolveShorthand(props.action, {
59
46
  defaultProps: {
60
47
  appearance: 'transparent'
@@ -63,7 +50,6 @@ const useAlert_unstable = (props, ref) => {
63
50
  const avatar = react_utilities_1.resolveShorthand(props.avatar);
64
51
  let icon;
65
52
  /** Avatar prop takes precedence over the icon or intent prop */
66
-
67
53
  if (!avatar) {
68
54
  icon = react_utilities_1.resolveShorthand(props.icon, {
69
55
  defaultProps: {
@@ -72,7 +58,6 @@ const useAlert_unstable = (props, ref) => {
72
58
  required: !!props.intent
73
59
  });
74
60
  }
75
-
76
61
  return {
77
62
  action,
78
63
  appearance,
@@ -93,6 +78,5 @@ const useAlert_unstable = (props, ref) => {
93
78
  })
94
79
  };
95
80
  };
96
-
97
81
  exports.useAlert_unstable = useAlert_unstable;
98
82
  //# sourceMappingURL=useAlert.js.map
package/lib-commonjs/components/Alert/useAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAA/B,CAAf;EACA,MAAM,MAAM,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAAf;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAA7B,CAAP;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,cAAA,CAAA,MAHE;MAIV,MAAM,EAAE,cAAA,CAAA;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAA7B;EAZD,CAAP;AAmBD,CAvDM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AAIA;;;;;;;;;AASO,MAAMA,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC;EAAM,CAAE,GAAGH,KAAK;EAEhD;EACA,IAAII,WAAW;EACf,IAAIC,WAAW,GAAG,QAAQ;EAC1B,QAAQF,MAAM;IACZ,KAAK,SAAS;MACZC,WAAW,GAAGE,oBAACC,mCAAqB,OAAG;MACvC;IACF,KAAK,OAAO;MACVH,WAAW,GAAGE,oBAACC,iCAAmB,OAAG;MACrCF,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,SAAS;MACZD,WAAW,GAAGE,oBAACC,2BAAa,OAAG;MAC/BF,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,MAAM;MACTD,WAAW,GAAGE,oBAACC,wBAAU,OAAG;MAC5B;EAAM;EAGV,MAAMC,MAAM,GAAGC,kCAAgB,CAACT,KAAK,CAACQ,MAAM,EAAE;IAAEE,YAAY,EAAE;MAAER,UAAU,EAAE;IAAa;EAAE,CAAE,CAAC;EAC9F,MAAMS,MAAM,GAAGF,kCAAgB,CAACT,KAAK,CAACW,MAAM,CAAC;EAC7C,IAAIC,IAAI;EACR;EACA,IAAI,CAACD,MAAM,EAAE;IACXC,IAAI,GAAGH,kCAAgB,CAACT,KAAK,CAACY,IAAI,EAAE;MAClCF,YAAY,EAAE;QACZG,QAAQ,EAAET;OACX;MACDU,QAAQ,EAAE,CAAC,CAACd,KAAK,CAACG;KACnB,CAAC;;EAGJ,OAAO;IACLK,MAAM;IACNN,UAAU;IACVS,MAAM;IACNI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAES,qBAAM;MACdN,MAAM,EAAEO;KACT;IACDN,IAAI;IACJT,MAAM;IACNa,IAAI,EAAEP,uCAAqB,CAAC,KAAK,EAAE;MACjCR,GAAG;MACHkB,IAAI,EAAEd,WAAW;MACjBQ,QAAQ,EAAEb,KAAK,CAACa,QAAQ;MACxB,GAAGb;KACJ;GACF;AACH,CAAC;AAvDYoB,yBAAiB","names":["useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","React","react_icons_1","action","react_utilities_1","defaultProps","avatar","icon","children","required","components","root","react_button_1","react_avatar_1","role","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"]}
package/lib-commonjs/components/Alert/useAlertStyles.js CHANGED
@@ -4,133 +4,123 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useAlertStyles_unstable = exports.alertClassNames = void 0;
7
-
8
7
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
-
10
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
11
-
12
9
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
13
-
14
10
  exports.alertClassNames = {
15
11
  root: 'fui-Alert',
16
12
  icon: 'fui-Alert__icon',
17
13
  action: 'fui-Alert__action',
18
14
  avatar: 'fui-Alert__avatar'
19
15
  };
20
-
21
16
  const useStyles = /*#__PURE__*/react_1.__styles({
22
- "root": {
23
- "mc9l5x": "f22iagw",
24
- "Bt984gj": "f122n59",
25
- "sshi5w": "f5pgtk9",
26
- "z8tnut": "f1g0x7ka",
27
- "z189sj": ["f11qrl6u", "fjlbh76"],
28
- "Byoj8tv": "f1qch9an",
29
- "uwmqm3": ["fjlbh76", "f11qrl6u"],
30
- "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
31
- "Beyfa6y": ["f1bjk9e1", "fff7au0"],
32
- "B7oj6ja": ["fwsfkhu", "f8wkphi"],
33
- "Btl43ni": ["f8wkphi", "fwsfkhu"],
34
- "B4j52fo": "f5ogflp",
35
- "Bekrc4i": ["f1hqa2wf", "finvdd3"],
36
- "Bn0qgzm": "f1f09k3d",
37
- "ibv6hh": ["finvdd3", "f1hqa2wf"],
38
- "icvyot": "fzkkow9",
39
- "vrafjx": ["fcdblym", "fjik90z"],
40
- "oivjwe": "fg706s2",
41
- "wvpqe5": ["fjik90z", "fcdblym"],
42
- "g2u3we": "fghlq4f",
43
- "h3c5rm": ["f1gn591s", "fjscplz"],
44
- "B9xav0g": "fb073pr",
45
- "zhjwy3": ["fjscplz", "f1gn591s"],
46
- "E5pizo": "fz58gqq",
47
- "Be2twd7": "fkhj508",
48
- "Bhrd7zp": "fl43uef",
49
- "sj55zd": "f19n0e5",
50
- "De3pzq": "fxugw4r"
17
+ root: {
18
+ mc9l5x: "f22iagw",
19
+ Bt984gj: "f122n59",
20
+ sshi5w: "f5pgtk9",
21
+ z8tnut: "f1g0x7ka",
22
+ z189sj: ["f11qrl6u", "fjlbh76"],
23
+ Byoj8tv: "f1qch9an",
24
+ uwmqm3: ["fjlbh76", "f11qrl6u"],
25
+ Bbmb7ep: ["fff7au0", "f1bjk9e1"],
26
+ Beyfa6y: ["f1bjk9e1", "fff7au0"],
27
+ B7oj6ja: ["fwsfkhu", "f8wkphi"],
28
+ Btl43ni: ["f8wkphi", "fwsfkhu"],
29
+ B4j52fo: "f5ogflp",
30
+ Bekrc4i: ["f1hqa2wf", "finvdd3"],
31
+ Bn0qgzm: "f1f09k3d",
32
+ ibv6hh: ["finvdd3", "f1hqa2wf"],
33
+ icvyot: "fzkkow9",
34
+ vrafjx: ["fcdblym", "fjik90z"],
35
+ oivjwe: "fg706s2",
36
+ wvpqe5: ["fjik90z", "fcdblym"],
37
+ g2u3we: "fghlq4f",
38
+ h3c5rm: ["f1gn591s", "fjscplz"],
39
+ B9xav0g: "fb073pr",
40
+ zhjwy3: ["fjscplz", "f1gn591s"],
41
+ E5pizo: "fz58gqq",
42
+ Be2twd7: "fkhj508",
43
+ Bhrd7zp: "fl43uef",
44
+ sj55zd: "f19n0e5",
45
+ De3pzq: "fxugw4r"
51
46
  },
52
- "inverted": {
53
- "sj55zd": "f1w7i9ko",
54
- "De3pzq": "f5pduvr"
47
+ inverted: {
48
+ sj55zd: "f1w7i9ko",
49
+ De3pzq: "f5pduvr"
55
50
  },
56
- "icon": {
57
- "Bqenvij": "fd461yt",
58
- "Be2twd7": "f4ybsrx",
59
- "z8tnut": "f1g0x7ka",
60
- "z189sj": ["f19lj068", "f177v4lu"],
61
- "Byoj8tv": "f1qch9an",
62
- "uwmqm3": ["f1cnd47f", "fhxju0i"]
51
+ icon: {
52
+ Bqenvij: "fd461yt",
53
+ Be2twd7: "f4ybsrx",
54
+ z8tnut: "f1g0x7ka",
55
+ z189sj: ["f19lj068", "f177v4lu"],
56
+ Byoj8tv: "f1qch9an",
57
+ uwmqm3: ["f1cnd47f", "fhxju0i"]
63
58
  },
64
- "avatar": {
65
- "B6of3ja": "f1hu3pq6",
66
- "t21cq0": ["f1phki43", "ff9s3yw"],
67
- "jrapky": "f19f4twv",
68
- "Frg6f3": ["f1tyq0we", "f11qmguv"]
59
+ avatar: {
60
+ B6of3ja: "f1hu3pq6",
61
+ t21cq0: ["f1phki43", "ff9s3yw"],
62
+ jrapky: "f19f4twv",
63
+ Frg6f3: ["f1tyq0we", "f11qmguv"]
69
64
  },
70
- "action": {
71
- "z8tnut": "f1sbtcvk",
72
- "z189sj": ["f81rol6", "frdkuqy"],
73
- "Byoj8tv": "fdghr9",
74
- "uwmqm3": ["frdkuqy", "f81rol6"],
75
- "Bf4jedk": "fy77jfu",
76
- "Frg6f3": ["fcgxt0o", "f1ujusj6"],
77
- "sj55zd": "f16muhyy"
65
+ action: {
66
+ z8tnut: "f1sbtcvk",
67
+ z189sj: ["f81rol6", "frdkuqy"],
68
+ Byoj8tv: "fdghr9",
69
+ uwmqm3: ["frdkuqy", "f81rol6"],
70
+ Bf4jedk: "fy77jfu",
71
+ Frg6f3: ["fcgxt0o", "f1ujusj6"],
72
+ sj55zd: "f16muhyy"
78
73
  }
79
74
  }, {
80
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
75
+ d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
81
76
  });
82
-
83
77
  const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
84
- "success": {
85
- "sj55zd": "f1m7fhi8"
78
+ success: {
79
+ sj55zd: "f1m7fhi8"
86
80
  },
87
- "error": {
88
- "sj55zd": "f1whyuy6"
81
+ error: {
82
+ sj55zd: "f1whyuy6"
89
83
  },
90
- "warning": {
91
- "sj55zd": "fpti2h4"
84
+ warning: {
85
+ sj55zd: "fpti2h4"
92
86
  },
93
- "info": {
94
- "sj55zd": "fkfq4zb"
87
+ info: {
88
+ sj55zd: "fkfq4zb"
95
89
  }
96
90
  }, {
97
- "d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
91
+ d: [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
98
92
  });
99
-
100
93
  const useIntentIconStylesInverted = /*#__PURE__*/react_1.__styles({
101
- "success": {
102
- "sj55zd": "f1pvjcpr"
94
+ success: {
95
+ sj55zd: "f1pvjcpr"
103
96
  },
104
- "error": {
105
- "sj55zd": "fcrp5ll"
97
+ error: {
98
+ sj55zd: "fcrp5ll"
106
99
  },
107
- "warning": {
108
- "sj55zd": "f1r8f1cl"
100
+ warning: {
101
+ sj55zd: "f1r8f1cl"
109
102
  },
110
- "info": {
111
- "sj55zd": "f1w7i9ko"
103
+ info: {
104
+ sj55zd: "f1w7i9ko"
112
105
  }
113
106
  }, {
114
- "d": [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
107
+ d: [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
115
108
  });
116
-
117
109
  const useActionButtonColorInverted = /*#__PURE__*/react_1.__styles({
118
- "action": {
119
- "sj55zd": "f1qz2gb0",
120
- "B8q5s1w": "fa5e339",
121
- "Bci5o5g": ["fk4svks", "fqzoz0o"],
122
- "n8qw10": "fw8q0i0",
123
- "Bdrgwmp": ["fqzoz0o", "fk4svks"],
124
- "Bfpq7zp": "f1dlk4fq"
110
+ action: {
111
+ sj55zd: "f1qz2gb0",
112
+ B8q5s1w: "fa5e339",
113
+ Bci5o5g: ["fk4svks", "fqzoz0o"],
114
+ n8qw10: "fw8q0i0",
115
+ Bdrgwmp: ["fqzoz0o", "fk4svks"],
116
+ Bfpq7zp: "f1dlk4fq"
125
117
  }
126
118
  }, {
127
- "d": [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
119
+ d: [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
128
120
  });
129
121
  /**
130
122
  * Apply styling to the Alert slots based on the state
131
123
  */
132
-
133
-
134
124
  const useAlertStyles_unstable = state => {
135
125
  const inverted = state.appearance === 'inverted';
136
126
  const styles = useStyles();
@@ -138,22 +128,17 @@ const useAlertStyles_unstable = state => {
138
128
  const intentIconStylesInverted = useIntentIconStylesInverted();
139
129
  const actionStylesInverted = useActionButtonColorInverted();
140
130
  state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
141
-
142
131
  if (state.icon) {
143
132
  state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
144
133
  }
145
-
146
134
  if (state.avatar) {
147
135
  state.avatar.className = react_1.mergeClasses(exports.alertClassNames.avatar, styles.avatar, state.avatar.className);
148
136
  }
149
-
150
137
  if (state.action) {
151
138
  // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
152
139
  state.action.className = react_1.mergeClasses(exports.alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
153
140
  }
154
-
155
141
  return state;
156
142
  };
157
-
158
143
  exports.useAlertStyles_unstable = useAlertStyles_unstable;
159
144
  //# sourceMappingURL=useAlertStyles.js.map
package/lib-commonjs/components/Alert/useAlertStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAA9C;;AAOb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAkCA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;;AAeA,MAAM,2BAA2B,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAApC;;AAeA,MAAM,4BAA4B,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAArC;AAaA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAN,KAAqB,UAAtC;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,uBAAuB,GAAG,mBAAmB,EAAnD;EACA,MAAM,wBAAwB,GAAG,2BAA2B,EAA5D;EACA,MAAM,oBAAoB,GAAG,4BAA4B,EAAzD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,MAAP,CAA3B,GAA4C,uBAAuB,CAAC,KAAK,CAAC,MAAP,CAA5F,CAHqB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB;IACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,eAAA,CAAgB,MADO,EAEvB,MAAM,CAAC,MAFgB,EAGvB,QAAQ,IAAI,oBAAoB,CAAC,MAHV,EAIvB,KAAK,CAAC,MAAN,CAAa,SAJU,CAAzB;EAMD;;EAED,OAAO,KAAP;AACD,CAtCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,uBAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE,mBAAmB;EAC3BC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgC1B;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAapC;AAEF,MAAME,2BAA2B,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAa5C;AAEF,MAAMG,4BAA4B,gBAAGH,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAW7C;AAEF;;;AAGO,MAAMI,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAMC,QAAQ,GAAGD,KAAK,CAACE,UAAU,KAAK,UAAU;EAChD,MAAMC,MAAM,GAAGT,SAAS,EAAE;EAC1B,MAAMU,uBAAuB,GAAGR,mBAAmB,EAAE;EACrD,MAAMS,wBAAwB,GAAGR,2BAA2B,EAAE;EAC9D,MAAMS,oBAAoB,GAAGR,4BAA4B,EAAE;EAE3DE,KAAK,CAACV,IAAI,CAACiB,SAAS,GAAGZ,oBAAY,CACjCN,uBAAe,CAACC,IAAI,EACpBa,MAAM,CAACb,IAAI,EACXW,QAAQ,IAAIE,MAAM,CAACF,QAAQ,EAC3BD,KAAK,CAACV,IAAI,CAACiB,SAAS,CACrB;EAED,IAAIP,KAAK,CAACT,IAAI,EAAE;IACdS,KAAK,CAACT,IAAI,CAACgB,SAAS,GAAGZ,oBAAY,CACjCN,uBAAe,CAACE,IAAI,EACpBY,MAAM,CAACZ,IAAI,EACXS,KAAK,CAACQ,MAAM,KAAKP,QAAQ,GAAGI,wBAAwB,CAACL,KAAK,CAACQ,MAAM,CAAC,GAAGJ,uBAAuB,CAACJ,KAAK,CAACQ,MAAM,CAAC,CAAC,EAC3GR,KAAK,CAACT,IAAI,CAACgB,SAAS,CACrB;;EAGH,IAAIP,KAAK,CAACP,MAAM,EAAE;IAChBO,KAAK,CAACP,MAAM,CAACc,SAAS,GAAGZ,oBAAY,CAACN,uBAAe,CAACI,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAEO,KAAK,CAACP,MAAM,CAACc,SAAS,CAAC;;EAGtG,IAAIP,KAAK,CAACR,MAAM,EAAE;IAChB;IACAQ,KAAK,CAACR,MAAM,CAACe,SAAS,GAAGZ,oBAAY,CACnCN,uBAAe,CAACG,MAAM,EACtBW,MAAM,CAACX,MAAM,EACbS,QAAQ,IAAIK,oBAAoB,CAACd,MAAM,EACvCQ,KAAK,CAACR,MAAM,CAACe,SAAS,CACvB;;EAGH,OAAOP,KAAK;AACd,CAAC;AAtCYX,+BAAuB","names":["exports","root","icon","action","avatar","useStyles","react_1","useIntentIconStyles","useIntentIconStylesInverted","useActionButtonColorInverted","useAlertStyles_unstable","state","inverted","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"]}
package/lib-commonjs/index.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useAlert_unstable = exports.useAlertStyles_unstable = exports.renderAlert_unstable = exports.alertClassNames = exports.Alert = void 0;
7
-
8
7
  var Alert_1 = /*#__PURE__*/require("./Alert");
9
-
10
8
  Object.defineProperty(exports, "Alert", {
11
9
  enumerable: true,
12
10
  get: function () {
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-alert/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/index.ts"],"sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-alert",
3
- "version": "9.0.0-beta.21",
3
+ "version": "9.0.0-beta.23",
4
4
  "description": "An alert component to display brief messages",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,17 +27,17 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
31
- "@fluentui/scripts": "^1.0.0"
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
31
+ "@fluentui/scripts": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-avatar": "^9.2.10",
35
- "@fluentui/react-button": "^9.1.12",
34
+ "@fluentui/react-avatar": "^9.2.12",
35
+ "@fluentui/react-button": "^9.1.14",
36
36
  "@fluentui/react-icons": "^2.0.175",
37
- "@fluentui/react-tabster": "^9.3.4",
37
+ "@fluentui/react-tabster": "^9.3.6",
38
38
  "@fluentui/react-theme": "^9.1.5",
39
- "@fluentui/react-utilities": "^9.3.0",
40
- "@griffel/react": "^1.4.2",
39
+ "@fluentui/react-utilities": "^9.4.0",
40
+ "@griffel/react": "^1.5.2",
41
41
  "tslib": "^2.1.0"
42
42
  },
43
43
  "peerDependencies": {