@fluentui/react-alert 9.0.0-beta.2 → 9.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,114 @@
2
2
  "name": "@fluentui/react-alert",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 31 May 2022 21:26:29 GMT",
5
+ "date": "Tue, 28 Jun 2022 17:37:46 GMT",
6
+ "tag": "@fluentui/react-alert_v9.0.0-beta.5",
7
+ "version": "9.0.0-beta.5",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-alert",
13
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
14
+ "comment": "fix: Use caret dependency range for Griffel"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-alert",
19
+ "comment": "Bump @fluentui/react-button to v9.0.1",
20
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-alert",
25
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
26
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Tue, 28 Jun 2022 15:14:12 GMT",
33
+ "tag": "@fluentui/react-alert_v9.0.0-beta.4",
34
+ "version": "9.0.0-beta.4",
35
+ "comments": {
36
+ "prerelease": [
37
+ {
38
+ "author": "lingfangao@hotmail.com",
39
+ "package": "@fluentui/react-alert",
40
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
41
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
42
+ },
43
+ {
44
+ "author": "lingfangao@hotmail.com",
45
+ "package": "@fluentui/react-alert",
46
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
47
+ "comment": "Bump Griffel dependencies"
48
+ },
49
+ {
50
+ "author": "olfedias@microsoft.com",
51
+ "package": "@fluentui/react-alert",
52
+ "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
53
+ "comment": "chore: Update @fluentui/react-icons to latest version"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-alert",
58
+ "comment": "Bump @fluentui/react-button to v9.0.0",
59
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-alert",
64
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
65
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-alert",
70
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
71
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-alert",
76
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
77
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
78
+ }
79
+ ],
80
+ "none": [
81
+ {
82
+ "author": "mgodbolt@microsoft.com",
83
+ "package": "@fluentui/react-alert",
84
+ "commit": "262d148f068ea1d3354994dd659ac881b31dda28",
85
+ "comment": "chore: Move alert stories into folder and use index entry point."
86
+ }
87
+ ]
88
+ }
89
+ },
90
+ {
91
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
92
+ "tag": "@fluentui/react-alert_v9.0.0-beta.3",
93
+ "version": "9.0.0-beta.3",
94
+ "comments": {
95
+ "prerelease": [
96
+ {
97
+ "author": "beachball",
98
+ "package": "@fluentui/react-alert",
99
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.14",
100
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
101
+ },
102
+ {
103
+ "author": "beachball",
104
+ "package": "@fluentui/react-alert",
105
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
106
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
107
+ }
108
+ ]
109
+ }
110
+ },
111
+ {
112
+ "date": "Tue, 31 May 2022 21:28:35 GMT",
6
113
  "tag": "@fluentui/react-alert_v9.0.0-beta.2",
7
114
  "version": "9.0.0-beta.2",
8
115
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,48 @@
1
1
  # Change Log - @fluentui/react-alert
2
2
 
3
- This log was last generated on Tue, 31 May 2022 21:26:29 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 28 Jun 2022 17:37:46 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.5)
8
+
9
+ Tue, 28 Jun 2022 17:37:46 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.4..@fluentui/react-alert_v9.0.0-beta.5)
11
+
12
+ ### Changes
13
+
14
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/react-button to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
16
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
17
+
18
+ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.4)
19
+
20
+ Tue, 28 Jun 2022 15:14:12 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.3..@fluentui/react-alert_v9.0.0-beta.4)
22
+
23
+ ### Changes
24
+
25
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
26
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
27
+ - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
28
+ - Bump @fluentui/react-button to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
29
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
30
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
31
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
32
+
33
+ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.3)
34
+
35
+ Thu, 23 Jun 2022 14:25:31 GMT
36
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.2..@fluentui/react-alert_v9.0.0-beta.3)
37
+
38
+ ### Changes
39
+
40
+ - Bump @fluentui/react-button to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
41
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
42
+
7
43
  ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.2)
8
44
 
9
- Tue, 31 May 2022 21:26:29 GMT
45
+ Tue, 31 May 2022 21:28:35 GMT
10
46
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.1..@fluentui/react-alert_v9.0.0-beta.2)
11
47
 
12
48
  ### Changes
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+
1
3
  import { Button } from '@fluentui/react-button';
2
4
  import type { ComponentProps } from '@fluentui/react-utilities';
3
5
  import type { ComponentState } from '@fluentui/react-utilities';
