@fluentui/react-toast 0.0.0-nightly-20230907-0414.1 → 0.0.0-nightly-20230911-0418.1
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 +23 -23
- package/CHANGELOG.md +14 -14
- package/dist/index.d.ts +2 -1
- package/lib/components/Toaster/Toaster.types.js.map +1 -1
- package/lib/components/Toaster/renderToaster.js +26 -14
- package/lib/components/Toaster/renderToaster.js.map +1 -1
- package/lib/components/Toaster/useToaster.js +3 -2
- package/lib/components/Toaster/useToaster.js.map +1 -1
- package/lib/components/Toaster/useToasterStyles.styles.js +10 -2
- package/lib/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib/state/vanilla/getPositionStyles.js +3 -4
- package/lib/state/vanilla/getPositionStyles.js.map +1 -1
- package/lib-commonjs/components/Toaster/renderToaster.js +26 -14
- package/lib-commonjs/components/Toaster/renderToaster.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToaster.js +3 -2
- package/lib-commonjs/components/Toaster/useToaster.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js +11 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib-commonjs/state/vanilla/getPositionStyles.js +3 -4
- package/lib-commonjs/state/vanilla/getPositionStyles.js.map +1 -1
- package/package.json +11 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-toast",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-toast_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 11 Sep 2023 04:25:30 GMT",
|
|
6
|
+
"tag": "@fluentui/react-toast_v0.0.0-nightly-20230911-0418.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230911-0418.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,62 +16,62 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-toast",
|
|
19
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230911-0418.1",
|
|
20
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-toast",
|
|
25
|
-
"comment": "Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230911-0418.1",
|
|
26
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-toast",
|
|
31
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230911-0418.1",
|
|
32
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-toast",
|
|
37
|
-
"comment": "Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20230911-0418.1",
|
|
38
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-toast",
|
|
43
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230911-0418.1",
|
|
44
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-toast",
|
|
49
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230911-0418.1",
|
|
50
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-toast",
|
|
55
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230911-0418.1",
|
|
56
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"author": "beachball",
|
|
60
60
|
"package": "@fluentui/react-toast",
|
|
61
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
62
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230911-0418.1",
|
|
62
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"author": "beachball",
|
|
66
66
|
"package": "@fluentui/react-toast",
|
|
67
|
-
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
68
|
-
"commit": "
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230911-0418.1",
|
|
68
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
"author": "beachball",
|
|
72
72
|
"package": "@fluentui/react-toast",
|
|
73
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
74
|
-
"commit": "
|
|
73
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230911-0418.1",
|
|
74
|
+
"commit": "14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2"
|
|
75
75
|
}
|
|
76
76
|
]
|
|
77
77
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toast
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 11 Sep 2023 04:25:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230911-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v0.0.0-nightly-20230911-0418.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.2.3..@fluentui/react-toast_v0.0.0-nightly-
|
|
9
|
+
Mon, 11 Sep 2023 04:25:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.2.3..@fluentui/react-toast_v0.0.0-nightly-20230911-0418.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
19
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
24
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230911-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/14d3a9a8ec9adcf3ae5ca035432ea9cb88a58ec2) by beachball)
|
|
25
25
|
|
|
26
26
|
## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.2.3)
|
|
27
27
|
|
package/dist/index.d.ts
CHANGED
|
@@ -169,6 +169,7 @@ export declare type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'
|
|
|
169
169
|
* User override API for aria-live narration for toasts
|
|
170
170
|
*/
|
|
171
171
|
announce?: Announce;
|
|
172
|
+
inline?: boolean;
|
|
172
173
|
};
|
|
173
174
|
|
|
174
175
|
declare interface ToasterShortcuts {
|
|
@@ -195,7 +196,7 @@ declare type ToasterSlotsInternal = ToasterSlots & {
|
|
|
195
196
|
/**
|
|
196
197
|
* State used in rendering Toaster
|
|
197
198
|
*/
|
|
198
|
-
export declare type ToasterState = ComponentState<ToasterSlotsInternal> & Pick<AriaLiveProps, 'announceRef'> & Pick<PortalProps, 'mountNode'> & Pick<Required<ToasterProps>, 'announce'> & {
|
|
199
|
+
export declare type ToasterState = ComponentState<ToasterSlotsInternal> & Pick<AriaLiveProps, 'announceRef'> & Pick<PortalProps, 'mountNode'> & Pick<Required<ToasterProps>, 'announce' | 'inline'> & {
|
|
199
200
|
offset: ToasterOptions['offset'] | undefined;
|
|
200
201
|
renderAriaLive: boolean;
|
|
201
202
|
dir: 'rtl' | 'ltr';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Toaster.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { ToasterOptions } from '../../state/types';\nimport { Announce, AriaLiveProps } from '../AriaLive';\n\nexport type ToasterSlots = {\n /**\n * NOTE: This root slot maps in exactly the same way to the containers rendered for each toast position\n * There is no intention (currently) to let users customize the div for each toast position.\n */\n root: Slot<'div'>;\n};\n\nexport type ToasterSlotsInternal = ToasterSlots & {\n bottomEnd?: Slot<'div'>;\n bottomStart?: Slot<'div'>;\n topEnd?: Slot<'div'>;\n topStart?: Slot<'div'>;\n top?: Slot<'div'>;\n bottom?: Slot<'div'>;\n};\n\n/**\n * Toaster Props\n */\nexport type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> &\n Partial<ToasterOptions> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * User override API for aria-live narration for toasts\n */\n announce?: Announce;\n };\n\n/**\n * State used in rendering Toaster\n */\nexport type ToasterState = ComponentState<ToasterSlotsInternal> &\n Pick<AriaLiveProps, 'announceRef'> &\n Pick<PortalProps, 'mountNode'> &\n Pick<Required<ToasterProps>, 'announce'> & {\n offset: ToasterOptions['offset'] | undefined;\n renderAriaLive: boolean;\n dir: 'rtl' | 'ltr';\n };\n"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["Toaster.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { ToasterOptions } from '../../state/types';\nimport { Announce, AriaLiveProps } from '../AriaLive';\n\nexport type ToasterSlots = {\n /**\n * NOTE: This root slot maps in exactly the same way to the containers rendered for each toast position\n * There is no intention (currently) to let users customize the div for each toast position.\n */\n root: Slot<'div'>;\n};\n\nexport type ToasterSlotsInternal = ToasterSlots & {\n bottomEnd?: Slot<'div'>;\n bottomStart?: Slot<'div'>;\n topEnd?: Slot<'div'>;\n topStart?: Slot<'div'>;\n top?: Slot<'div'>;\n bottom?: Slot<'div'>;\n};\n\n/**\n * Toaster Props\n */\nexport type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> &\n Partial<ToasterOptions> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * User override API for aria-live narration for toasts\n */\n announce?: Announce;\n\n inline?: boolean;\n };\n\n/**\n * State used in rendering Toaster\n */\nexport type ToasterState = ComponentState<ToasterSlotsInternal> &\n Pick<AriaLiveProps, 'announceRef'> &\n Pick<PortalProps, 'mountNode'> &\n Pick<Required<ToasterProps>, 'announce' | 'inline'> & {\n offset: ToasterOptions['offset'] | undefined;\n renderAriaLive: boolean;\n dir: 'rtl' | 'ltr';\n };\n"],"names":[],"mappings":"AAAA,WA8CI"}
|
|
@@ -5,24 +5,36 @@ import { AriaLive } from '../AriaLive';
|
|
|
5
5
|
/**
|
|
6
6
|
* Render the final JSX of Toaster
|
|
7
7
|
*/ export const renderToaster_unstable = (state)=>{
|
|
8
|
-
const { announceRef, renderAriaLive } = state;
|
|
8
|
+
const { announceRef, renderAriaLive, inline, mountNode } = state;
|
|
9
9
|
assertSlots(state);
|
|
10
10
|
const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;
|
|
11
|
+
const ariaLive = renderAriaLive ? /*#__PURE__*/ _jsx(AriaLive, {
|
|
12
|
+
announceRef: announceRef
|
|
13
|
+
}) : null;
|
|
14
|
+
const positionSlots = /*#__PURE__*/ _jsxs(_Fragment, {
|
|
15
|
+
children: [
|
|
16
|
+
state.bottom ? /*#__PURE__*/ _jsx(state.bottom, {}) : null,
|
|
17
|
+
state.bottomStart ? /*#__PURE__*/ _jsx(state.bottomStart, {}) : null,
|
|
18
|
+
state.bottomEnd ? /*#__PURE__*/ _jsx(state.bottomEnd, {}) : null,
|
|
19
|
+
state.topStart ? /*#__PURE__*/ _jsx(state.topStart, {}) : null,
|
|
20
|
+
state.topEnd ? /*#__PURE__*/ _jsx(state.topEnd, {}) : null,
|
|
21
|
+
state.top ? /*#__PURE__*/ _jsx(state.top, {}) : null
|
|
22
|
+
]
|
|
23
|
+
});
|
|
24
|
+
if (inline) {
|
|
25
|
+
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
26
|
+
children: [
|
|
27
|
+
ariaLive,
|
|
28
|
+
hasToasts ? positionSlots : null
|
|
29
|
+
]
|
|
30
|
+
});
|
|
31
|
+
}
|
|
11
32
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
12
33
|
children: [
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
mountNode: state.mountNode,
|
|
18
|
-
children: [
|
|
19
|
-
state.bottom ? /*#__PURE__*/ _jsx(state.bottom, {}) : null,
|
|
20
|
-
state.bottomStart ? /*#__PURE__*/ _jsx(state.bottomStart, {}) : null,
|
|
21
|
-
state.bottomEnd ? /*#__PURE__*/ _jsx(state.bottomEnd, {}) : null,
|
|
22
|
-
state.topStart ? /*#__PURE__*/ _jsx(state.topStart, {}) : null,
|
|
23
|
-
state.topEnd ? /*#__PURE__*/ _jsx(state.topEnd, {}) : null,
|
|
24
|
-
state.top ? /*#__PURE__*/ _jsx(state.top, {}) : null
|
|
25
|
-
]
|
|
34
|
+
ariaLive,
|
|
35
|
+
hasToasts ? /*#__PURE__*/ _jsx(Portal, {
|
|
36
|
+
mountNode: mountNode,
|
|
37
|
+
children: positionSlots
|
|
26
38
|
}) : null
|
|
27
39
|
]
|
|
28
40
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderToaster.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { ToasterState, ToasterSlotsInternal } from './Toaster.types';\nimport { AriaLive } from '../AriaLive';\n\n/**\n * Render the final JSX of Toaster\n */\nexport const renderToaster_unstable = (state: ToasterState) => {\n const { announceRef, renderAriaLive } = state;\n assertSlots<ToasterSlotsInternal>(state);\n\n const hasToasts =\n !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;\n\n
|
|
1
|
+
{"version":3,"sources":["renderToaster.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { ToasterState, ToasterSlotsInternal } from './Toaster.types';\nimport { AriaLive } from '../AriaLive';\n\n/**\n * Render the final JSX of Toaster\n */\nexport const renderToaster_unstable = (state: ToasterState) => {\n const { announceRef, renderAriaLive, inline, mountNode } = state;\n assertSlots<ToasterSlotsInternal>(state);\n\n const hasToasts =\n !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;\n\n const ariaLive = renderAriaLive ? <AriaLive announceRef={announceRef} /> : null;\n const positionSlots = (\n <>\n {state.bottom ? <state.bottom /> : null}\n {state.bottomStart ? <state.bottomStart /> : null}\n {state.bottomEnd ? <state.bottomEnd /> : null}\n {state.topStart ? <state.topStart /> : null}\n {state.topEnd ? <state.topEnd /> : null}\n {state.top ? <state.top /> : null}\n </>\n );\n\n if (inline) {\n return (\n <>\n {ariaLive}\n {hasToasts ? positionSlots : null}\n </>\n );\n }\n\n return (\n <>\n {ariaLive}\n {hasToasts ? <Portal mountNode={mountNode}>{positionSlots}</Portal> : null}\n </>\n );\n};\n"],"names":["assertSlots","Portal","AriaLive","renderToaster_unstable","state","announceRef","renderAriaLive","inline","mountNode","hasToasts","bottomStart","bottomEnd","topStart","topEnd","top","bottom","ariaLive","positionSlots"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,cAAc;AAEvC;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;IAC3DJ,YAAkCI;IAElC,MAAMK,YACJ,CAAC,CAACL,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMO,SAAS,IAAI,CAAC,CAACP,MAAMQ,QAAQ,IAAI,CAAC,CAACR,MAAMS,MAAM,IAAI,CAAC,CAACT,MAAMU,GAAG,IAAI,CAAC,CAACV,MAAMW,MAAM;IAEjH,MAAMC,WAAWV,+BAAiB,KAACJ;QAASG,aAAaA;SAAkB;IAC3E,MAAMY,8BACJ;;YACGb,MAAMW,MAAM,iBAAG,KAACX,MAAMW,MAAM,QAAM;YAClCX,MAAMM,WAAW,iBAAG,KAACN,MAAMM,WAAW,QAAM;YAC5CN,MAAMO,SAAS,iBAAG,KAACP,MAAMO,SAAS,QAAM;YACxCP,MAAMQ,QAAQ,iBAAG,KAACR,MAAMQ,QAAQ,QAAM;YACtCR,MAAMS,MAAM,iBAAG,KAACT,MAAMS,MAAM,QAAM;YAClCT,MAAMU,GAAG,iBAAG,KAACV,MAAMU,GAAG,QAAM;;;IAIjC,IAAIP,QAAQ;QACV,qBACE;;gBACGS;gBACAP,YAAYQ,gBAAgB;;;IAGnC;IAEA,qBACE;;YACGD;YACAP,0BAAY,KAACR;gBAAOO,WAAWA;0BAAYS;iBAA0B;;;AAG5E,EAAE"}
|
|
@@ -12,7 +12,7 @@ import { useToastAnnounce } from './useToastAnnounce';
|
|
|
12
12
|
*
|
|
13
13
|
* @param props - props from this instance of Toaster
|
|
14
14
|
*/ export const useToaster_unstable = (props)=>{
|
|
15
|
-
const { offset, announce: announceProp, mountNode, ...rest } = props;
|
|
15
|
+
const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;
|
|
16
16
|
const announceRef = React.useRef(()=>null);
|
|
17
17
|
const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);
|
|
18
18
|
const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);
|
|
@@ -81,6 +81,7 @@ import { useToastAnnounce } from './useToastAnnounce';
|
|
|
81
81
|
announceRef,
|
|
82
82
|
offset,
|
|
83
83
|
announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,
|
|
84
|
-
renderAriaLive: !announceProp
|
|
84
|
+
renderAriaLive: !announceProp,
|
|
85
|
+
inline
|
|
85
86
|
};
|
|
86
87
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n getNativeElementProps,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';\nimport { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n const { offset, announce: announceProp, mountNode, ...rest } = props;\n const announceRef = React.useRef<Announce>(() => null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } =\n useToaster<HTMLDivElement>(rest);\n const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n const { dir } = useFluent();\n\n const rootProps = slot.always(getNativeElementProps('div', rest), { elementType: 'div' });\n const focusableGroupAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus',\n ignoreDefaultKeydown: { Escape: true },\n });\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === Escape) {\n e.preventDefault();\n closeAllToasts();\n }\n props.onKeyDown?.(e);\n });\n const usePositionSlot = (toastPosition: ToastPosition) => {\n const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n const { announceToast, toasterRef } = useToastAnnounce(announceProp ?? announce);\n return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: useMergedRefs(focusManagementRef, toasterRef),\n children: toastsToRender.get(toastPosition)?.map(toast => (\n <ToastContainer\n {...toast}\n tryRestoreFocus={tryRestoreFocus}\n intent={toast.intent}\n announce={announceToast}\n key={toast.toastId}\n visible={isToastVisible(toast.toastId)}\n >\n {toast.content as React.ReactNode}\n </ToastContainer>\n )),\n onKeyDown,\n ...focusableGroupAttr,\n 'data-toaster-position': toastPosition,\n role: 'list',\n // Explicitly casting because our slot types can't handle data attributes\n } as ExtractSlotProps<Slot<'div'>>,\n elementType: 'div',\n });\n };\n\n return {\n dir,\n mountNode,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n top: 'div',\n bottom: 'div',\n },\n root: slot.always(rootProps, { elementType: 'div' }),\n bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n top: usePositionSlot(TOAST_POSITIONS.top),\n bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n announceRef,\n offset,\n announce: announceProp ?? announce,\n renderAriaLive: !announceProp,\n };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","slot","useFluent_unstable","useFluent","useFocusableGroup","Escape","TOAST_POSITIONS","useToaster","ToastContainer","useToasterFocusManagement_unstable","useToastAnnounce","useToaster_unstable","props","offset","announce","announceProp","mountNode","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useCallback","message","options","current","dir","rootProps","always","elementType","focusableGroupAttr","tabBehavior","ignoreDefaultKeydown","onKeyDown","e","key","preventDefault","usePositionSlot","toastPosition","focusManagementRef","announceToast","toasterRef","optional","has","defaultProps","ref","children","get","map","toast","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","renderAriaLive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD,SAASC,eAAe,EAAiBC,UAAU,QAAQ,cAAc;AAEzE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,MAAM,EAAEC,UAAUC,YAAY,EAAEC,SAAS,EAAE,GAAGC,MAAM,
|
|
1
|
+
{"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n getNativeElementProps,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';\nimport { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;\n const announceRef = React.useRef<Announce>(() => null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } =\n useToaster<HTMLDivElement>(rest);\n const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n const { dir } = useFluent();\n\n const rootProps = slot.always(getNativeElementProps('div', rest), { elementType: 'div' });\n const focusableGroupAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus',\n ignoreDefaultKeydown: { Escape: true },\n });\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === Escape) {\n e.preventDefault();\n closeAllToasts();\n }\n props.onKeyDown?.(e);\n });\n const usePositionSlot = (toastPosition: ToastPosition) => {\n const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n const { announceToast, toasterRef } = useToastAnnounce(announceProp ?? announce);\n return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: useMergedRefs(focusManagementRef, toasterRef),\n children: toastsToRender.get(toastPosition)?.map(toast => (\n <ToastContainer\n {...toast}\n tryRestoreFocus={tryRestoreFocus}\n intent={toast.intent}\n announce={announceToast}\n key={toast.toastId}\n visible={isToastVisible(toast.toastId)}\n >\n {toast.content as React.ReactNode}\n </ToastContainer>\n )),\n onKeyDown,\n ...focusableGroupAttr,\n 'data-toaster-position': toastPosition,\n role: 'list',\n // Explicitly casting because our slot types can't handle data attributes\n } as ExtractSlotProps<Slot<'div'>>,\n elementType: 'div',\n });\n };\n\n return {\n dir,\n mountNode,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n top: 'div',\n bottom: 'div',\n },\n root: slot.always(rootProps, { elementType: 'div' }),\n bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n top: usePositionSlot(TOAST_POSITIONS.top),\n bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n announceRef,\n offset,\n announce: announceProp ?? announce,\n renderAriaLive: !announceProp,\n inline,\n };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","slot","useFluent_unstable","useFluent","useFocusableGroup","Escape","TOAST_POSITIONS","useToaster","ToastContainer","useToasterFocusManagement_unstable","useToastAnnounce","useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useCallback","message","options","current","dir","rootProps","always","elementType","focusableGroupAttr","tabBehavior","ignoreDefaultKeydown","onKeyDown","e","key","preventDefault","usePositionSlot","toastPosition","focusManagementRef","announceToast","toasterRef","optional","has","defaultProps","ref","children","get","map","toast","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","renderAriaLive"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses } from '@griffel/react';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { TOAST_POSITIONS, getPositionStyles } from '../../state/index';
|
|
3
3
|
export const toasterClassNames = {
|
|
4
4
|
root: 'fui-Toaster'
|
|
@@ -7,12 +7,20 @@ export const toasterClassNames = {
|
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
9
|
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r3hfdjz", null, [".r3hfdjz{position:fixed;width:292px;pointer-events:none;}"]);
|
|
10
|
+
const useToasterStyles = /*#__PURE__*/__styles({
|
|
11
|
+
inline: {
|
|
12
|
+
qhf8xq: "f1euv43f"
|
|
13
|
+
}
|
|
14
|
+
}, {
|
|
15
|
+
d: [".f1euv43f{position:absolute;}"]
|
|
16
|
+
});
|
|
10
17
|
/**
|
|
11
18
|
* Apply styling to the Toaster slots based on the state
|
|
12
19
|
*/
|
|
13
20
|
export const useToasterStyles_unstable = state => {
|
|
14
21
|
const rootBaseClassName = useRootBaseClassName();
|
|
15
|
-
const
|
|
22
|
+
const styles = useToasterStyles();
|
|
23
|
+
const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
16
24
|
if (state.bottomStart) {
|
|
17
25
|
var _state_bottomStart;
|
|
18
26
|
state.bottomStart.className = className;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","useToasterStyles_unstable","state","rootBaseClassName","className","bottomStart","_state_bottomStart","_style","style","Object","assign","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"sources":["useToasterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none'\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */ export const useToasterStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.root.className);\n if (state.bottomStart) {\n var _state_bottomStart;\n state.bottomStart.className = className;\n var _style;\n (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n if (state.bottomEnd) {\n var _state_bottomEnd;\n state.bottomEnd.className = className;\n var _style1;\n (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n if (state.topStart) {\n var _state_topStart;\n state.topStart.className = className;\n var _style2;\n (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n if (state.topEnd) {\n var _state_topEnd;\n state.topEnd.className = className;\n var _style3;\n (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n if (state.top) {\n var _state_top;\n state.top.className = className;\n var _style4;\n (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n if (state.bottom) {\n var _state_bottom;\n state.bottom.className = className;\n var _style5;\n (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","useToasterStyles","inline","qhf8xq","d","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","_state_bottomStart","_style","style","Object","assign","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"sources":["useToasterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none'\n});\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */ export const useToasterStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const styles = useToasterStyles();\n const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);\n if (state.bottomStart) {\n var _state_bottomStart;\n state.bottomStart.className = className;\n var _style;\n (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n if (state.bottomEnd) {\n var _state_bottomEnd;\n state.bottomEnd.className = className;\n var _style1;\n (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n if (state.topStart) {\n var _state_topStart;\n state.topStart.className = className;\n var _style2;\n (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n if (state.topEnd) {\n var _state_topEnd;\n state.topEnd.className = className;\n var _style3;\n (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n if (state.top) {\n var _state_top;\n state.top.className = className;\n var _style4;\n (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n if (state.bottom) {\n var _state_bottom;\n state.bottom.className = className;\n var _style5;\n (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
export const getPositionStyles = (position, dir, offset)=>{
|
|
2
|
-
const positionStyles = {
|
|
3
|
-
position: 'fixed'
|
|
4
|
-
};
|
|
2
|
+
const positionStyles = {};
|
|
5
3
|
var _offset_position;
|
|
6
4
|
const offsetStyles = offset ? isShorthandOffset(offset) ? offset : (_offset_position = offset[position]) !== null && _offset_position !== void 0 ? _offset_position : {} : {};
|
|
7
|
-
const
|
|
5
|
+
const centered = position === 'top' || position === 'bottom';
|
|
6
|
+
const { horizontal = centered ? 0 : 20, vertical = 16 } = offsetStyles;
|
|
8
7
|
const start = dir === 'ltr' ? 'left' : 'right';
|
|
9
8
|
const end = dir === 'ltr' ? 'right' : 'left';
|
|
10
9
|
switch(position){
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["getPositionStyles.ts"],"sourcesContent":["import { ToastOffsetObject, ToastOffset, ToastPosition } from '../types';\n\ninterface PositionStyles {\n
|
|
1
|
+
{"version":3,"sources":["getPositionStyles.ts"],"sourcesContent":["import { ToastOffsetObject, ToastOffset, ToastPosition } from '../types';\n\ninterface PositionStyles {\n top?: number;\n left?: number;\n right?: number;\n bottom?: number;\n}\n\nexport const getPositionStyles = (position: ToastPosition, dir: 'rtl' | 'ltr', offset?: ToastOffset) => {\n const positionStyles: PositionStyles = {};\n\n const offsetStyles: ToastOffsetObject = offset ? (isShorthandOffset(offset) ? offset : offset[position] ?? {}) : {};\n\n const centered = position === 'top' || position === 'bottom';\n\n const { horizontal = centered ? 0 : 20, vertical = 16 } = offsetStyles;\n const start = dir === 'ltr' ? 'left' : 'right';\n const end = dir === 'ltr' ? 'right' : 'left';\n\n switch (position) {\n case 'top':\n Object.assign(positionStyles, {\n top: vertical,\n left: `calc(50% + ${horizontal}px)`,\n transform: 'translateX(-50%)',\n });\n break;\n\n case 'bottom':\n Object.assign(positionStyles, {\n bottom: vertical,\n left: `calc(50% + ${horizontal}px)`,\n transform: 'translateX(-50%)',\n });\n break;\n\n case 'top-start':\n Object.assign(positionStyles, {\n top: vertical,\n [start]: horizontal,\n });\n break;\n case 'top-end':\n Object.assign(positionStyles, {\n top: vertical,\n [end]: horizontal,\n });\n break;\n case 'bottom-start':\n Object.assign(positionStyles, {\n bottom: vertical,\n [start]: horizontal,\n });\n break;\n case 'bottom-end':\n Object.assign(positionStyles, {\n bottom: vertical,\n [end]: horizontal,\n });\n break;\n }\n\n return positionStyles;\n};\n\nfunction isShorthandOffset(offset: ToastOffset): offset is ToastOffsetObject {\n return 'horizontal' in offset || 'vertical' in offset;\n}\n"],"names":["getPositionStyles","position","dir","offset","positionStyles","offsetStyles","isShorthandOffset","centered","horizontal","vertical","start","end","Object","assign","top","left","transform","bottom"],"mappings":"AASA,OAAO,MAAMA,oBAAoB,CAACC,UAAyBC,KAAoBC;IAC7E,MAAMC,iBAAiC,CAAC;QAE+CD;IAAvF,MAAME,eAAkCF,SAAUG,kBAAkBH,UAAUA,SAASA,CAAAA,mBAAAA,MAAM,CAACF,SAAS,cAAhBE,8BAAAA,mBAAoB,CAAC,IAAK,CAAC;IAElH,MAAMI,WAAWN,aAAa,SAASA,aAAa;IAEpD,MAAM,EAAEO,aAAaD,WAAW,IAAI,EAAE,EAAEE,WAAW,EAAE,EAAE,GAAGJ;IAC1D,MAAMK,QAAQR,QAAQ,QAAQ,SAAS;IACvC,MAAMS,MAAMT,QAAQ,QAAQ,UAAU;IAEtC,OAAQD;QACN,KAAK;YACHW,OAAOC,MAAM,CAACT,gBAAgB;gBAC5BU,KAAKL;gBACLM,MAAM,CAAC,WAAW,EAAEP,WAAW,GAAG,CAAC;gBACnCQ,WAAW;YACb;YACA;QAEF,KAAK;YACHJ,OAAOC,MAAM,CAACT,gBAAgB;gBAC5Ba,QAAQR;gBACRM,MAAM,CAAC,WAAW,EAAEP,WAAW,GAAG,CAAC;gBACnCQ,WAAW;YACb;YACA;QAEF,KAAK;YACHJ,OAAOC,MAAM,CAACT,gBAAgB;gBAC5BU,KAAKL;gBACL,CAACC,MAAM,EAAEF;YACX;YACA;QACF,KAAK;YACHI,OAAOC,MAAM,CAACT,gBAAgB;gBAC5BU,KAAKL;gBACL,CAACE,IAAI,EAAEH;YACT;YACA;QACF,KAAK;YACHI,OAAOC,MAAM,CAACT,gBAAgB;gBAC5Ba,QAAQR;gBACR,CAACC,MAAM,EAAEF;YACX;YACA;QACF,KAAK;YACHI,OAAOC,MAAM,CAACT,gBAAgB;gBAC5Ba,QAAQR;gBACR,CAACE,IAAI,EAAEH;YACT;YACA;IACJ;IAEA,OAAOJ;AACT,EAAE;AAEF,SAASE,kBAAkBH,MAAmB;IAC5C,OAAO,gBAAgBA,UAAU,cAAcA;AACjD"}
|
|
@@ -13,24 +13,36 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
13
13
|
const _reactportal = require("@fluentui/react-portal");
|
|
14
14
|
const _AriaLive = require("../AriaLive");
|
|
15
15
|
const renderToaster_unstable = (state)=>{
|
|
16
|
-
const { announceRef, renderAriaLive } = state;
|
|
16
|
+
const { announceRef, renderAriaLive, inline, mountNode } = state;
|
|
17
17
|
(0, _reactutilities.assertSlots)(state);
|
|
18
18
|
const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;
|
|
19
|
+
const ariaLive = renderAriaLive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_AriaLive.AriaLive, {
|
|
20
|
+
announceRef: announceRef
|
|
21
|
+
}) : null;
|
|
22
|
+
const positionSlots = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
23
|
+
children: [
|
|
24
|
+
state.bottom ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottom, {}) : null,
|
|
25
|
+
state.bottomStart ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomStart, {}) : null,
|
|
26
|
+
state.bottomEnd ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomEnd, {}) : null,
|
|
27
|
+
state.topStart ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.topStart, {}) : null,
|
|
28
|
+
state.topEnd ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.topEnd, {}) : null,
|
|
29
|
+
state.top ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.top, {}) : null
|
|
30
|
+
]
|
|
31
|
+
});
|
|
32
|
+
if (inline) {
|
|
33
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
34
|
+
children: [
|
|
35
|
+
ariaLive,
|
|
36
|
+
hasToasts ? positionSlots : null
|
|
37
|
+
]
|
|
38
|
+
});
|
|
39
|
+
}
|
|
19
40
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
20
41
|
children: [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
mountNode: state.mountNode,
|
|
26
|
-
children: [
|
|
27
|
-
state.bottom ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottom, {}) : null,
|
|
28
|
-
state.bottomStart ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomStart, {}) : null,
|
|
29
|
-
state.bottomEnd ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomEnd, {}) : null,
|
|
30
|
-
state.topStart ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.topStart, {}) : null,
|
|
31
|
-
state.topEnd ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.topEnd, {}) : null,
|
|
32
|
-
state.top ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.top, {}) : null
|
|
33
|
-
]
|
|
42
|
+
ariaLive,
|
|
43
|
+
hasToasts ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
|
|
44
|
+
mountNode: mountNode,
|
|
45
|
+
children: positionSlots
|
|
34
46
|
}) : null
|
|
35
47
|
]
|
|
36
48
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderToaster.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport { AriaLive } from '../AriaLive';\n/**\n * Render the final JSX of Toaster\n */ export const renderToaster_unstable = (state)=>{\n const { announceRef, renderAriaLive } = state;\n assertSlots(state);\n const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;\n
|
|
1
|
+
{"version":3,"sources":["renderToaster.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport { AriaLive } from '../AriaLive';\n/**\n * Render the final JSX of Toaster\n */ export const renderToaster_unstable = (state)=>{\n const { announceRef, renderAriaLive, inline, mountNode } = state;\n assertSlots(state);\n const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;\n const ariaLive = renderAriaLive ? /*#__PURE__*/ _jsx(AriaLive, {\n announceRef: announceRef\n }) : null;\n const positionSlots = /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n state.bottom ? /*#__PURE__*/ _jsx(state.bottom, {}) : null,\n state.bottomStart ? /*#__PURE__*/ _jsx(state.bottomStart, {}) : null,\n state.bottomEnd ? /*#__PURE__*/ _jsx(state.bottomEnd, {}) : null,\n state.topStart ? /*#__PURE__*/ _jsx(state.topStart, {}) : null,\n state.topEnd ? /*#__PURE__*/ _jsx(state.topEnd, {}) : null,\n state.top ? /*#__PURE__*/ _jsx(state.top, {}) : null\n ]\n });\n if (inline) {\n return /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n ariaLive,\n hasToasts ? positionSlots : null\n ]\n });\n }\n return /*#__PURE__*/ _jsxs(_Fragment, {\n children: [\n ariaLive,\n hasToasts ? /*#__PURE__*/ _jsx(Portal, {\n mountNode: mountNode,\n children: positionSlots\n }) : null\n ]\n });\n};\n"],"names":["renderToaster_unstable","state","announceRef","renderAriaLive","inline","mountNode","assertSlots","hasToasts","bottomStart","bottomEnd","topStart","topEnd","top","bottom","ariaLive","_jsx","AriaLive","positionSlots","_jsxs","_Fragment","children","Portal"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAM7DA;;;eAAAA;;;4BANkI;gCACvH;6BACL;0BACE;AAGd,MAAMA,yBAAyB,CAACC;IACvC,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;IAC3DK,IAAAA,2BAAW,EAACL;IACZ,MAAMM,YAAY,CAAC,CAACN,MAAMO,WAAW,IAAI,CAAC,CAACP,MAAMQ,SAAS,IAAI,CAAC,CAACR,MAAMS,QAAQ,IAAI,CAAC,CAACT,MAAMU,MAAM,IAAI,CAAC,CAACV,MAAMW,GAAG,IAAI,CAAC,CAACX,MAAMY,MAAM;IACjI,MAAMC,WAAWX,iBAAiB,WAAW,GAAGY,IAAAA,eAAI,EAACC,kBAAQ,EAAE;QAC3Dd,aAAaA;IACjB,KAAK;IACL,MAAMe,gBAAgB,WAAW,GAAGC,IAAAA,gBAAK,EAACC,oBAAS,EAAE;QACjDC,UAAU;YACNnB,MAAMY,MAAM,GAAG,WAAW,GAAGE,IAAAA,eAAI,EAACd,MAAMY,MAAM,EAAE,CAAC,KAAK;YACtDZ,MAAMO,WAAW,GAAG,WAAW,GAAGO,IAAAA,eAAI,EAACd,MAAMO,WAAW,EAAE,CAAC,KAAK;YAChEP,MAAMQ,SAAS,GAAG,WAAW,GAAGM,IAAAA,eAAI,EAACd,MAAMQ,SAAS,EAAE,CAAC,KAAK;YAC5DR,MAAMS,QAAQ,GAAG,WAAW,GAAGK,IAAAA,eAAI,EAACd,MAAMS,QAAQ,EAAE,CAAC,KAAK;YAC1DT,MAAMU,MAAM,GAAG,WAAW,GAAGI,IAAAA,eAAI,EAACd,MAAMU,MAAM,EAAE,CAAC,KAAK;YACtDV,MAAMW,GAAG,GAAG,WAAW,GAAGG,IAAAA,eAAI,EAACd,MAAMW,GAAG,EAAE,CAAC,KAAK;SACnD;IACL;IACA,IAAIR,QAAQ;QACR,OAAO,WAAW,GAAGc,IAAAA,gBAAK,EAACC,oBAAS,EAAE;YAClCC,UAAU;gBACNN;gBACAP,YAAYU,gBAAgB;aAC/B;QACL;IACJ;IACA,OAAO,WAAW,GAAGC,IAAAA,gBAAK,EAACC,oBAAS,EAAE;QAClCC,UAAU;YACNN;YACAP,YAAY,WAAW,GAAGQ,IAAAA,eAAI,EAACM,mBAAM,EAAE;gBACnChB,WAAWA;gBACXe,UAAUH;YACd,KAAK;SACR;IACL;AACJ"}
|
|
@@ -19,7 +19,7 @@ const _ToastContainer = require("../ToastContainer");
|
|
|
19
19
|
const _useToasterFocusManagement = require("./useToasterFocusManagement");
|
|
20
20
|
const _useToastAnnounce = require("./useToastAnnounce");
|
|
21
21
|
const useToaster_unstable = (props)=>{
|
|
22
|
-
const { offset, announce: announceProp, mountNode, ...rest } = props;
|
|
22
|
+
const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;
|
|
23
23
|
const announceRef = _react.useRef(()=>null);
|
|
24
24
|
const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = (0, _state.useToaster)(rest);
|
|
25
25
|
const announce = _react.useCallback((message, options)=>announceRef.current(message, options), []);
|
|
@@ -88,6 +88,7 @@ const useToaster_unstable = (props)=>{
|
|
|
88
88
|
announceRef,
|
|
89
89
|
offset,
|
|
90
90
|
announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,
|
|
91
|
-
renderAriaLive: !announceProp
|
|
91
|
+
renderAriaLive: !announceProp,
|
|
92
|
+
inline
|
|
92
93
|
};
|
|
93
94
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToaster.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */ export const useToaster_unstable = (props)=>{\n const { offset, announce: announceProp, mountNode, ...rest } = props;\n const announceRef = React.useRef(()=>null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);\n const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);\n const { dir } = useFluent();\n const rootProps = slot.always(getNativeElementProps('div', rest), {\n elementType: 'div'\n });\n const focusableGroupAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus',\n ignoreDefaultKeydown: {\n Escape: true\n }\n });\n const onKeyDown = useEventCallback((e)=>{\n var _props_onKeyDown, _props;\n if (e.key === Escape) {\n e.preventDefault();\n closeAllToasts();\n }\n (_props_onKeyDown = (_props = props).onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(_props, e);\n });\n const usePositionSlot = (toastPosition)=>{\n var _toastsToRender_get;\n const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n const { announceToast, toasterRef } = useToastAnnounce(announceProp !== null && announceProp !== void 0 ? announceProp : announce);\n return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: useMergedRefs(focusManagementRef, toasterRef),\n children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(ToastContainer, {\n ...toast,\n tryRestoreFocus: tryRestoreFocus,\n intent: toast.intent,\n announce: announceToast,\n key: toast.toastId,\n visible: isToastVisible(toast.toastId)\n }, toast.content)),\n onKeyDown,\n ...focusableGroupAttr,\n 'data-toaster-position': toastPosition,\n role: 'list'\n },\n elementType: 'div'\n });\n };\n return {\n dir,\n mountNode,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n top: 'div',\n bottom: 'div'\n },\n root: slot.always(rootProps, {\n elementType: 'div'\n }),\n bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n top: usePositionSlot(TOAST_POSITIONS.top),\n bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n announceRef,\n offset,\n announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,\n renderAriaLive: !announceProp\n };\n};\n"],"names":["useToaster_unstable","props","offset","announce","announceProp","mountNode","rest","announceRef","React","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useToaster","useCallback","message","options","current","dir","useFluent","rootProps","slot","always","getNativeElementProps","elementType","focusableGroupAttr","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Escape","onKeyDown","useEventCallback","e","_props_onKeyDown","_props","key","preventDefault","call","usePositionSlot","toastPosition","_toastsToRender_get","focusManagementRef","useToasterFocusManagement_unstable","announceToast","toasterRef","useToastAnnounce","optional","has","defaultProps","ref","useMergedRefs","children","get","map","toast","createElement","ToastContainer","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","TOAST_POSITIONS","renderAriaLive"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACsD;qCAC7B;8BACd;8BACX;uBACqB;gCACb;2CACoB;kCAClB;AAKtB,MAAMA,sBAAsB,CAACC;IACpC,MAAM,EAAEC,MAAM,EAAEC,UAAUC,YAAY,EAAEC,SAAS,EAAE,GAAGC,MAAM,
|
|
1
|
+
{"version":3,"sources":["useToaster.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */ export const useToaster_unstable = (props)=>{\n const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;\n const announceRef = React.useRef(()=>null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);\n const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);\n const { dir } = useFluent();\n const rootProps = slot.always(getNativeElementProps('div', rest), {\n elementType: 'div'\n });\n const focusableGroupAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus',\n ignoreDefaultKeydown: {\n Escape: true\n }\n });\n const onKeyDown = useEventCallback((e)=>{\n var _props_onKeyDown, _props;\n if (e.key === Escape) {\n e.preventDefault();\n closeAllToasts();\n }\n (_props_onKeyDown = (_props = props).onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(_props, e);\n });\n const usePositionSlot = (toastPosition)=>{\n var _toastsToRender_get;\n const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n const { announceToast, toasterRef } = useToastAnnounce(announceProp !== null && announceProp !== void 0 ? announceProp : announce);\n return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: useMergedRefs(focusManagementRef, toasterRef),\n children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(ToastContainer, {\n ...toast,\n tryRestoreFocus: tryRestoreFocus,\n intent: toast.intent,\n announce: announceToast,\n key: toast.toastId,\n visible: isToastVisible(toast.toastId)\n }, toast.content)),\n onKeyDown,\n ...focusableGroupAttr,\n 'data-toaster-position': toastPosition,\n role: 'list'\n },\n elementType: 'div'\n });\n };\n return {\n dir,\n mountNode,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n top: 'div',\n bottom: 'div'\n },\n root: slot.always(rootProps, {\n elementType: 'div'\n }),\n bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n top: usePositionSlot(TOAST_POSITIONS.top),\n bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n announceRef,\n offset,\n announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,\n renderAriaLive: !announceProp,\n inline\n };\n};\n"],"names":["useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","rest","announceRef","React","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useToaster","useCallback","message","options","current","dir","useFluent","rootProps","slot","always","getNativeElementProps","elementType","focusableGroupAttr","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Escape","onKeyDown","useEventCallback","e","_props_onKeyDown","_props","key","preventDefault","call","usePositionSlot","toastPosition","_toastsToRender_get","focusManagementRef","useToasterFocusManagement_unstable","announceToast","toasterRef","useToastAnnounce","optional","has","defaultProps","ref","useMergedRefs","children","get","map","toast","createElement","ToastContainer","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","TOAST_POSITIONS","renderAriaLive"],"mappings":"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"}
|
|
@@ -26,9 +26,19 @@ const toasterClassNames = {
|
|
|
26
26
|
*/ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r3hfdjz", null, [
|
|
27
27
|
".r3hfdjz{position:fixed;width:292px;pointer-events:none;}"
|
|
28
28
|
]);
|
|
29
|
+
const useToasterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
30
|
+
inline: {
|
|
31
|
+
qhf8xq: "f1euv43f"
|
|
32
|
+
}
|
|
33
|
+
}, {
|
|
34
|
+
d: [
|
|
35
|
+
".f1euv43f{position:absolute;}"
|
|
36
|
+
]
|
|
37
|
+
});
|
|
29
38
|
const useToasterStyles_unstable = (state)=>{
|
|
30
39
|
const rootBaseClassName = useRootBaseClassName();
|
|
31
|
-
const
|
|
40
|
+
const styles = useToasterStyles();
|
|
41
|
+
const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
32
42
|
if (state.bottomStart) {
|
|
33
43
|
var _state_bottomStart;
|
|
34
44
|
state.bottomStart.className = className;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToasterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r3hfdjz\", null, [\".r3hfdjz{position:fixed;width:292px;pointer-events:none;}\"]);\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.root.className);\n if (state.bottomStart) {\n var _state_bottomStart;\n state.bottomStart.className = className;\n var _style;\n (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n if (state.bottomEnd) {\n var _state_bottomEnd;\n state.bottomEnd.className = className;\n var _style1;\n (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n if (state.topStart) {\n var _state_topStart;\n state.topStart.className = className;\n var _style2;\n (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n if (state.topEnd) {\n var _state_topEnd;\n state.topEnd.className = className;\n var _style3;\n (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n if (state.top) {\n var _state_top;\n state.top.className = className;\n var _style4;\n (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n if (state.bottom) {\n var _state_bottom;\n state.bottom.className = className;\n var _style5;\n (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n return state;\n};\n//# sourceMappingURL=useToasterStyles.styles.js.map"],"names":["toasterClassNames","useToasterStyles_unstable","root","useRootBaseClassName","__resetStyles","state","rootBaseClassName","className","mergeClasses","bottomStart","_state_bottomStart","_style","style","Object","assign","getPositionStyles","TOAST_POSITIONS","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;
|
|
1
|
+
{"version":3,"sources":["useToasterStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r3hfdjz\", null, [\".r3hfdjz{position:fixed;width:292px;pointer-events:none;}\"]);\nconst useToasterStyles = /*#__PURE__*/__styles({\n inline: {\n qhf8xq: \"f1euv43f\"\n }\n}, {\n d: [\".f1euv43f{position:absolute;}\"]\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n const styles = useToasterStyles();\n const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);\n if (state.bottomStart) {\n var _state_bottomStart;\n state.bottomStart.className = className;\n var _style;\n (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n if (state.bottomEnd) {\n var _state_bottomEnd;\n state.bottomEnd.className = className;\n var _style1;\n (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n if (state.topStart) {\n var _state_topStart;\n state.topStart.className = className;\n var _style2;\n (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n if (state.topEnd) {\n var _state_topEnd;\n state.topEnd.className = className;\n var _style3;\n (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n if (state.top) {\n var _state_top;\n state.top.className = className;\n var _style4;\n (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n if (state.bottom) {\n var _state_bottom;\n state.bottom.className = className;\n var _style5;\n (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n return state;\n};\n//# sourceMappingURL=useToasterStyles.styles.js.map"],"names":["toasterClassNames","useToasterStyles_unstable","root","useRootBaseClassName","__resetStyles","useToasterStyles","__styles","inline","qhf8xq","d","state","rootBaseClassName","styles","className","mergeClasses","bottomStart","_state_bottomStart","_style","style","Object","assign","getPositionStyles","TOAST_POSITIONS","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"mappings":"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"}
|
|
@@ -9,12 +9,11 @@ Object.defineProperty(exports, "getPositionStyles", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const getPositionStyles = (position, dir, offset)=>{
|
|
12
|
-
const positionStyles = {
|
|
13
|
-
position: 'fixed'
|
|
14
|
-
};
|
|
12
|
+
const positionStyles = {};
|
|
15
13
|
var _offset_position;
|
|
16
14
|
const offsetStyles = offset ? isShorthandOffset(offset) ? offset : (_offset_position = offset[position]) !== null && _offset_position !== void 0 ? _offset_position : {} : {};
|
|
17
|
-
const
|
|
15
|
+
const centered = position === 'top' || position === 'bottom';
|
|
16
|
+
const { horizontal = centered ? 0 : 20, vertical = 16 } = offsetStyles;
|
|
18
17
|
const start = dir === 'ltr' ? 'left' : 'right';
|
|
19
18
|
const end = dir === 'ltr' ? 'right' : 'left';
|
|
20
19
|
switch(position){
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["getPositionStyles.js"],"sourcesContent":["export const getPositionStyles = (position, dir, offset)=>{\n const positionStyles = {
|
|
1
|
+
{"version":3,"sources":["getPositionStyles.js"],"sourcesContent":["export const getPositionStyles = (position, dir, offset)=>{\n const positionStyles = {};\n var _offset_position;\n const offsetStyles = offset ? isShorthandOffset(offset) ? offset : (_offset_position = offset[position]) !== null && _offset_position !== void 0 ? _offset_position : {} : {};\n const centered = position === 'top' || position === 'bottom';\n const { horizontal = centered ? 0 : 20, vertical = 16 } = offsetStyles;\n const start = dir === 'ltr' ? 'left' : 'right';\n const end = dir === 'ltr' ? 'right' : 'left';\n switch(position){\n case 'top':\n Object.assign(positionStyles, {\n top: vertical,\n left: `calc(50% + ${horizontal}px)`,\n transform: 'translateX(-50%)'\n });\n break;\n case 'bottom':\n Object.assign(positionStyles, {\n bottom: vertical,\n left: `calc(50% + ${horizontal}px)`,\n transform: 'translateX(-50%)'\n });\n break;\n case 'top-start':\n Object.assign(positionStyles, {\n top: vertical,\n [start]: horizontal\n });\n break;\n case 'top-end':\n Object.assign(positionStyles, {\n top: vertical,\n [end]: horizontal\n });\n break;\n case 'bottom-start':\n Object.assign(positionStyles, {\n bottom: vertical,\n [start]: horizontal\n });\n break;\n case 'bottom-end':\n Object.assign(positionStyles, {\n bottom: vertical,\n [end]: horizontal\n });\n break;\n }\n return positionStyles;\n};\nfunction isShorthandOffset(offset) {\n return 'horizontal' in offset || 'vertical' in offset;\n}\n"],"names":["getPositionStyles","position","dir","offset","positionStyles","_offset_position","offsetStyles","isShorthandOffset","centered","horizontal","vertical","start","end","Object","assign","top","left","transform","bottom"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,oBAAoB,CAACC,UAAUC,KAAKC;IAC7C,MAAMC,iBAAiB,CAAC;IACxB,IAAIC;IACJ,MAAMC,eAAeH,SAASI,kBAAkBJ,UAAUA,SAAS,AAACE,CAAAA,mBAAmBF,MAAM,CAACF,SAAS,AAAD,MAAO,QAAQI,qBAAqB,KAAK,IAAIA,mBAAmB,CAAC,IAAI,CAAC;IAC5K,MAAMG,WAAWP,aAAa,SAASA,aAAa;IACpD,MAAM,EAAEQ,aAAaD,WAAW,IAAI,EAAE,EAAEE,WAAW,EAAE,EAAE,GAAGJ;IAC1D,MAAMK,QAAQT,QAAQ,QAAQ,SAAS;IACvC,MAAMU,MAAMV,QAAQ,QAAQ,UAAU;IACtC,OAAOD;QACH,KAAK;YACDY,OAAOC,MAAM,CAACV,gBAAgB;gBAC1BW,KAAKL;gBACLM,MAAM,CAAC,WAAW,EAAEP,WAAW,GAAG,CAAC;gBACnCQ,WAAW;YACf;YACA;QACJ,KAAK;YACDJ,OAAOC,MAAM,CAACV,gBAAgB;gBAC1Bc,QAAQR;gBACRM,MAAM,CAAC,WAAW,EAAEP,WAAW,GAAG,CAAC;gBACnCQ,WAAW;YACf;YACA;QACJ,KAAK;YACDJ,OAAOC,MAAM,CAACV,gBAAgB;gBAC1BW,KAAKL;gBACL,CAACC,MAAM,EAAEF;YACb;YACA;QACJ,KAAK;YACDI,OAAOC,MAAM,CAACV,gBAAgB;gBAC1BW,KAAKL;gBACL,CAACE,IAAI,EAAEH;YACX;YACA;QACJ,KAAK;YACDI,OAAOC,MAAM,CAACV,gBAAgB;gBAC1Bc,QAAQR;gBACR,CAACC,MAAM,EAAEF;YACb;YACA;QACJ,KAAK;YACDI,OAAOC,MAAM,CAACV,gBAAgB;gBAC1Bc,QAAQR;gBACR,CAACE,IAAI,EAAEH;YACX;YACA;IACR;IACA,OAAOL;AACX;AACA,SAASG,kBAAkBJ,MAAM;IAC7B,OAAO,gBAAgBA,UAAU,cAAcA;AACnD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toast",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230911-0418.1",
|
|
4
4
|
"description": "Toast component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -29,22 +29,22 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
32
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20230911-0418.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230911-0418.1",
|
|
34
34
|
"@fluentui/scripts-api-extractor": "*",
|
|
35
35
|
"@fluentui/scripts-tasks": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-transition-group": "^4.4.1",
|
|
39
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
|
39
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20230911-0418.1",
|
|
40
|
+
"@fluentui/react-aria": "0.0.0-nightly-20230911-0418.1",
|
|
41
41
|
"@fluentui/react-icons": "^2.0.207",
|
|
42
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
43
|
-
"@fluentui/react-portal": "0.0.0-nightly-
|
|
44
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
45
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
46
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
47
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
42
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230911-0418.1",
|
|
43
|
+
"@fluentui/react-portal": "0.0.0-nightly-20230911-0418.1",
|
|
44
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230911-0418.1",
|
|
45
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20230911-0418.1",
|
|
46
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230911-0418.1",
|
|
47
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230911-0418.1",
|
|
48
48
|
"@griffel/react": "^1.5.14",
|
|
49
49
|
"@swc/helpers": "^0.5.1"
|
|
50
50
|
},
|