@fluentui/react-dialog 9.5.1 → 9.5.3
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 +90 -6
- package/CHANGELOG.md +34 -7
- package/dist/index.d.ts +5 -3
- package/lib/components/Dialog/renderDialog.js +3 -3
- package/lib/components/Dialog/renderDialog.js.map +1 -1
- package/lib/components/Dialog/useDialog.js +11 -1
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/components/Dialog/useDialogContextValues.js +5 -1
- package/lib/components/Dialog/useDialogContextValues.js.map +1 -1
- package/lib/components/DialogActions/renderDialogActions.js +4 -4
- package/lib/components/DialogActions/renderDialogActions.js.map +1 -1
- package/lib/components/DialogBody/renderDialogBody.js +4 -4
- package/lib/components/DialogBody/renderDialogBody.js.map +1 -1
- package/lib/components/DialogContent/renderDialogContent.js +4 -4
- package/lib/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib/components/DialogSurface/renderDialogSurface.js +5 -5
- package/lib/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +1 -8
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogTitle/DialogTitle.types.js.map +1 -1
- package/lib/components/DialogTitle/renderDialogTitle.js +4 -4
- package/lib/components/DialogTitle/renderDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js +2 -2
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.js +6 -2
- package/lib/components/DialogTitle/useDialogTitleStyles.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +1 -4
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib/contexts/dialogContext.js.map +1 -1
- package/lib-commonjs/components/Dialog/renderDialog.js +4 -5
- package/lib-commonjs/components/Dialog/renderDialog.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialog.js +8 -1
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialogContextValues.js +3 -1
- package/lib-commonjs/components/Dialog/useDialogContextValues.js.map +1 -1
- package/lib-commonjs/components/DialogActions/renderDialogActions.js +4 -5
- package/lib-commonjs/components/DialogActions/renderDialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogBody/renderDialogBody.js +4 -5
- package/lib-commonjs/components/DialogBody/renderDialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogContent/renderDialogContent.js +4 -5
- package/lib-commonjs/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js +5 -6
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +1 -6
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js +4 -5
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js +2 -2
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js +15 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +1 -2
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/package.json +7 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,91 @@
|
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 24 Apr 2023 08:09:10 GMT",
|
|
6
|
+
"tag": "@fluentui/react-dialog_v9.5.3",
|
|
7
|
+
"version": "9.5.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-dialog",
|
|
13
|
+
"commit": "b287dc6426477a8ec03b6a845ea0ee3ba0bfb726",
|
|
14
|
+
"comment": "bugfix: DialogTitle root as h2 by default"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
18
|
+
"package": "@fluentui/react-dialog",
|
|
19
|
+
"commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11",
|
|
20
|
+
"comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
24
|
+
"package": "@fluentui/react-dialog",
|
|
25
|
+
"commit": "1227882a7a3813f21c45df6eb27aa65a89a5c45c",
|
|
26
|
+
"comment": "chore: hoist tabster modal attributes to Dialog component"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-dialog",
|
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
|
|
32
|
+
"commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Mon, 17 Apr 2023 17:53:49 GMT",
|
|
39
|
+
"tag": "@fluentui/react-dialog_v9.5.2",
|
|
40
|
+
"version": "9.5.2",
|
|
41
|
+
"comments": {
|
|
42
|
+
"patch": [
|
|
43
|
+
{
|
|
44
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
45
|
+
"package": "@fluentui/react-dialog",
|
|
46
|
+
"commit": "46c89e8e688152ab8d0ed44ed79572508e4fb50e",
|
|
47
|
+
"comment": "chore: adopts custom JSX pragma"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-dialog",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.8.0",
|
|
53
|
+
"commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-dialog",
|
|
58
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.1",
|
|
59
|
+
"commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-dialog",
|
|
64
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.18",
|
|
65
|
+
"commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-dialog",
|
|
70
|
+
"comment": "Bump @fluentui/react-aria to v9.3.18",
|
|
71
|
+
"commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-dialog",
|
|
76
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.5",
|
|
77
|
+
"commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-dialog",
|
|
82
|
+
"comment": "Bump @fluentui/react-portal to v9.2.6",
|
|
83
|
+
"commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"date": "Wed, 12 Apr 2023 09:31:43 GMT",
|
|
6
90
|
"tag": "@fluentui/react-dialog_v9.5.1",
|
|
7
91
|
"version": "9.5.1",
|
|
8
92
|
"comments": {
|
|
@@ -17,31 +101,31 @@
|
|
|
17
101
|
"author": "beachball",
|
|
18
102
|
"package": "@fluentui/react-dialog",
|
|
19
103
|
"comment": "Bump @fluentui/react-utilities to v9.7.4",
|
|
20
|
-
"commit": "
|
|
104
|
+
"commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
|
|
21
105
|
},
|
|
22
106
|
{
|
|
23
107
|
"author": "beachball",
|
|
24
108
|
"package": "@fluentui/react-dialog",
|
|
25
109
|
"comment": "Bump @fluentui/react-context-selector to v9.1.17",
|
|
26
|
-
"commit": "
|
|
110
|
+
"commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
|
|
27
111
|
},
|
|
28
112
|
{
|
|
29
113
|
"author": "beachball",
|
|
30
114
|
"package": "@fluentui/react-dialog",
|
|
31
115
|
"comment": "Bump @fluentui/react-aria to v9.3.17",
|
|
32
|
-
"commit": "
|
|
116
|
+
"commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
|
|
33
117
|
},
|
|
34
118
|
{
|
|
35
119
|
"author": "beachball",
|
|
36
120
|
"package": "@fluentui/react-dialog",
|
|
37
121
|
"comment": "Bump @fluentui/react-tabster to v9.6.4",
|
|
38
|
-
"commit": "
|
|
122
|
+
"commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
|
|
39
123
|
},
|
|
40
124
|
{
|
|
41
125
|
"author": "beachball",
|
|
42
126
|
"package": "@fluentui/react-dialog",
|
|
43
127
|
"comment": "Bump @fluentui/react-portal to v9.2.5",
|
|
44
|
-
"commit": "
|
|
128
|
+
"commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
|
|
45
129
|
}
|
|
46
130
|
]
|
|
47
131
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,49 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 24 Apr 2023 08:09:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.3)
|
|
8
|
+
|
|
9
|
+
Mon, 24 Apr 2023 08:09:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.2..@fluentui/react-dialog_v9.5.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- bugfix: DialogTitle root as h2 by default ([PR #27555](https://github.com/microsoft/fluentui/pull/27555) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com)
|
|
16
|
+
- chore: hoist tabster modal attributes to Dialog component ([PR #27541](https://github.com/microsoft/fluentui/pull/27541) by bernardo.sunderhus@gmail.com)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.2)
|
|
20
|
+
|
|
21
|
+
Mon, 17 Apr 2023 17:53:49 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.1..@fluentui/react-dialog_v9.5.2)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- chore: adopts custom JSX pragma ([PR #27475](https://github.com/microsoft/fluentui/pull/27475) by bernardo.sunderhus@gmail.com)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.8.0 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
|
|
28
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.1 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
|
|
29
|
+
- Bump @fluentui/react-context-selector to v9.1.18 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
|
|
30
|
+
- Bump @fluentui/react-aria to v9.3.18 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.6.5 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
|
|
32
|
+
- Bump @fluentui/react-portal to v9.2.6 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.1)
|
|
8
35
|
|
|
9
|
-
Wed, 12 Apr 2023 09:
|
|
36
|
+
Wed, 12 Apr 2023 09:31:43 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.0..@fluentui/react-dialog_v9.5.1)
|
|
11
38
|
|
|
12
39
|
### Patches
|
|
13
40
|
|
|
14
41
|
- fix: use tabster to focus on trigger, instead of manually invoking .focus ([PR #27512](https://github.com/microsoft/fluentui/pull/27512) by bernardo.sunderhus@gmail.com)
|
|
15
|
-
- Bump @fluentui/react-utilities to v9.7.4 ([
|
|
16
|
-
- Bump @fluentui/react-context-selector to v9.1.17 ([
|
|
17
|
-
- Bump @fluentui/react-aria to v9.3.17 ([
|
|
18
|
-
- Bump @fluentui/react-tabster to v9.6.4 ([
|
|
19
|
-
- Bump @fluentui/react-portal to v9.2.5 ([
|
|
42
|
+
- Bump @fluentui/react-utilities to v9.7.4 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
|
|
43
|
+
- Bump @fluentui/react-context-selector to v9.1.17 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
|
|
44
|
+
- Bump @fluentui/react-aria to v9.3.17 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
|
|
45
|
+
- Bump @fluentui/react-tabster to v9.6.4 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
|
|
46
|
+
- Bump @fluentui/react-portal to v9.2.5 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
|
|
20
47
|
|
|
21
48
|
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.0)
|
|
22
49
|
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ import { ReactElement } from 'react';
|
|
|
11
11
|
import type { Slot } from '@fluentui/react-utilities';
|
|
12
12
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
13
13
|
import type { TriggerProps } from '@fluentui/react-utilities';
|
|
14
|
+
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
|
|
@@ -111,7 +112,7 @@ declare type DialogContextValue = {
|
|
|
111
112
|
* Requests dialog main component to update it's internal open state
|
|
112
113
|
*/
|
|
113
114
|
requestOpenChange: (data: DialogOpenChangeData) => void;
|
|
114
|
-
}
|
|
115
|
+
} & Partial<ReturnType<typeof useModalAttributes>>;
|
|
115
116
|
|
|
116
117
|
declare type DialogContextValues = {
|
|
117
118
|
dialog: DialogContextValue;
|
|
@@ -264,9 +265,10 @@ export declare type DialogTitleProps = ComponentProps<DialogTitleSlots>;
|
|
|
264
265
|
|
|
265
266
|
export declare type DialogTitleSlots = {
|
|
266
267
|
/**
|
|
267
|
-
* By default this is a
|
|
268
|
+
* By default this is a h2, but can be any heading or div,
|
|
269
|
+
* if `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes
|
|
268
270
|
*/
|
|
269
|
-
root: Slot<'
|
|
271
|
+
root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
|
|
270
272
|
/**
|
|
271
273
|
* By default a Dialog with modalType='non-modal' will have a close button action
|
|
272
274
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
2
|
import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Dialog
|
|
@@ -8,9 +8,9 @@ export const renderDialog_unstable = (state, contextValues) => {
|
|
|
8
8
|
content,
|
|
9
9
|
trigger
|
|
10
10
|
} = state;
|
|
11
|
-
return /*#__PURE__*/
|
|
11
|
+
return /*#__PURE__*/createElement(DialogProvider, {
|
|
12
12
|
value: contextValues.dialog
|
|
13
|
-
}, /*#__PURE__*/
|
|
13
|
+
}, /*#__PURE__*/createElement(DialogSurfaceProvider, {
|
|
14
14
|
value: contextValues.dialogSurface
|
|
15
15
|
}, trigger, content));
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createElement","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface"],"sources":["../../../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n const { content, trigger } = state;\n\n return (\n <DialogProvider value={contextValues.dialog}>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n {trigger}\n {content}\n </DialogSurfaceProvider>\n </DialogProvider>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,cAAc,EAAEC,qBAAqB,QAAQ;AAGtD;;;AAGA,OAAO,MAAMC,qBAAA,GAAwBA,CAACC,KAAA,EAAoBC,aAAA,KAAuC;EAC/F,MAAM;IAAEC,OAAA;IAASC;EAAO,CAAE,GAAGH,KAAA;EAE7B,oBACEJ,aAdJ,CAcKC,cAAA;IAAeO,KAAA,EAAOH,aAAA,CAAcI;kBACnCT,aAfN,CAeOE,qBAAA;IAAsBM,KAAA,EAAOH,aAAA,CAAcK;KACzCH,OAAA,EACAD,OAAA;AAIT"}
|
|
@@ -3,6 +3,7 @@ import { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffec
|
|
|
3
3
|
import { useHasParentContext } from '@fluentui/react-context-selector';
|
|
4
4
|
import { useDisableBodyScroll, useFocusFirstElement } from '../../utils';
|
|
5
5
|
import { DialogContext } from '../../contexts';
|
|
6
|
+
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
6
7
|
/**
|
|
7
8
|
* Create the state required to render Dialog.
|
|
8
9
|
*
|
|
@@ -40,6 +41,13 @@ export const useDialog_unstable = props => {
|
|
|
40
41
|
return disableBodyScroll();
|
|
41
42
|
}
|
|
42
43
|
}, [disableBodyScroll, isBodyScrollLocked]);
|
|
44
|
+
const {
|
|
45
|
+
modalAttributes,
|
|
46
|
+
triggerAttributes
|
|
47
|
+
} = useModalAttributes({
|
|
48
|
+
trapFocus: modalType !== 'non-modal',
|
|
49
|
+
legacyTrapFocus: !inertTrapFocus
|
|
50
|
+
});
|
|
43
51
|
return {
|
|
44
52
|
components: {
|
|
45
53
|
backdrop: 'div'
|
|
@@ -52,7 +60,9 @@ export const useDialog_unstable = props => {
|
|
|
52
60
|
requestOpenChange,
|
|
53
61
|
dialogTitleId: useId('dialog-title-'),
|
|
54
62
|
isNestedDialog: useHasParentContext(DialogContext),
|
|
55
|
-
dialogRef: focusRef
|
|
63
|
+
dialogRef: focusRef,
|
|
64
|
+
modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,
|
|
65
|
+
triggerAttributes
|
|
56
66
|
};
|
|
57
67
|
};
|
|
58
68
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","disableBodyScroll","isBodyScrollLocked","Boolean","components","backdrop","dialogTitleId","isNestedDialog","dialogRef","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"
|
|
1
|
+
{"version":3,"names":["React","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useModalAttributes","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","disableBodyScroll","isBodyScrollLocked","Boolean","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","isNestedDialog","dialogRef","undefined","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"sources":["../../../src/components/Dialog/useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n const disableBodyScroll = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n useIsomorphicLayoutEffect(() => {\n if (isBodyScrollLocked) {\n return disableBodyScroll();\n }\n }, [disableBodyScroll, isBodyScrollLocked]);\n\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus,\n });\n\n return {\n components: {\n backdrop: 'div',\n },\n inertTrapFocus,\n open,\n modalType,\n content: open ? content : null,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog: useHasParentContext(DialogContext),\n dialogRef: focusRef,\n modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n triggerAttributes,\n };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(\n 'Dialog must contain at least one child <DialogSurface/>,\\n' +\n 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n );\n }\n }\n switch (childrenArray.length) {\n // case where there's a trigger followed by content\n case 2:\n return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n // case where there's only content\n case 1:\n return [undefined, childrenArray[0]];\n // unknown case\n default:\n return [undefined, undefined];\n }\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ;AACzF,SAASC,mBAAmB,QAAQ;AACpC,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ;AAC3D,SAASC,aAAa,QAAQ;AAG9B,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;AAQA,OAAO,MAAMC,kBAAA,GAAsBC,KAAA,IAAoC;EACrE,MAAM;IAAEC,QAAA;IAAUC,SAAA,GAAY;IAASC,YAAA;IAAcC,cAAA,GAAiB;EAAK,CAAE,GAAGJ,KAAA;EAEhF,MAAM,CAACK,OAAA,EAASC,OAAA,CAAQ,GAAGC,2BAAA,CAA4BN,QAAA;EAEvD,MAAM,CAACO,IAAA,EAAMC,OAAA,CAAQ,GAAGnB,oBAAA,CAAqB;IAC3CoB,KAAA,EAAOV,KAAA,CAAMQ,IAAI;IACjBG,YAAA,EAAcX,KAAA,CAAMY,WAAW;IAC/BC,YAAA,EAAc;EAChB;EAEA,MAAMC,iBAAA,GAAoBvB,gBAAA,CAAkBwB,IAAA,IAA+B;IACzEZ,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAeY,IAAA,CAAKC,KAAK,EAAED,IAAA;IAE3B;IACA;IACA,IAAI,CAACA,IAAA,CAAKC,KAAK,CAACC,kBAAkB,IAAI;MACpCR,OAAA,CAAQM,IAAA,CAAKP,IAAI;IACnB;EACF;EAEA,MAAMU,QAAA,GAAWtB,oBAAA,CAAqBY,IAAA,EAAMN,SAAA;EAC5C,MAAMiB,iBAAA,GAAoBxB,oBAAA;EAC1B,MAAMyB,kBAAA,GAAqBC,OAAA,CAAQb,IAAA,IAAQN,SAAA,KAAc;EAEzDT,yBAAA,CAA0B,MAAM;IAC9B,IAAI2B,kBAAA,EAAoB;MACtB,OAAOD,iBAAA;IACT;EACF,GAAG,CAACA,iBAAA,EAAmBC,kBAAA,CAAmB;EAE1C,MAAM;IAAEE,eAAA;IAAiBC;EAAiB,CAAE,GAAGzB,kBAAA,CAAmB;IAChE0B,SAAA,EAAWtB,SAAA,KAAc;IACzBuB,eAAA,EAAiB,CAACrB;EACpB;EAEA,OAAO;IACLsB,UAAA,EAAY;MACVC,QAAA,EAAU;IACZ;IACAvB,cAAA;IACAI,IAAA;IACAN,SAAA;IACAI,OAAA,EAASE,IAAA,GAAOF,OAAA,GAAU,IAAI;IAC9BD,OAAA;IACAS,iBAAA;IACAc,aAAA,EAAepC,KAAA,CAAM;IACrBqC,cAAA,EAAgBnC,mBAAA,CAAoBG,aAAA;IACpCiC,SAAA,EAAWZ,QAAA;IACXI,eAAA,EAAiBpB,SAAA,KAAc,cAAcoB,eAAA,GAAkBS,SAAS;IACxER;EACF;AACF;AAEA;;;AAGA,SAAShB,4BACPN,QAAyB,EACsC;EAC/D,MAAM+B,aAAA,GAAgB3C,KAAA,CAAM4C,QAAQ,CAACC,OAAO,CAACjC,QAAA;EAC7C,IAAIkC,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC,IAAIL,aAAA,CAAcM,MAAM,KAAK,KAAKN,aAAA,CAAcM,MAAM,KAAK,GAAG;MAC5D;MACAC,OAAA,CAAQC,IAAI,CACV,+DACE;IAEN;EACF;EACA,QAAQR,aAAA,CAAcM,MAAM;IAC1B;IACA,KAAK;MACH,OAAON,aAAA;IACT;IACA,KAAK;MACH,OAAO,CAACD,SAAA,EAAWC,aAAa,CAAC,EAAE,CAAC;IACtC;IACA;MACE,OAAO,CAACD,SAAA,EAAWA,SAAA,CAAU;EAAA;AAEnC"}
|
|
@@ -6,7 +6,9 @@ export function useDialogContextValues_unstable(state) {
|
|
|
6
6
|
dialogTitleId,
|
|
7
7
|
isNestedDialog,
|
|
8
8
|
inertTrapFocus,
|
|
9
|
-
requestOpenChange
|
|
9
|
+
requestOpenChange,
|
|
10
|
+
modalAttributes,
|
|
11
|
+
triggerAttributes
|
|
10
12
|
} = state;
|
|
11
13
|
/**
|
|
12
14
|
* This context is created with "@fluentui/react-context-selector",
|
|
@@ -19,6 +21,8 @@ export function useDialogContextValues_unstable(state) {
|
|
|
19
21
|
dialogTitleId,
|
|
20
22
|
isNestedDialog,
|
|
21
23
|
inertTrapFocus,
|
|
24
|
+
modalAttributes,
|
|
25
|
+
triggerAttributes,
|
|
22
26
|
requestOpenChange
|
|
23
27
|
};
|
|
24
28
|
const dialogSurface = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","dialog","dialogSurface"],"sources":["../../../src/components/Dialog/useDialogContextValues.ts"],"sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n const {
|
|
1
|
+
{"version":3,"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","modalAttributes","triggerAttributes","dialog","dialogSurface"],"sources":["../../../src/components/Dialog/useDialogContextValues.ts"],"sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n const {\n modalType,\n open,\n dialogRef,\n dialogTitleId,\n isNestedDialog,\n inertTrapFocus,\n requestOpenChange,\n modalAttributes,\n triggerAttributes,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const dialog: DialogContextValue = {\n open,\n modalType,\n dialogRef,\n dialogTitleId,\n isNestedDialog,\n inertTrapFocus,\n modalAttributes,\n triggerAttributes,\n requestOpenChange,\n };\n\n const dialogSurface: DialogSurfaceContextValue = false;\n\n return { dialog, dialogSurface };\n}\n"],"mappings":"AAGA,OAAO,SAASA,gCAAgCC,KAAkB,EAAuB;EACvF,MAAM;IACJC,SAAA;IACAC,IAAA;IACAC,SAAA;IACAC,aAAA;IACAC,cAAA;IACAC,cAAA;IACAC,iBAAA;IACAC,eAAA;IACAC;EAAiB,CAClB,GAAGT,KAAA;EAEJ;;;;EAIA,MAAMU,MAAA,GAA6B;IACjCR,IAAA;IACAD,SAAA;IACAE,SAAA;IACAC,aAAA;IACAC,cAAA;IACAC,cAAA;IACAE,eAAA;IACAC,iBAAA;IACAF;EACF;EAEA,MAAMI,aAAA,GAA2C,KAAK;EAEtD,OAAO;IAAED,MAAA;IAAQC;EAAc;AACjC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
+
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of DialogActions
|
|
5
5
|
*/
|
|
@@ -7,8 +7,8 @@ export const renderDialogActions_unstable = state => {
|
|
|
7
7
|
const {
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
|
-
} =
|
|
10
|
+
} = getSlotsNext(state);
|
|
11
11
|
// TODO Add additional slots in the appropriate place
|
|
12
|
-
return /*#__PURE__*/
|
|
12
|
+
return /*#__PURE__*/createElement(slots.root, slotProps.root);
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=renderDialogActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createElement","getSlotsNext","renderDialogActions_unstable","state","slots","slotProps","root"],"sources":["../../../src/components/DialogActions/renderDialogActions.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n const { slots, slotProps } = getSlotsNext<DialogActionsSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA8B;EACzE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAiCE,KAAA;EAE9D;EACA,oBAAOH,aAdT,CAcUI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI;AACvC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
+
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of DialogBody
|
|
5
5
|
*/
|
|
@@ -7,8 +7,8 @@ export const renderDialogBody_unstable = state => {
|
|
|
7
7
|
const {
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
|
-
} =
|
|
10
|
+
} = getSlotsNext(state);
|
|
11
11
|
// TODO Add additional slots in the appropriate place
|
|
12
|
-
return /*#__PURE__*/
|
|
12
|
+
return /*#__PURE__*/createElement(slots.root, slotProps.root);
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=renderDialogBody.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createElement","getSlotsNext","renderDialogBody_unstable","state","slots","slotProps","root"],"sources":["../../../src/components/DialogBody/renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n const { slots, slotProps } = getSlotsNext<DialogBodySlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA8BE,KAAA;EAE3D;EACA,oBAAOH,aAdT,CAcUI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI;AACvC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
+
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of DialogContent
|
|
5
5
|
*/
|
|
@@ -7,7 +7,7 @@ export const renderDialogContent_unstable = state => {
|
|
|
7
7
|
const {
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
|
-
} =
|
|
11
|
-
return /*#__PURE__*/
|
|
10
|
+
} = getSlotsNext(state);
|
|
11
|
+
return /*#__PURE__*/createElement(slots.root, slotProps.root);
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=renderDialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createElement","getSlotsNext","renderDialogContent_unstable","state","slots","slotProps","root"],"sources":["../../../src/components/DialogContent/renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState) => {\n const { slots, slotProps } = getSlotsNext<DialogContentSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA8B;EACzE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAiCE,KAAA;EAE9D,oBAAOH,aAbT,CAaUI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI;AACvC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
+
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
import { DialogSurfaceProvider } from '../../contexts';
|
|
4
4
|
import { Portal } from '@fluentui/react-portal';
|
|
5
5
|
/**
|
|
@@ -9,9 +9,9 @@ export const renderDialogSurface_unstable = (state, contextValues) => {
|
|
|
9
9
|
const {
|
|
10
10
|
slots,
|
|
11
11
|
slotProps
|
|
12
|
-
} =
|
|
13
|
-
return /*#__PURE__*/
|
|
12
|
+
} = getSlotsNext(state);
|
|
13
|
+
return /*#__PURE__*/createElement(Portal, null, slots.backdrop && /*#__PURE__*/createElement(slots.backdrop, slotProps.backdrop), /*#__PURE__*/createElement(DialogSurfaceProvider, {
|
|
14
14
|
value: contextValues.dialogSurface
|
|
15
|
-
}, /*#__PURE__*/
|
|
15
|
+
}, /*#__PURE__*/createElement(slots.root, slotProps.root)));
|
|
16
16
|
};
|
|
17
17
|
//# sourceMappingURL=renderDialogSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createElement","getSlotsNext","DialogSurfaceProvider","Portal","renderDialogSurface_unstable","state","contextValues","slots","slotProps","backdrop","value","dialogSurface","root"],"sources":["../../../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n const { slots, slotProps } = getSlotsNext<DialogSurfaceSlots>(state);\n\n return (\n <Portal>\n {slots.backdrop && <slots.backdrop {...slotProps.backdrop} />}\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n <slots.root {...slotProps.root} />\n </DialogSurfaceProvider>\n </Portal>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,4BAAA,GAA+BA,CAACC,KAAA,EAA2BC,aAAA,KAA8C;EACpH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGP,YAAA,CAAiCI,KAAA;EAE9D,oBACEL,aAhBJ,CAgBKG,MAAA,QACEI,KAAA,CAAME,QAAQ,iBAAIT,aAjBzB,CAiB0BO,KAAA,CAAME,QAAQ,EAAKD,SAAA,CAAUC,QAAQ,gBACzDT,aAlBN,CAkBOE,qBAAA;IAAsBQ,KAAA,EAAOJ,aAAA,CAAcK;kBAC1CX,aAnBR,CAmBSO,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAItC"}
|
|
@@ -2,7 +2,6 @@ import * as React from 'react';
|
|
|
2
2
|
import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';
|
|
3
3
|
import { useDialogContext_unstable } from '../../contexts';
|
|
4
4
|
import { isEscapeKeyDismiss } from '../../utils';
|
|
5
|
-
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
6
5
|
/**
|
|
7
6
|
* Create the state required to render DialogSurface.
|
|
8
7
|
*
|
|
@@ -18,7 +17,7 @@ export const useDialogSurface_unstable = (props, ref) => {
|
|
|
18
17
|
as
|
|
19
18
|
} = props;
|
|
20
19
|
const modalType = useDialogContext_unstable(ctx => ctx.modalType);
|
|
21
|
-
const
|
|
20
|
+
const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);
|
|
22
21
|
const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
|
|
23
22
|
const open = useDialogContext_unstable(ctx => ctx.open);
|
|
24
23
|
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
@@ -50,12 +49,6 @@ export const useDialogSurface_unstable = (props, ref) => {
|
|
|
50
49
|
event.stopPropagation();
|
|
51
50
|
}
|
|
52
51
|
});
|
|
53
|
-
const {
|
|
54
|
-
modalAttributes
|
|
55
|
-
} = useModalAttributes({
|
|
56
|
-
trapFocus: modalType !== 'non-modal',
|
|
57
|
-
legacyTrapFocus: !inertTrapFocus
|
|
58
|
-
});
|
|
59
52
|
return {
|
|
60
53
|
components: {
|
|
61
54
|
backdrop: 'div',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","isEscapeKeyDismiss","
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","isEscapeKeyDismiss","useDialogSurface_unstable","props","ref","backdrop","as","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","stopPropagation","components","root","required","defaultProps","tabIndex","role","undefined"],"sources":["../../../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n resolveShorthand,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss } from '../../utils';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const { backdrop, as } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const open = useDialogContext_unstable(ctx => ctx.open);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (isEscapeKeyDismiss(event, modalType)) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.stopPropagation();\n }\n });\n\n return {\n components: {\n backdrop: 'div',\n root: 'div',\n },\n backdrop: resolveShorthand(backdrop, {\n required: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n onClick: handledBackdropClick,\n },\n }),\n root: getNativeElementProps(as ?? 'div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef),\n }),\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,QACd;AAEP,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,QAAA;IAAUC;EAAE,CAAE,GAAGH,KAAA;EACzB,MAAMI,SAAA,GAAYP,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,eAAA,GAAkBT,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIC,eAAe;EAC5E,MAAMC,SAAA,GAAYV,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIE,SAAS;EAChE,MAAMC,IAAA,GAAOX,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIG,IAAI;EACtD,MAAMC,iBAAA,GAAoBZ,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAII,iBAAiB;EAChF,MAAMC,aAAA,GAAgBb,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIM,aAAa;EAExE,MAAMC,oBAAA,GAAuBlB,gBAAA,CAAkBmB,KAAA,IAA4C;IACzF,IAAIjB,mBAAA,CAAoBI,KAAA,CAAME,QAAQ,GAAG;UACvCY,eAAA,EAAAC,uBAAA;MAAA,CAAAA,uBAAA,IAAAD,eAAA,GAAAd,KAAA,CAAME,QAAQ,EAACc,OAAO,cAAtBD,uBAAA,uBAAAA,uBAAA,CAAAE,IAAA,CAAAH,eAAA,EAAyBD,KAAA;IAC3B;IACA,IAAIT,SAAA,KAAc,WAAW,CAACS,KAAA,CAAMK,kBAAkB,IAAI;MACxDT,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;IACF;EACF;EAEA,MAAMC,aAAA,GAAgB1B,gBAAA,CAAkBmB,KAAA,IAA+C;QACrFQ,gBAAA;IAAA,CAAAA,gBAAA,GAAArB,KAAA,CAAMsB,SAAS,cAAfD,gBAAA,uBAAAA,gBAAA,CAAAJ,IAAA,CAAAjB,KAAA,EAAkBa,KAAA;IAElB,IAAIf,kBAAA,CAAmBe,KAAA,EAAOT,SAAA,GAAY;MACxCK,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;MACA;MACA;MACAN,KAAA,CAAMU,eAAe;IACvB;EACF;EAEA,OAAO;IACLC,UAAA,EAAY;MACVtB,QAAA,EAAU;MACVuB,IAAA,EAAM;IACR;IACAvB,QAAA,EAAUT,gBAAA,CAAiBS,QAAA,EAAU;MACnCwB,QAAA,EAAUlB,IAAA,IAAQJ,SAAA,KAAc;MAChCuB,YAAA,EAAc;QACZ,eAAe;QACfX,OAAA,EAASJ;MACX;IACF;IACAa,IAAA,EAAMjC,qBAAA,CAAsBW,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,KAAK,EAAE;MACvCyB,QAAA,EAAU,CAAC;MACX,cAAcxB,SAAA,KAAc;MAC5ByB,IAAA,EAAMzB,SAAA,KAAc,UAAU,gBAAgB,QAAQ;MACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAG8B,SAAA,GAAYpB,aAAa;MAClE,GAAGV,KAAK;MACR,GAAGM,eAAe;MAClBgB,SAAA,EAAWF,aAAA;MACXnB,GAAA,EAAKN,aAAA,CAAcM,GAAA,EAAKM,SAAA;IAC1B;EACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/DialogTitle/DialogTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n /**\n * By default this is a
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/DialogTitle/DialogTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n /**\n * By default this is a h2, but can be any heading or div,\n * if `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n */\n root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n /**\n * By default a Dialog with modalType='non-modal' will have a close button action\n */\n action?: Slot<'div'>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots>;\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"],"mappings":"AAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
|
|
2
|
+
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of DialogTitle
|
|
5
5
|
*/
|
|
@@ -7,7 +7,7 @@ export const renderDialogTitle_unstable = state => {
|
|
|
7
7
|
const {
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
|
-
} =
|
|
11
|
-
return /*#__PURE__*/
|
|
10
|
+
} = getSlotsNext(state);
|
|
11
|
+
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children), slots.action && /*#__PURE__*/createElement(slots.action, slotProps.action));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=renderDialogTitle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createElement","Fragment","getSlotsNext","renderDialogTitle_unstable","state","slots","slotProps","root","children","action"],"sources":["../../../src/components/DialogTitle/renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n const { slots, slotProps } = getSlotsNext<DialogTitleSlots>(state);\n\n return (\n <>\n <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n {slots.action && <slots.action {...slotProps.action} />}\n </>\n );\n};\n"],"mappings":"AAAA,2BACA,yBACA,yBAEA,SAASA,aAAa,EAAEC,QAAQ,QAAQ;AAExC,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBACEJ,aAdJ,CADAC,QAAA,qBAgBMD,aAfN,CAeOK,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAAGD,SAAA,CAAUC,IAAI,CAACC,QAAQ,GACvDH,KAAA,CAAMI,MAAM,iBAAIT,aAhBvB,CAgBwBK,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM;AAGzD"}
|
|
@@ -23,10 +23,10 @@ export const useDialogTitle_unstable = (props, ref) => {
|
|
|
23
23
|
const internalStyles = useDialogTitleInternalStyles();
|
|
24
24
|
return {
|
|
25
25
|
components: {
|
|
26
|
-
root: '
|
|
26
|
+
root: 'h2',
|
|
27
27
|
action: 'div'
|
|
28
28
|
},
|
|
29
|
-
root: getNativeElementProps(as !== null && as !== void 0 ? as : '
|
|
29
|
+
root: getNativeElementProps(as !== null && as !== void 0 ? as : 'h2', {
|
|
30
30
|
ref,
|
|
31
31
|
id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
|
|
32
32
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss24Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","createElement","disableButtonEnhancement","type","className","button"],"sources":["../../../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n const { as, action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: '
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss24Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","createElement","disableButtonEnhancement","type","className","button"],"sources":["../../../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n const { as, action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'h2',\n action: 'div',\n },\n root: getNativeElementProps(as ?? 'h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n action: resolveShorthand(action, {\n required: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles.button}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss24Regular />\n </button>\n </DialogTrigger>\n ),\n },\n }),\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,4BAA4B,QAAQ;AAE7C;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,EAAA;IAAIC;EAAM,CAAE,GAAGH,KAAA;EACvB,MAAMI,SAAA,GAAYV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,cAAA,GAAiBR,4BAAA;EAEvB,OAAO;IACLS,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,MAAA,EAAQ;IACV;IACAK,IAAA,EAAMf,qBAAA,CAAsBS,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,IAAI,EAAE;MACtCD,GAAA;MACAQ,EAAA,EAAIf,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIK,aAAa;MACtD,GAAGV;IACL;IACAG,MAAA,EAAQP,gBAAA,CAAiBO,MAAA,EAAQ;MAC/BQ,QAAA,EAAUP,SAAA,KAAc;MACxBQ,YAAA,EAAc;QACZC,QAAA,eACErB,KAAA,CAAAsB,aAAA,CAACjB,aAAA;UAAckB,wBAAA,MAAwB;UAACZ,MAAA,EAAO;wBAC7CX,KAAA,CAAAsB,aAAA,CAAC;UACCE,IAAA,EAAK;UACLC,SAAA,EAAWX,cAAA,CAAeY,MAAM;UAChC;UACA,cAAW;wBAEX1B,KAAA,CAAAsB,aAAA,CAACnB,gBAAA;MAIT;IACF;EACF;AACF"}
|