@@ -1 +1 @@
1
- {"version":3,"sources":["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;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,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,"sources":["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 +1 @@
1
- {"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAHnB,CADF;AAOD,CAVM","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 {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAHnB,CADF;AAOD,CAVM","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 {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,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;AAC9F,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA;;AACA,MAAI,WAAJ;;AACA,UAAQ,MAAR;AACE,SAAK,SAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;AACA;;AACF,SAAK,OAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;AACA;;AACF,SAAK,SAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;AACA;;AACF,SAAK,MAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;AACA;AAZJ;;AAeA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE;AADE,KAD0B;AAIxC,IAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAJsB,GAAb,CAA7B;AAOA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,MAAM,EAAE;AAHE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,MAAA,QAAQ,EAAE,KAAK,CAAC,QAFiB;AAGjC,SAAG;AAH8B,KAAR,CANtB;AAWL,IAAA,IAXK;AAYL,IAAA,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAZnB;AAaL,IAAA;AAbK,GAAP;AAeD,CA1CM","sourcesContent":["import * as React from 'react';\n\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 { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,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;EAAF,IAAa,KAAnB;EAEA;;EACA,IAAI,WAAJ;;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;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAZJ;;EAeA,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;IACxC,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE,CAD0B;IAIxC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;EAJsB,CAAb,CAA7B;EAOA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE;IAHE,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,QAAQ,EAAE,KAAK,CAAC,QAFiB;MAGjC,GAAG;IAH8B,CAAR,CANtB;IAWL,IAXK;IAYL,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAZnB;IAaL;EAbK,CAAP;AAeD,CA1CM","sourcesContent":["import * as React from 'react';\n\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 { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,OAAO,MAAM,eAAe,GAA+B;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,IAAI,EAAE,iBAFmD;AAGzD,EAAA,MAAM,EAAE;AAHiD,CAApD;;AAMP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,eAAe,CAAC,IAAjB,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CApBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\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};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\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 styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE;AAHiD,CAApD;;AAMP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,eAAe,CAAC,IAAjB,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;EAEA,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,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHC,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,OAAO,KAAP;AACD,CApBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\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};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\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 styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["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;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,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,"sources":["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 +1 @@
1
- {"version":3,"sources":["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;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAHnB,CADF;AAOD,CAVM;;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 {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAHnB,CADF;AAOD,CAVM;;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 {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,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;AAC9F,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA;;AACA,MAAI,WAAJ;;AACA,UAAQ,MAAR;AACE,SAAK,SAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;AACA;;AACF,SAAK,OAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;AACA;;AACF,SAAK,SAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;AACA;;AACF,SAAK,MAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;AACA;AAZJ;;AAeA,QAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACxC,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE;AADE,KAD0B;AAIxC,IAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAJsB,GAA7B,CAAb;AAOA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,MAAM,EAAE,cAAA,CAAA;AAHE,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,MAAA,QAAQ,EAAE,KAAK,CAAC,QAFiB;AAGjC,SAAG;AAH8B,KAA7B,CAND;AAWL,IAAA,IAXK;AAYL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAZH;AAaL,IAAA;AAbK,GAAP;AAeD,CA1CM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\n\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 { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,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;EAAF,IAAa,KAAnB;EAEA;;EACA,IAAI,WAAJ;;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;;IACF,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;MACA;EAZJ;;EAeA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE,CAD0B;IAIxC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;EAJsB,CAA7B,CAAb;EAOA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,cAAA,CAAA;IAHE,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,QAAQ,EAAE,KAAK,CAAC,QAFiB;MAGjC,GAAG;IAH8B,CAA7B,CAND;IAWL,IAXK;IAYL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAZH;IAaL;EAbK,CAAP;AAeD,CA1CM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\n\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 { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,IAAI,EAAE,iBAFmD;AAGzD,EAAA,MAAM,EAAE;AAHiD,CAA9C;;AAMb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,IAA7B,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHX,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,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;AACD;;AAED,SAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\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};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\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 styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE;AAHiD,CAA9C;;AAMb,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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,IAA7B,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;;EAEA,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,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHX,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,OAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\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};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\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 styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;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,"sources":["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/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-alert",
3
- "version": "9.0.0-beta.2",
3
+ "version": "9.0.0-beta.5",
4
4
  "description": "An alert component to display brief messages",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,15 +27,15 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.8",
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.10",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-button": "9.0.0-rc.13",
35
- "@fluentui/react-icons": "^2.0.166-rc.3",
36
- "@fluentui/react-theme": "9.0.0-rc.9",
37
- "@fluentui/react-utilities": "9.0.0-rc.10",
38
- "@griffel/react": "1.1.0",
34
+ "@fluentui/react-button": "^9.0.1",
35
+ "@fluentui/react-icons": "^2.0.172-rc.8",
36
+ "@fluentui/react-theme": "^9.0.0",
37
+ "@fluentui/react-utilities": "^9.0.0",
38
+ "@griffel/react": "^1.2.0",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {