@fluentui/react-dialog 9.7.5 → 9.7.7
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 +121 -1
- package/CHANGELOG.md +35 -2
- package/dist/index.d.ts +4 -2
- package/lib/components/DialogActions/useDialogActions.js +6 -3
- package/lib/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib/components/DialogBody/useDialogBody.js +6 -3
- package/lib/components/DialogBody/useDialogBody.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js +3 -4
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/useDialogContent.js +6 -3
- package/lib/components/DialogContent/useDialogContent.js.map +1 -1
- package/lib/components/DialogSurface/DialogSurface.types.js.map +1 -1
- package/lib/components/DialogSurface/index.js +1 -0
- package/lib/components/DialogSurface/index.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +7 -3
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +10 -23
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js +3 -3
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActions.js +5 -2
- package/lib-commonjs/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBody.js +5 -2
- package/lib-commonjs/components/DialogBody/useDialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +3 -4
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContent.js +5 -2
- package/lib-commonjs/components/DialogContent/useDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/index.js +1 -0
- package/lib-commonjs/components/DialogSurface/index.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +6 -2
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +19 -36
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.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/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,127 @@
|
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 09 Oct 2023 20:41:55 GMT",
|
|
6
|
+
"tag": "@fluentui/react-dialog_v9.7.7",
|
|
7
|
+
"version": "9.7.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-dialog",
|
|
13
|
+
"commit": "a7cc521cea9413ee1739492a65dde3b35c30d60f",
|
|
14
|
+
"comment": "react-dialog/chore: replace harcoded transparent to token"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-dialog",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.2",
|
|
20
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-dialog",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.15",
|
|
26
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-dialog",
|
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.39",
|
|
32
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-dialog",
|
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.10.0",
|
|
38
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-dialog",
|
|
43
|
+
"comment": "Bump @fluentui/react-aria to v9.3.41",
|
|
44
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-dialog",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.5",
|
|
50
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-dialog",
|
|
55
|
+
"comment": "Bump @fluentui/react-portal to v9.3.22",
|
|
56
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Thu, 05 Oct 2023 15:25:30 GMT",
|
|
63
|
+
"tag": "@fluentui/react-dialog_v9.7.6",
|
|
64
|
+
"version": "9.7.6",
|
|
65
|
+
"comments": {
|
|
66
|
+
"patch": [
|
|
67
|
+
{
|
|
68
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
69
|
+
"package": "@fluentui/react-dialog",
|
|
70
|
+
"commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
|
|
71
|
+
"comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
75
|
+
"package": "@fluentui/react-dialog",
|
|
76
|
+
"commit": "a4410f44533c70f69f53c4985d2e72f4c41d874e",
|
|
77
|
+
"comment": "bugfix: removes context hooks invocations from styles hook"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
81
|
+
"package": "@fluentui/react-dialog",
|
|
82
|
+
"commit": "25efb3d7d63f03a754f4a490175e24fec9b32ad6",
|
|
83
|
+
"comment": "chore: exports DialogSurface context types and hooks"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-dialog",
|
|
88
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.1",
|
|
89
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-dialog",
|
|
94
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
|
|
95
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-dialog",
|
|
100
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.38",
|
|
101
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-dialog",
|
|
106
|
+
"comment": "Bump @fluentui/react-aria to v9.3.40",
|
|
107
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-dialog",
|
|
112
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.4",
|
|
113
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"author": "beachball",
|
|
117
|
+
"package": "@fluentui/react-dialog",
|
|
118
|
+
"comment": "Bump @fluentui/react-portal to v9.3.21",
|
|
119
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"date": "Wed, 04 Oct 2023 08:45:47 GMT",
|
|
6
126
|
"tag": "@fluentui/react-dialog_v9.7.5",
|
|
7
127
|
"version": "9.7.5",
|
|
8
128
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,45 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 09 Oct 2023 20:41:55 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.7)
|
|
8
|
+
|
|
9
|
+
Mon, 09 Oct 2023 20:41:55 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.6..@fluentui/react-dialog_v9.7.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- react-dialog/chore: replace harcoded transparent to token ([PR #29406](https://github.com/microsoft/fluentui/pull/29406) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.14.2 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.15 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.39 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.10.0 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
19
|
+
- Bump @fluentui/react-aria to v9.3.41 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.13.5 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
21
|
+
- Bump @fluentui/react-portal to v9.3.22 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.7.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.6)
|
|
24
|
+
|
|
25
|
+
Thu, 05 Oct 2023 15:25:30 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.5..@fluentui/react-dialog_v9.7.6)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
|
|
31
|
+
- bugfix: removes context hooks invocations from styles hook ([PR #29396](https://github.com/microsoft/fluentui/pull/29396) by bernardo.sunderhus@gmail.com)
|
|
32
|
+
- chore: exports DialogSurface context types and hooks ([PR #29397](https://github.com/microsoft/fluentui/pull/29397) by bernardo.sunderhus@gmail.com)
|
|
33
|
+
- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
34
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
35
|
+
- Bump @fluentui/react-context-selector to v9.1.38 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
36
|
+
- Bump @fluentui/react-aria to v9.3.40 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
38
|
+
- Bump @fluentui/react-portal to v9.3.21 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
39
|
+
|
|
7
40
|
## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.5)
|
|
8
41
|
|
|
9
|
-
Wed, 04 Oct 2023 08:
|
|
42
|
+
Wed, 04 Oct 2023 08:45:47 GMT
|
|
10
43
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.4..@fluentui/react-dialog_v9.7.5)
|
|
11
44
|
|
|
12
45
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -224,7 +224,7 @@ export declare const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots>
|
|
|
224
224
|
|
|
225
225
|
export declare type DialogSurfaceContextValue = boolean;
|
|
226
226
|
|
|
227
|
-
declare type DialogSurfaceContextValues = {
|
|
227
|
+
export declare type DialogSurfaceContextValues = {
|
|
228
228
|
dialogSurface: DialogSurfaceContextValue;
|
|
229
229
|
};
|
|
230
230
|
|
|
@@ -255,7 +255,7 @@ export declare type DialogSurfaceSlots = {
|
|
|
255
255
|
/**
|
|
256
256
|
* State used in rendering DialogSurface
|
|
257
257
|
*/
|
|
258
|
-
export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
|
|
258
|
+
export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Partial<Pick<DialogContextValue, 'isNestedDialog'>> & Pick<PortalProps, 'mountNode'>;
|
|
259
259
|
|
|
260
260
|
/**
|
|
261
261
|
* The `DialogTitle` component expects to have a title/header
|
|
@@ -438,6 +438,8 @@ export declare const useDialogSurface_unstable: (props: DialogSurfaceProps, ref:
|
|
|
438
438
|
|
|
439
439
|
export declare const useDialogSurfaceContext_unstable: () => boolean;
|
|
440
440
|
|
|
441
|
+
export declare function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues;
|
|
442
|
+
|
|
441
443
|
/**
|
|
442
444
|
* Apply styling to the DialogSurface slots based on the state
|
|
443
445
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Create the state required to render DialogActions.
|
|
5
5
|
*
|
|
@@ -14,8 +14,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
|
14
14
|
components: {
|
|
15
15
|
root: 'div'
|
|
16
16
|
},
|
|
17
|
-
root: slot.always(
|
|
18
|
-
|
|
17
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
18
|
+
// FIXME:
|
|
19
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
20
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
21
|
+
ref: ref,
|
|
19
22
|
...props
|
|
20
23
|
}), {
|
|
21
24
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end', fluid = false } = props;\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n position,\n fluid,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogActions_unstable","props","ref","position","fluid","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAE,GAAGH;IAC5C,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;QACAC;IACF;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Create the state required to render DialogBody.
|
|
5
5
|
*
|
|
@@ -14,8 +14,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
|
14
14
|
components: {
|
|
15
15
|
root: 'div'
|
|
16
16
|
},
|
|
17
|
-
root: slot.always(
|
|
18
|
-
|
|
17
|
+
root: slot.always(getIntrinsicElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
|
|
18
|
+
// FIXME:
|
|
19
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
20
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
21
|
+
ref: ref,
|
|
19
22
|
...props
|
|
20
23
|
}), {
|
|
21
24
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps(props.as ?? 'div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogBody_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;QAMhCD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';
|
|
3
|
-
import { backdropStyles } from '../DialogSurface/useDialogSurfaceStyles.styles';
|
|
4
3
|
export const dialogBodyClassNames = {
|
|
5
4
|
root: 'fui-DialogBody'
|
|
6
5
|
};
|
|
7
6
|
/**
|
|
8
7
|
* Styles for the root slot
|
|
9
8
|
*/
|
|
10
|
-
const useResetStyles = /*#__PURE__*/__resetStyles("
|
|
11
|
-
r: [".
|
|
12
|
-
s: ["@media screen and (max-width: 480px){.
|
|
9
|
+
const useResetStyles = /*#__PURE__*/__resetStyles("r71plkv", null, {
|
|
10
|
+
r: [".r71plkv{overflow-x:unset;overflow-y:unset;column-gap:8px;row-gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"],
|
|
11
|
+
s: ["@media screen and (max-width: 480px){.r71plkv{max-width:100vw;grid-template-rows:auto 1fr auto;}}"]
|
|
13
12
|
});
|
|
14
13
|
/**
|
|
15
14
|
* Apply styling to the DialogBody slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n display: 'grid',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AAC7F,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAY1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGb,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Create the state required to render DialogBody.
|
|
5
5
|
*
|
|
@@ -14,8 +14,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
|
14
14
|
components: {
|
|
15
15
|
root: 'div'
|
|
16
16
|
},
|
|
17
|
-
root: slot.always(
|
|
18
|
-
|
|
17
|
+
root: slot.always(getIntrinsicElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
|
|
18
|
+
// FIXME:
|
|
19
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
20
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
21
|
+
ref: ref,
|
|
19
22
|
...props
|
|
20
23
|
}), {
|
|
21
24
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogContent.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogContent.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { DialogContentProps, DialogContentState } from './DialogContent.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogContent_unstable = (\n props: DialogContentProps,\n ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps(props.as ?? 'div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContent_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;QAO6BD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n /**\n * Dimmed background of dialog.\n * The default backdrop is rendered as a `<div>` with styling.\n * This slot expects a `<div>` element which will replace the default backdrop.\n * The backdrop should have `aria-hidden=\"true\"`.\n *\n */\n backdrop?: Slot<'div'>;\n root: Slot<'div'>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots>
|
|
1
|
+
{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n /**\n * Dimmed background of dialog.\n * The default backdrop is rendered as a `<div>` with styling.\n * This slot expects a `<div>` element which will replace the default backdrop.\n * The backdrop should have `aria-hidden=\"true\"`.\n *\n */\n backdrop?: Slot<'div'>;\n root: Slot<'div'>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n Partial<Pick<DialogContextValue, 'isNestedDialog'>> &\n Pick<PortalProps, 'mountNode'>;\n"],"names":[],"mappings":"AAAA,WAoCiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles.styles';\nexport * from './useDialogSurfaceContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC;AAChD,cAAc,kCAAkC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';
|
|
3
3
|
import { useDialogContext_unstable } from '../../contexts';
|
|
4
4
|
import { Escape } from '@fluentui/keyboard-keys';
|
|
5
5
|
/**
|
|
@@ -12,6 +12,7 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
|
12
12
|
* @param ref - reference to root HTMLElement of DialogSurface
|
|
13
13
|
*/ export const useDialogSurface_unstable = (props, ref)=>{
|
|
14
14
|
const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
|
|
15
|
+
const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);
|
|
15
16
|
const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);
|
|
16
17
|
const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
|
|
17
18
|
const open = useDialogContext_unstable((ctx)=>ctx.open);
|
|
@@ -54,15 +55,15 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
|
54
55
|
if (backdrop) {
|
|
55
56
|
backdrop.onClick = handledBackdropClick;
|
|
56
57
|
}
|
|
57
|
-
var _props_as;
|
|
58
58
|
return {
|
|
59
59
|
components: {
|
|
60
60
|
backdrop: 'div',
|
|
61
61
|
root: 'div'
|
|
62
62
|
},
|
|
63
63
|
backdrop,
|
|
64
|
+
isNestedDialog,
|
|
64
65
|
mountNode: props.mountNode,
|
|
65
|
-
root: slot.always(
|
|
66
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
66
67
|
tabIndex: -1,
|
|
67
68
|
'aria-modal': modalType !== 'non-modal',
|
|
68
69
|
role: modalType === 'alert' ? 'alertdialog' : 'dialog',
|
|
@@ -70,6 +71,9 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
|
70
71
|
...props,
|
|
71
72
|
...modalAttributes,
|
|
72
73
|
onKeyDown: handleKeyDown,
|
|
74
|
+
// FIXME:
|
|
75
|
+
// `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
76
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
73
77
|
ref: useMergedRefs(ref, dialogRef)
|
|
74
78
|
}), {
|
|
75
79
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n
|
|
1
|
+
{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\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 modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\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 (event.key === Escape && !event.isDefaultPrevented()) {\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 const backdrop = slot.optional(props.backdrop, {\n renderByDefault: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n return {\n components: { backdrop: 'div', root: 'div' },\n backdrop,\n isNestedDialog,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('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 // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","stopPropagation","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP,0BAA0BM,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,kBAAkBR,0BAA0BM,CAAAA,MAAOA,IAAIE,eAAe;IAC5E,MAAMC,YAAYT,0BAA0BM,CAAAA,MAAOA,IAAIG,SAAS;IAChE,MAAMC,OAAOV,0BAA0BM,CAAAA,MAAOA,IAAII,IAAI;IACtD,MAAMC,oBAAoBX,0BAA0BM,CAAAA,MAAOA,IAAIK,iBAAiB;IAChF,MAAMC,gBAAgBZ,0BAA0BM,CAAAA,MAAOA,IAAIO,aAAa;IAExE,MAAMC,uBAAuBnB,iBAAiB,CAACoB;QAC7C,IAAIlB,oBAAoBM,MAAMa,QAAQ,GAAG;gBACvCb,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMa,QAAQ,EAACC,OAAO,cAAtBd,8CAAAA,6BAAAA,iBAAyBY;QAC3B;QACA,IAAIV,cAAc,WAAW,CAACU,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBzB,iBAAiB,CAACoB;YACtCZ;SAAAA,mBAAAA,MAAMkB,SAAS,cAAflB,uCAAAA,sBAAAA,OAAkBY;QAElB,IAAIA,MAAMO,GAAG,KAAKrB,UAAU,CAACc,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,eAAe;QACvB;IACF;IAEA,MAAMP,WAAWlB,KAAK0B,QAAQ,CAACrB,MAAMa,QAAQ,EAAE;QAC7CS,iBAAiBf,QAAQL,cAAc;QACvCqB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;IACA,OAAO;QACLc,YAAY;YAAEZ,UAAU;YAAOa,MAAM;QAAM;QAC3Cb;QACAT;QACAuB,WAAW3B,MAAM2B,SAAS;QAC1BD,MAAM/B,KAAKiC,MAAM,CACfhC,yBAAyB,OAAO;YAC9BiC,UAAU,CAAC;YACX,cAAc3B,cAAc;YAC5B4B,MAAM5B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG+B,YAAYtB;YACrD,GAAGT,KAAK;YACR,GAAGK,eAAe;YAClBa,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FhB,KAAKR,cAAcQ,KAAKK;QAC1B,IACA;YAAEkB,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1,36 +1,24 @@
|
|
|
1
1
|
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
4
|
-
import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING
|
|
4
|
+
import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
|
|
5
5
|
export const dialogSurfaceClassNames = {
|
|
6
6
|
root: 'fui-DialogSurface',
|
|
7
7
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
8
8
|
};
|
|
9
|
-
/**
|
|
10
|
-
* Generic reusable backdrop styles
|
|
11
|
-
*/
|
|
12
|
-
export const backdropStyles = {
|
|
13
|
-
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
|
14
|
-
};
|
|
15
|
-
const nestedDialogBackdropStyles = {
|
|
16
|
-
backgroundColor: 'transparent'
|
|
17
|
-
};
|
|
18
9
|
/**
|
|
19
10
|
* Styles for the root slot
|
|
20
11
|
*/
|
|
21
|
-
const useRootResetStyles = /*#__PURE__*/__resetStyles("
|
|
22
|
-
r: [".
|
|
23
|
-
s: ["@media screen and (max-width: 480px){.
|
|
12
|
+
const useRootResetStyles = /*#__PURE__*/__resetStyles("r1mol2m5", "r1vxe5sp", {
|
|
13
|
+
r: [".r1mol2m5{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1mol2m5:focus{outline-style:none;}", ".r1mol2m5:focus-visible{outline-style:none;}", ".r1mol2m5[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1mol2m5[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1vxe5sp{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1vxe5sp:focus{outline-style:none;}", ".r1vxe5sp:focus-visible{outline-style:none;}", ".r1vxe5sp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1vxe5sp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
14
|
+
s: ["@media screen and (max-width: 480px){.r1mol2m5{max-width:100vw;}}", "@media screen and (max-width: 480px){.r1vxe5sp{max-width:100vw;}}"]
|
|
24
15
|
});
|
|
25
|
-
const
|
|
16
|
+
const useBackdropStyles = /*#__PURE__*/__styles({
|
|
26
17
|
nestedDialogBackdrop: {
|
|
27
|
-
De3pzq: "
|
|
28
|
-
},
|
|
29
|
-
nestedNativeDialogBackdrop: {
|
|
30
|
-
fshzfu: "foe20jx"
|
|
18
|
+
De3pzq: "f1c21dwh"
|
|
31
19
|
}
|
|
32
20
|
}, {
|
|
33
|
-
d: [".
|
|
21
|
+
d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
|
|
34
22
|
});
|
|
35
23
|
/**
|
|
36
24
|
* Styles for the backdrop slot
|
|
@@ -41,12 +29,11 @@ const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rvs8970", "r1uj6nuu",
|
|
|
41
29
|
*/
|
|
42
30
|
export const useDialogSurfaceStyles_unstable = state => {
|
|
43
31
|
const surfaceResetStyles = useRootResetStyles();
|
|
44
|
-
const styles =
|
|
32
|
+
const styles = useBackdropStyles();
|
|
45
33
|
const backdropResetStyles = useBackdropResetStyles();
|
|
46
|
-
|
|
47
|
-
state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
|
|
34
|
+
state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);
|
|
48
35
|
if (state.backdrop) {
|
|
49
|
-
state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
|
|
36
|
+
state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
|
|
50
37
|
}
|
|
51
38
|
return state;
|
|
52
39
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootResetStyles","r","s","useBackdropStyles","nestedDialogBackdrop","De3pzq","d","useBackdropResetStyles","useDialogSurfaceStyles_unstable","state","surfaceResetStyles","styles","backdropResetStyles","className","isNestedDialog"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...shorthands.inset(0),\n ...shorthands.padding(0),\n ...shorthands.padding(SURFACE_PADDING),\n ...shorthands.margin('auto'),\n ...shorthands.borderStyle('none'),\n ...shorthands.overflow('unset'),\n ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n contain: 'content',\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n boxShadow: tokens.shadow64,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n }\n});\nconst useBackdropStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n ...shorthands.inset('0px'),\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n position: 'fixed'\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const surfaceResetStyles = useRootResetStyles();\n const styles = useBackdropStyles();\n const backdropResetStyles = useBackdropResetStyles();\n state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACvG,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAyB9B,CAAC;AACF,MAAMC,iBAAiB,gBAAGd,QAAA;EAAAe,oBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGnB,aAAA,uOAIlC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoB,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,kBAAkB,GAAGV,kBAAkB,CAAC,CAAC;EAC/C,MAAMW,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,MAAMS,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EACpDE,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGvB,YAAY,CAACO,uBAAuB,CAACC,IAAI,EAAEY,kBAAkB,EAAED,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;EAC3G,IAAIJ,KAAK,CAACV,QAAQ,EAAE;IAChBU,KAAK,CAACV,QAAQ,CAACc,SAAS,GAAGvB,YAAY,CAACO,uBAAuB,CAACE,QAAQ,EAAEa,mBAAmB,EAAEH,KAAK,CAACK,cAAc,IAAIH,MAAM,CAACP,oBAAoB,EAAEK,KAAK,CAACV,QAAQ,CAACc,SAAS,CAAC;EACjL;EACA,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useDialogContext_unstable } from '../../contexts/dialogContext';
|
|
4
4
|
import { Dismiss20Regular } from '@fluentui/react-icons';
|
|
5
5
|
import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
|
|
@@ -13,7 +13,7 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
|
|
|
13
13
|
* @param props - props from this instance of DialogTitle
|
|
14
14
|
* @param ref - reference to root HTMLElement of DialogTitle
|
|
15
15
|
*/ export const useDialogTitle_unstable = (props, ref)=>{
|
|
16
|
-
const {
|
|
16
|
+
const { action } = props;
|
|
17
17
|
const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
|
|
18
18
|
const internalStyles = useDialogTitleInternalStyles();
|
|
19
19
|
return {
|
|
@@ -21,7 +21,7 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
|
|
|
21
21
|
root: 'h2',
|
|
22
22
|
action: 'div'
|
|
23
23
|
},
|
|
24
|
-
root: slot.always(
|
|
24
|
+
root: slot.always(getIntrinsicElementProps('h2', {
|
|
25
25
|
ref,
|
|
26
26
|
id: useDialogContext_unstable((ctx)=>ctx.dialogTitleId),
|
|
27
27
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\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<HTMLDivElement>): DialogTitleState => {\n const { 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: slot.always(\n getIntrinsicElementProps('h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n { elementType: 'h2' },\n ),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss20Regular />\n </button>\n </DialogTrigger>\n ),\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,+BAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,gCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,YAAYR,0BAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP;IAEvB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMb,KAAKc,MAAM,CACff,yBAAyB,MAAM;YAC7BQ;YACAQ,IAAId,0BAA0BS,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGV,KAAK;QACV,IACA;YAAEW,aAAa;QAAK;QAEtBT,QAAQR,KAAKkB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAAClB;oBAAcmB,0BAAAA;oBAAyBd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,oBAACxB;YAIT;YACAe,aAAa;QACf;IACF;AACF,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -3,6 +3,6 @@ export { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable
|
|
|
3
3
|
export { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from './DialogActions';
|
|
4
4
|
export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from './DialogBody';
|
|
5
5
|
export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';
|
|
6
|
-
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable } from './DialogSurface';
|
|
6
|
+
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from './DialogSurface';
|
|
7
7
|
export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';
|
|
8
8
|
export { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider } from './contexts/index';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n DialogSlots,\n DialogProps,\n DialogState,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n DialogTriggerProps,\n DialogTriggerChildProps,\n DialogTriggerState,\n DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n DialogActions,\n dialogActionsClassNames,\n useDialogActions_unstable,\n useDialogActionsStyles_unstable,\n renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n DialogBody,\n dialogBodyClassNames,\n useDialogBody_unstable,\n useDialogBodyStyles_unstable,\n renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n DialogTitle,\n dialogTitleClassNames,\n useDialogTitle_unstable,\n useDialogTitleStyles_unstable,\n renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n useDialogSurface_unstable,\n useDialogSurfaceStyles_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n DialogSlots,\n DialogProps,\n DialogState,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n DialogTriggerProps,\n DialogTriggerChildProps,\n DialogTriggerState,\n DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n DialogActions,\n dialogActionsClassNames,\n useDialogActions_unstable,\n useDialogActionsStyles_unstable,\n renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n DialogBody,\n dialogBodyClassNames,\n useDialogBody_unstable,\n useDialogBodyStyles_unstable,\n renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n DialogTitle,\n dialogTitleClassNames,\n useDialogTitle_unstable,\n useDialogTitleStyles_unstable,\n renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n useDialogSurface_unstable,\n useDialogSurfaceStyles_unstable,\n useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n DialogSurfaceElement,\n DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n DialogContent,\n dialogContentClassNames,\n useDialogContent_unstable,\n useDialogContentStyles_unstable,\n renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n useDialogContext_unstable,\n useDialogSurfaceContext_unstable,\n DialogProvider,\n DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,WAAW;AAU7E,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,eAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AASzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,QAChB,mBAAmB"}
|
|
@@ -17,8 +17,11 @@ const useDialogActions_unstable = (props, ref)=>{
|
|
|
17
17
|
components: {
|
|
18
18
|
root: 'div'
|
|
19
19
|
},
|
|
20
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
21
|
-
|
|
20
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
21
|
+
// FIXME:
|
|
22
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
23
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
24
|
+
ref: ref,
|
|
22
25
|
...props
|
|
23
26
|
}), {
|
|
24
27
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogActions.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogActions.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */ export const useDialogActions_unstable = (props, ref)=>{\n const { position = 'end', fluid = false } = props;\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n ...props\n }), {\n elementType: 'div'\n }),\n position,\n fluid\n };\n};\n"],"names":["useDialogActions_unstable","props","ref","position","fluid","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAE,GAAGH;IAC5C,OAAO;QACHI,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FP,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAS,aAAa;QACjB;QACAP;QACAC;IACJ;AACJ"}
|
|
@@ -17,8 +17,11 @@ const useDialogBody_unstable = (props, ref)=>{
|
|
|
17
17
|
components: {
|
|
18
18
|
root: 'div'
|
|
19
19
|
},
|
|
20
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
21
|
-
|
|
20
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
|
|
21
|
+
// FIXME:
|
|
22
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
23
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
24
|
+
ref: ref,
|
|
22
25
|
...props
|
|
23
26
|
}), {
|
|
24
27
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogBody.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */ export const useDialogBody_unstable = (props, ref)=>{\n var _props_as;\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n ...props\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogBody_unstable","props","ref","_props_as","components","root","slot","always","getIntrinsicElementProps","as","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,IAAIC;IACJ,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,AAACL,CAAAA,YAAYF,MAAMQ,EAAE,AAAD,MAAO,QAAQN,cAAc,KAAK,IAAIA,YAAY,OAAO;YACpH,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FD,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAS,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -22,13 +22,12 @@ const dialogBodyClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
25
|
+
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r71plkv", null, {
|
|
26
26
|
r: [
|
|
27
|
-
".
|
|
28
|
-
".r1evyu59::backdrop{background-color:rgba(0, 0, 0, 0.4);}"
|
|
27
|
+
".r71plkv{overflow-x:unset;overflow-y:unset;column-gap:8px;row-gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"
|
|
29
28
|
],
|
|
30
29
|
s: [
|
|
31
|
-
"@media screen and (max-width: 480px){.
|
|
30
|
+
"@media screen and (max-width: 480px){.r71plkv{max-width:100vw;grid-template-rows:auto 1fr auto;}}"
|
|
32
31
|
]
|
|
33
32
|
});
|
|
34
33
|
const useDialogBodyStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\
|
|
1
|
+
{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */\nconst useResetStyles = /*#__PURE__*/__resetStyles(\"r71plkv\", null, {\n r: [\".r71plkv{overflow-x:unset;overflow-y:unset;column-gap:8px;row-gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}\"],\n s: [\"@media screen and (max-width: 480px){.r71plkv{max-width:100vw;grid-template-rows:auto 1fr auto;}}\"]\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useResetStyles","__resetStyles","r","s","state","resetStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAaAC,4BAA4B;eAA5BA;;;uBAf2C;AAEjD,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IACjEC,GAAG;QAAC;KAA8M;IAClNC,GAAG;QAAC;KAAoG;AAC1G;AAIO,MAAML,+BAA+BM,CAAAA;IAC1C,MAAMC,cAAcL;IACpBI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACV,qBAAqBE,IAAI,EAAEM,aAAaD,MAAML,IAAI,CAACO,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}
|
|
@@ -17,8 +17,11 @@ const useDialogContent_unstable = (props, ref)=>{
|
|
|
17
17
|
components: {
|
|
18
18
|
root: 'div'
|
|
19
19
|
},
|
|
20
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
21
|
-
|
|
20
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
|
|
21
|
+
// FIXME:
|
|
22
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
23
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
24
|
+
ref: ref,
|
|
22
25
|
...props
|
|
23
26
|
}), {
|
|
24
27
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogContent.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogContent.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */ export const useDialogContent_unstable = (props, ref)=>{\n var _props_as;\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n ...props\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogContent_unstable","props","ref","_props_as","components","root","slot","always","getIntrinsicElementProps","as","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,IAAIC;IACJ,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,AAACL,CAAAA,YAAYF,MAAMQ,EAAE,AAAD,MAAO,QAAQN,cAAc,KAAK,IAAIA,YAAY,OAAO;YACpH,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FD,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAS,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -8,3 +8,4 @@ _export_star._(require("./DialogSurface.types"), exports);
|
|
|
8
8
|
_export_star._(require("./renderDialogSurface"), exports);
|
|
9
9
|
_export_star._(require("./useDialogSurface"), exports);
|
|
10
10
|
_export_star._(require("./useDialogSurfaceStyles.styles"), exports);
|
|
11
|
+
_export_star._(require("./useDialogSurfaceContextValues"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles.styles';\nexport * from './useDialogSurfaceContextValues';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -15,6 +15,7 @@ const _contexts = require("../../contexts");
|
|
|
15
15
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
16
16
|
const useDialogSurface_unstable = (props, ref)=>{
|
|
17
17
|
const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
|
|
18
|
+
const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
|
|
18
19
|
const modalAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
|
|
19
20
|
const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
|
|
20
21
|
const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
|
|
@@ -57,15 +58,15 @@ const useDialogSurface_unstable = (props, ref)=>{
|
|
|
57
58
|
if (backdrop) {
|
|
58
59
|
backdrop.onClick = handledBackdropClick;
|
|
59
60
|
}
|
|
60
|
-
var _props_as;
|
|
61
61
|
return {
|
|
62
62
|
components: {
|
|
63
63
|
backdrop: 'div',
|
|
64
64
|
root: 'div'
|
|
65
65
|
},
|
|
66
66
|
backdrop,
|
|
67
|
+
isNestedDialog,
|
|
67
68
|
mountNode: props.mountNode,
|
|
68
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
69
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
69
70
|
tabIndex: -1,
|
|
70
71
|
'aria-modal': modalType !== 'non-modal',
|
|
71
72
|
role: modalType === 'alert' ? 'alertdialog' : 'dialog',
|
|
@@ -73,6 +74,9 @@ const useDialogSurface_unstable = (props, ref)=>{
|
|
|
73
74
|
...props,
|
|
74
75
|
...modalAttributes,
|
|
75
76
|
onKeyDown: handleKeyDown,
|
|
77
|
+
// FIXME:
|
|
78
|
+
// `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
79
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
76
80
|
ref: (0, _reactutilities.useMergedRefs)(ref, dialogRef)
|
|
77
81
|
}), {
|
|
78
82
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\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 */ export const useDialogSurface_unstable = (props, ref)=>{\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);\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 const handledBackdropClick = useEventCallback((event)=>{\n if (isResolvedShorthand(props.backdrop)) {\n var _props_backdrop_onClick, _props_backdrop;\n (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick'\n });\n }\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _props_onKeyDown;\n (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n if (event.key === Escape && !event.isDefaultPrevented()) {\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 const backdrop = slot.optional(props.backdrop, {\n renderByDefault: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true'\n },\n elementType: 'div'\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n return {\n components: {\n backdrop: 'div',\n root: 'div'\n },\n backdrop,\n isNestedDialog,\n mountNode: props.mountNode,\n root: slot.always(getIntrinsicElementProps('div', {\n tabIndex: -1,\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 // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, dialogRef)\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","isNestedDialog","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","key","Escape","stopPropagation","slot","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","getIntrinsicElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC8E;0BAC3D;8BACnB;AASZ,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAMC,YAAYC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,cAAc;IAC1E,MAAMC,kBAAkBH,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIE,eAAe;IAC5E,MAAMC,YAAYJ,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIG,SAAS;IAChE,MAAMC,OAAOL,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAII,IAAI;IACtD,MAAMC,oBAAoBN,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIK,iBAAiB;IAChF,MAAMC,gBAAgBP,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIO,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAAC,CAACC;QAC3C,IAAIC,IAAAA,mCAAmB,EAACf,MAAMgB,QAAQ,GAAG;YACrC,IAAIC,yBAAyBC;YAC5BD,CAAAA,0BAA0B,AAACC,CAAAA,kBAAkBlB,MAAMgB,QAAQ,AAAD,EAAGG,OAAO,AAAD,MAAO,QAAQF,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBG,IAAI,CAACF,iBAAiBJ;QACnL;QACA,IAAIZ,cAAc,WAAW,CAACY,MAAMO,kBAAkB,IAAI;YACtDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;QACJ;IACJ;IACA,MAAMC,gBAAgBV,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAIU;QACHA,CAAAA,mBAAmBxB,MAAMyB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACpB,OAAOc;QACrH,IAAIA,MAAMY,GAAG,KAAKC,oBAAM,IAAI,CAACb,MAAMO,kBAAkB,IAAI;YACrDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;YACA,qFAAqF;YACrF,gDAAgD;YAChDR,MAAMc,eAAe;QACzB;IACJ;IACA,MAAMZ,WAAWa,oBAAI,CAACC,QAAQ,CAAC9B,MAAMgB,QAAQ,EAAE;QAC3Ce,iBAAiBvB,QAAQN,cAAc;QACvC8B,cAAc;YACV,eAAe;QACnB;QACAC,aAAa;IACjB;IACA,IAAIjB,UAAU;QACVA,SAASG,OAAO,GAAGP;IACvB;IACA,OAAO;QACHsB,YAAY;YACRlB,UAAU;YACVmB,MAAM;QACV;QACAnB;QACAX;QACA+B,WAAWpC,MAAMoC,SAAS;QAC1BD,MAAMN,oBAAI,CAACQ,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CC,UAAU,CAAC;YACX,cAAcrC,cAAc;YAC5BsC,MAAMtC,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAGyC,YAAY/B;YACrD,GAAGV,KAAK;YACR,GAAGM,eAAe;YAClBmB,WAAWF;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FtB,KAAKyC,IAAAA,6BAAa,EAACzC,KAAKM;QAC5B,IAAI;YACA0B,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -12,58 +12,42 @@ _export(exports, {
|
|
|
12
12
|
dialogSurfaceClassNames: function() {
|
|
13
13
|
return dialogSurfaceClassNames;
|
|
14
14
|
},
|
|
15
|
-
backdropStyles: function() {
|
|
16
|
-
return backdropStyles;
|
|
17
|
-
},
|
|
18
15
|
useDialogSurfaceStyles_unstable: function() {
|
|
19
16
|
return useDialogSurfaceStyles_unstable;
|
|
20
17
|
}
|
|
21
18
|
});
|
|
22
19
|
const _react = require("@griffel/react");
|
|
23
|
-
const _contexts = require("../../contexts");
|
|
24
20
|
const dialogSurfaceClassNames = {
|
|
25
21
|
root: 'fui-DialogSurface',
|
|
26
22
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
27
23
|
};
|
|
28
|
-
const backdropStyles = {
|
|
29
|
-
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
|
30
|
-
};
|
|
31
|
-
const nestedDialogBackdropStyles = {
|
|
32
|
-
backgroundColor: 'transparent'
|
|
33
|
-
};
|
|
34
24
|
/**
|
|
35
25
|
* Styles for the root slot
|
|
36
|
-
*/ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
+
*/ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1mol2m5", "r1vxe5sp", {
|
|
37
27
|
r: [
|
|
38
|
-
".
|
|
39
|
-
".
|
|
40
|
-
".
|
|
41
|
-
".
|
|
42
|
-
".
|
|
43
|
-
".
|
|
44
|
-
".
|
|
45
|
-
".
|
|
46
|
-
".
|
|
47
|
-
".
|
|
48
|
-
".r7xp5xy[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}",
|
|
49
|
-
".r7xp5xy::backdrop{background-color:rgba(0, 0, 0, 0.4);}"
|
|
28
|
+
".r1mol2m5{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
|
|
29
|
+
".r1mol2m5:focus{outline-style:none;}",
|
|
30
|
+
".r1mol2m5:focus-visible{outline-style:none;}",
|
|
31
|
+
".r1mol2m5[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
32
|
+
".r1mol2m5[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
33
|
+
".r1vxe5sp{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
|
|
34
|
+
".r1vxe5sp:focus{outline-style:none;}",
|
|
35
|
+
".r1vxe5sp:focus-visible{outline-style:none;}",
|
|
36
|
+
".r1vxe5sp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
37
|
+
".r1vxe5sp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
50
38
|
],
|
|
51
39
|
s: [
|
|
52
|
-
"@media screen and (max-width: 480px){.
|
|
53
|
-
"@media screen and (max-width: 480px){.
|
|
40
|
+
"@media screen and (max-width: 480px){.r1mol2m5{max-width:100vw;}}",
|
|
41
|
+
"@media screen and (max-width: 480px){.r1vxe5sp{max-width:100vw;}}"
|
|
54
42
|
]
|
|
55
43
|
});
|
|
56
|
-
const
|
|
44
|
+
const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
57
45
|
nestedDialogBackdrop: {
|
|
58
|
-
De3pzq: "
|
|
59
|
-
},
|
|
60
|
-
nestedNativeDialogBackdrop: {
|
|
61
|
-
fshzfu: "foe20jx"
|
|
46
|
+
De3pzq: "f1c21dwh"
|
|
62
47
|
}
|
|
63
48
|
}, {
|
|
64
49
|
d: [
|
|
65
|
-
".
|
|
66
|
-
".foe20jx::backdrop{background-color:transparent;}"
|
|
50
|
+
".f1c21dwh{background-color:var(--colorTransparentBackground);}"
|
|
67
51
|
]
|
|
68
52
|
});
|
|
69
53
|
/**
|
|
@@ -74,12 +58,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
74
58
|
]);
|
|
75
59
|
const useDialogSurfaceStyles_unstable = (state)=>{
|
|
76
60
|
const surfaceResetStyles = useRootResetStyles();
|
|
77
|
-
const styles =
|
|
61
|
+
const styles = useBackdropStyles();
|
|
78
62
|
const backdropResetStyles = useBackdropResetStyles();
|
|
79
|
-
|
|
80
|
-
state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
|
|
63
|
+
state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);
|
|
81
64
|
if (state.backdrop) {
|
|
82
|
-
state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
|
|
65
|
+
state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
|
|
83
66
|
}
|
|
84
67
|
return state;
|
|
85
68
|
}; //# sourceMappingURL=useDialogSurfaceStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING
|
|
1
|
+
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useRootResetStyles = /*#__PURE__*/__resetStyles(\"r1mol2m5\", \"r1vxe5sp\", {\n r: [\".r1mol2m5{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1mol2m5:focus{outline-style:none;}\", \".r1mol2m5:focus-visible{outline-style:none;}\", \".r1mol2m5[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1mol2m5[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1vxe5sp{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1vxe5sp:focus{outline-style:none;}\", \".r1vxe5sp:focus-visible{outline-style:none;}\", \".r1vxe5sp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1vxe5sp[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media screen and (max-width: 480px){.r1mol2m5{max-width:100vw;}}\", \"@media screen and (max-width: 480px){.r1vxe5sp{max-width:100vw;}}\"]\n});\nconst useBackdropStyles = /*#__PURE__*/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n }\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = /*#__PURE__*/__resetStyles(\"rvs8970\", \"r1uj6nuu\", [\".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}\", \".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}\"]);\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const surfaceResetStyles = useRootResetStyles();\n const styles = useBackdropStyles();\n const backdropResetStyles = useBackdropResetStyles();\n state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootResetStyles","__resetStyles","r","s","useBackdropStyles","__styles","nestedDialogBackdrop","De3pzq","d","useBackdropResetStyles","state","surfaceResetStyles","styles","backdropResetStyles","className","mergeClasses","isNestedDialog"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAyBAC,+BAA+B;eAA/BA;;;uBA7BqD;AAI3D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,qBAAqB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAC5EC,GAAG;QAAC;QAA0nC;QAAwC;QAAgD;QAAiK;QAAmvB;QAA0nC;QAAwC;QAAgD;QAAiK;KAAkvB;IAC/sIC,GAAG;QAAC;QAAqE;KAAoE;AAC/I;AACA,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC9CC,sBAAsB;QACpBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiE;AACvE;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAER,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAuG;CAAuG;AAIzR,MAAMJ,kCAAkCa,CAAAA;IAC7C,MAAMC,qBAAqBX;IAC3B,MAAMY,SAASR;IACf,MAAMS,sBAAsBJ;IAC5BC,MAAMZ,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACnB,wBAAwBE,IAAI,EAAEa,oBAAoBD,MAAMZ,IAAI,CAACgB,SAAS;IAC1G,IAAIJ,MAAMX,QAAQ,EAAE;QAClBW,MAAMX,QAAQ,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAACnB,wBAAwBG,QAAQ,EAAEc,qBAAqBH,MAAMM,cAAc,IAAIJ,OAAON,oBAAoB,EAAEI,MAAMX,QAAQ,CAACe,SAAS;IAC9K;IACA,OAAOJ;AACT,GACA,yDAAyD"}
|
|
@@ -16,7 +16,7 @@ const _reacticons = require("@fluentui/react-icons");
|
|
|
16
16
|
const _DialogTrigger = require("../DialogTrigger/DialogTrigger");
|
|
17
17
|
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles");
|
|
18
18
|
const useDialogTitle_unstable = (props, ref)=>{
|
|
19
|
-
const {
|
|
19
|
+
const { action } = props;
|
|
20
20
|
const modalType = (0, _dialogContext.useDialogContext_unstable)((ctx)=>ctx.modalType);
|
|
21
21
|
const internalStyles = (0, _useDialogTitleStylesstyles.useDialogTitleInternalStyles)();
|
|
22
22
|
return {
|
|
@@ -24,7 +24,7 @@ const useDialogTitle_unstable = (props, ref)=>{
|
|
|
24
24
|
root: 'h2',
|
|
25
25
|
action: 'div'
|
|
26
26
|
},
|
|
27
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
27
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('h2', {
|
|
28
28
|
ref,
|
|
29
29
|
id: (0, _dialogContext.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId),
|
|
30
30
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogTitle.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\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 */ export const useDialogTitle_unstable = (props, ref)=>{\n const { action } = props;\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n return {\n components: {\n root: 'h2',\n action: 'div'\n },\n root: slot.always(getIntrinsicElementProps('h2', {\n ref,\n id: useDialogContext_unstable((ctx)=>ctx.dialogTitleId),\n ...props\n }), {\n elementType: 'h2'\n }),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: /*#__PURE__*/ React.createElement(DialogTrigger, {\n disableButtonEnhancement: true,\n action: \"close\"\n }, /*#__PURE__*/ React.createElement(\"button\", {\n type: \"button\",\n className: internalStyles,\n // TODO: find a better way to add internal labels\n \"aria-label\": \"close\"\n }, /*#__PURE__*/ React.createElement(Dismiss20Regular, null)))\n },\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogTitle_unstable","props","ref","action","modalType","useDialogContext_unstable","ctx","internalStyles","useDialogTitleInternalStyles","components","root","slot","always","getIntrinsicElementProps","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","React","createElement","DialogTrigger","disableButtonEnhancement","type","className","Dismiss20Regular"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACwB;+BACL;4BACT;+BACH;4CACe;AASlC,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,YAAYC,IAAAA,wCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBC,IAAAA,wDAA4B;IACnD,OAAO;QACHC,YAAY;YACRC,MAAM;YACNP,QAAQ;QACZ;QACAO,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,MAAM;YAC7CX;YACAY,IAAIT,IAAAA,wCAAyB,EAAC,CAACC,MAAMA,IAAIS,aAAa;YACtD,GAAGd,KAAK;QACZ,IAAI;YACAe,aAAa;QACjB;QACAb,QAAQQ,oBAAI,CAACM,QAAQ,CAACd,QAAQ;YAC1Be,iBAAiBd,cAAc;YAC/Be,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,4BAAa,EAAE;oBACvDC,0BAA0B;oBAC1BrB,QAAQ;gBACZ,GAAG,WAAW,GAAGkB,OAAMC,aAAa,CAAC,UAAU;oBAC3CG,MAAM;oBACNC,WAAWnB;oBACX,iDAAiD;oBACjD,cAAc;gBAClB,GAAG,WAAW,GAAGc,OAAMC,aAAa,CAACK,4BAAgB,EAAE;YAC3D;YACAX,aAAa;QACjB;IACJ;AACJ"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -84,6 +84,9 @@ _export(exports, {
|
|
|
84
84
|
useDialogSurfaceStyles_unstable: function() {
|
|
85
85
|
return _DialogSurface.useDialogSurfaceStyles_unstable;
|
|
86
86
|
},
|
|
87
|
+
useDialogSurfaceContextValues_unstable: function() {
|
|
88
|
+
return _DialogSurface.useDialogSurfaceContextValues_unstable;
|
|
89
|
+
},
|
|
87
90
|
renderDialogSurface_unstable: function() {
|
|
88
91
|
return _DialogSurface.renderDialogSurface_unstable;
|
|
89
92
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from './DialogActions';\nexport { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from './DialogBody';\nexport { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';\nexport { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable } from './DialogSurface';\nexport { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';\nexport { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider } from './contexts/index';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider"],"mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IACjDC,aAAa;eAAbA,4BAAa;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IACtEC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAChIC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IACjHC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IACtHC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from './DialogActions';\nexport { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from './DialogBody';\nexport { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';\nexport { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from './DialogSurface';\nexport { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';\nexport { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider } from './contexts/index';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider"],"mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IACjDC,aAAa;eAAbA,4BAAa;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IACtEC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAChIC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IACjHC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IACtHC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,sCAAsC;eAAtCA,qDAAsC;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IACxKC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAChIC,yBAAyB;eAAzBA,gCAAyB;;IAAEC,gCAAgC;eAAhCA,uCAAgC;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,qBAAqB;eAArBA,4BAAqB;;;wBAPzC;+BACqB;+BAC0D;4BACf;6BACK;+BACkD;+BACxC;uBAC9B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.7",
|
|
4
4
|
"description": "Dialog component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,16 +36,16 @@
|
|
|
36
36
|
"@fluentui/scripts-tasks": "*"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@fluentui/react-utilities": "^9.14.
|
|
40
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
39
|
+
"@fluentui/react-utilities": "^9.14.2",
|
|
40
|
+
"@fluentui/react-jsx-runtime": "^9.0.15",
|
|
41
41
|
"@fluentui/keyboard-keys": "^9.0.6",
|
|
42
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
43
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
44
|
-
"@fluentui/react-aria": "^9.3.
|
|
42
|
+
"@fluentui/react-context-selector": "^9.1.39",
|
|
43
|
+
"@fluentui/react-shared-contexts": "^9.10.0",
|
|
44
|
+
"@fluentui/react-aria": "^9.3.41",
|
|
45
45
|
"@fluentui/react-icons": "^2.0.217",
|
|
46
|
-
"@fluentui/react-tabster": "^9.13.
|
|
46
|
+
"@fluentui/react-tabster": "^9.13.5",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.14",
|
|
48
|
-
"@fluentui/react-portal": "^9.3.
|
|
48
|
+
"@fluentui/react-portal": "^9.3.22",
|
|
49
49
|
"@griffel/react": "^1.5.14",
|
|
50
50
|
"@swc/helpers": "^0.5.1"
|
|
51
51
|
},
|