@fluentui/react-dialog 9.5.10 → 9.5.12
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 +79 -1
- package/CHANGELOG.md +28 -2
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js +2 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +2 -2
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogTrigger/DialogTrigger.js +1 -1
- package/lib/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib/components/DialogTrigger/index.js +1 -1
- package/lib/components/DialogTrigger/index.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +40 -0
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -0
- package/lib/utils/index.js +0 -1
- package/lib/utils/index.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +3 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +2 -2
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js +2 -2
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/index.js +1 -1
- package/lib-commonjs/components/DialogTrigger/index.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/{useDialogTrigger.styles.js → useDialogTrigger.js} +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -0
- package/lib-commonjs/utils/index.js +0 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/package.json +7 -7
- package/lib/components/DialogTrigger/useDialogTrigger.styles.js +0 -46
- package/lib/components/DialogTrigger/useDialogTrigger.styles.js.map +0 -1
- package/lib/utils/isEscapeKeyDown.js +0 -7
- package/lib/utils/isEscapeKeyDown.js.map +0 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.styles.js.map +0 -1
- package/lib-commonjs/utils/isEscapeKeyDown.js +0 -14
- package/lib-commonjs/utils/isEscapeKeyDown.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,85 @@
|
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 27 Jun 2023 11:19:44 GMT",
|
|
6
|
+
"tag": "@fluentui/react-dialog_v9.5.12",
|
|
7
|
+
"version": "9.5.12",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-dialog",
|
|
13
|
+
"comment": "Bump @fluentui/react-tabster to v9.9.0",
|
|
14
|
+
"commit": "1c7e6451a11fb9c59e344df616394a320e8031c4"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-dialog",
|
|
19
|
+
"comment": "Bump @fluentui/react-portal to v9.2.15",
|
|
20
|
+
"commit": "1c7e6451a11fb9c59e344df616394a320e8031c4"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Mon, 26 Jun 2023 09:53:54 GMT",
|
|
27
|
+
"tag": "@fluentui/react-dialog_v9.5.11",
|
|
28
|
+
"version": "9.5.11",
|
|
29
|
+
"comments": {
|
|
30
|
+
"patch": [
|
|
31
|
+
{
|
|
32
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
33
|
+
"package": "@fluentui/react-dialog",
|
|
34
|
+
"commit": "e968c73521601209372b661dc925528da6bfa7e3",
|
|
35
|
+
"comment": "bugfix: adds grid-template-columns to DialogBody styles to ensure grid template layout"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
39
|
+
"package": "@fluentui/react-dialog",
|
|
40
|
+
"commit": "5819305ffc114a586a60598206361e62a44b1dc0",
|
|
41
|
+
"comment": "bugfix: enables Escape to dismiss alert Dialog"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-dialog",
|
|
46
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.4",
|
|
47
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-dialog",
|
|
52
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8",
|
|
53
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-dialog",
|
|
58
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.24",
|
|
59
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-dialog",
|
|
64
|
+
"comment": "Bump @fluentui/react-aria to v9.3.24",
|
|
65
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-dialog",
|
|
70
|
+
"comment": "Bump @fluentui/react-tabster to v9.8.1",
|
|
71
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-dialog",
|
|
76
|
+
"comment": "Bump @fluentui/react-portal to v9.2.14",
|
|
77
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"date": "Tue, 20 Jun 2023 12:38:58 GMT",
|
|
6
84
|
"tag": "@fluentui/react-dialog_v9.5.10",
|
|
7
85
|
"version": "9.5.10",
|
|
8
86
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 27 Jun 2023 11:19:44 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.12)
|
|
8
|
+
|
|
9
|
+
Tue, 27 Jun 2023 11:19:44 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.11..@fluentui/react-dialog_v9.5.12)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.9.0 ([PR #28291](https://github.com/microsoft/fluentui/pull/28291) by beachball)
|
|
15
|
+
- Bump @fluentui/react-portal to v9.2.15 ([PR #28291](https://github.com/microsoft/fluentui/pull/28291) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.5.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.11)
|
|
18
|
+
|
|
19
|
+
Mon, 26 Jun 2023 09:53:54 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.10..@fluentui/react-dialog_v9.5.11)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- bugfix: adds grid-template-columns to DialogBody styles to ensure grid template layout ([PR #28272](https://github.com/microsoft/fluentui/pull/28272) by bernardo.sunderhus@gmail.com)
|
|
25
|
+
- bugfix: enables Escape to dismiss alert Dialog ([PR #28276](https://github.com/microsoft/fluentui/pull/28276) by bernardo.sunderhus@gmail.com)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.9.4 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
27
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
28
|
+
- Bump @fluentui/react-context-selector to v9.1.24 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
29
|
+
- Bump @fluentui/react-aria to v9.3.24 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.8.1 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
31
|
+
- Bump @fluentui/react-portal to v9.2.14 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.5.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.10)
|
|
8
34
|
|
|
9
|
-
Tue, 20 Jun 2023 12:
|
|
35
|
+
Tue, 20 Jun 2023 12:38:58 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.9..@fluentui/react-dialog_v9.5.10)
|
|
11
37
|
|
|
12
38
|
### Patches
|
|
@@ -17,11 +17,12 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
17
17
|
i8kkvl: "f4px1ci",
|
|
18
18
|
Belr9w4: "fn67r4l",
|
|
19
19
|
wkccdc: "f1x46k84",
|
|
20
|
+
Budl1dq: "fjj47a5",
|
|
20
21
|
B5xtmjs: "ff54dml",
|
|
21
22
|
Bqu9lor: "f1t97isy"
|
|
22
23
|
}
|
|
23
24
|
}, {
|
|
24
|
-
d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1x46k84{grid-template-rows:auto 1fr;}"],
|
|
25
|
+
d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1x46k84{grid-template-rows:auto 1fr;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}"],
|
|
25
26
|
m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
|
|
26
27
|
m: "screen and (max-width: 480px)"
|
|
27
28
|
}], ["@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","dialogBodyClassNames","root","useStyles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","wkccdc","B5xtmjs","Bqu9lor","d","m","useDialogBodyStyles_unstable","state","styles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeStyles, 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 useStyles = makeStyles({\n root: {\n display: 'grid',\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n },\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n gridTemplateRows: 'auto 1fr',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n }\n }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AAC7F,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAO,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","dialogBodyClassNames","root","useStyles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","wkccdc","Budl1dq","B5xtmjs","Bqu9lor","d","m","useDialogBodyStyles_unstable","state","styles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeStyles, 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 useStyles = makeStyles({\n root: {\n display: 'grid',\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n },\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\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/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AAC7F,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAO,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1BgB,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGzB,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEiB,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';
|
|
3
3
|
import { useDialogContext_unstable } from '../../contexts';
|
|
4
|
-
import {
|
|
4
|
+
import { Escape } from '@fluentui/keyboard-keys';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render DialogSurface.
|
|
7
7
|
*
|
|
@@ -34,7 +34,7 @@ import { isEscapeKeyDismiss } from '../../utils';
|
|
|
34
34
|
const handleKeyDown = useEventCallback((event)=>{
|
|
35
35
|
var _props_onKeyDown;
|
|
36
36
|
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
|
|
37
|
-
if (
|
|
37
|
+
if (event.key === Escape && !event.isDefaultPrevented()) {
|
|
38
38
|
requestOpenChange({
|
|
39
39
|
event,
|
|
40
40
|
open: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n resolveShorthand,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n resolveShorthand,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { 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 { backdrop, as } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const open = useDialogContext_unstable(ctx => ctx.open);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (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 return {\n components: {\n backdrop: 'div',\n root: 'div',\n },\n backdrop: resolveShorthand(backdrop, {\n required: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n onClick: handledBackdropClick,\n },\n }),\n root: getNativeElementProps(as ?? 'div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef),\n }),\n };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","backdrop","as","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","stopPropagation","components","root","required","defaultProps","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,QACd,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,SAAQ,EAAEC,GAAE,EAAE,GAAGH;IACzB,MAAMI,YAAYP,0BAA0BQ,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,kBAAkBT,0BAA0BQ,CAAAA,MAAOA,IAAIC,eAAe;IAC5E,MAAMC,YAAYV,0BAA0BQ,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOX,0BAA0BQ,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBZ,0BAA0BQ,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBb,0BAA0BQ,CAAAA,MAAOA,IAAIM,aAAa;IAExE,MAAMC,uBAAuBlB,iBAAiB,CAACmB,QAA4C;QACzF,IAAIjB,oBAAoBI,MAAME,QAAQ,GAAG;gBACvCF,iBAAAA;YAAAA,CAAAA,0BAAAA,CAAAA,kBAAAA,MAAME,QAAQ,EAACY,OAAO,cAAtBd,qCAAAA,KAAAA,IAAAA,wBAAAA,KAAAA,iBAAyBa;QAC3B,CAAC;QACD,IAAIT,cAAc,WAAW,CAACS,MAAME,kBAAkB,IAAI;YACxDN,kBAAkB;gBAChBI;gBACAL,MAAM,KAAK;gBACXQ,MAAM;YACR;QACF,CAAC;IACH;IAEA,MAAMC,gBAAgBvB,iBAAiB,CAACmB,QAA+C;YACrFb;QAAAA,CAAAA,mBAAAA,MAAMkB,SAAS,cAAflB,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBa;QAElB,IAAIA,MAAMM,GAAG,KAAKrB,UAAU,CAACe,MAAME,kBAAkB,IAAI;YACvDN,kBAAkB;gBAChBI;gBACAL,MAAM,KAAK;gBACXQ,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDH,MAAMO,eAAe;QACvB,CAAC;IACH;IAEA,OAAO;QACLC,YAAY;YACVnB,UAAU;YACVoB,MAAM;QACR;QACApB,UAAUT,iBAAiBS,UAAU;YACnCqB,UAAUf,QAAQJ,cAAc;YAChCoB,cAAc;gBACZ,eAAe;gBACfV,SAASF;YACX;QACF;QACAU,MAAM9B,sBAAsBW,eAAAA,gBAAAA,KAAM,KAAK,EAAE;YACvCsB,UAAU,CAAC;YACX,cAAcrB,cAAc;YAC5BsB,MAAMtB,cAAc,UAAU,gBAAgB,QAAQ;YACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAG2B,YAAYjB,aAAa;YAClE,GAAGV,KAAK;YACR,GAAGM,eAAe;YAClBY,WAAWD;YACXhB,KAAKN,cAAcM,KAAKM;QAC1B;IACF;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useDialogTrigger_unstable } from './useDialogTrigger
|
|
2
|
+
import { useDialogTrigger_unstable } from './useDialogTrigger';
|
|
3
3
|
import { renderDialogTrigger_unstable } from './renderDialogTrigger';
|
|
4
4
|
/**
|
|
5
5
|
* A non-visual component that wraps its child
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger
|
|
1
|
+
{"version":3,"sources":["DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\n * Besides being a trigger that opens/close a dialog through context this component doesn't do much,\n * making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> = props => {\n const state = useDialogTrigger_unstable(props);\n\n return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(DialogTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AAIrE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gBAA8CC,CAAAA,QAAS;IAClE,MAAMC,QAAQJ,0BAA0BG;IAExC,OAAOF,6BAA6BG;AACtC,EAAE;AAEFF,cAAcG,WAAW,GAAG;AAC5B,6FAA6F;AAC5FH,cAAyCI,wBAAwB,GAAG,IAAI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
|
|
3
|
+
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
|
|
4
|
+
import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
5
|
+
/**
|
|
6
|
+
* Create the state required to render DialogTrigger.
|
|
7
|
+
* Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
|
|
8
|
+
*
|
|
9
|
+
* @param props - props from this instance of DialogTrigger
|
|
10
|
+
*/ export const useDialogTrigger_unstable = (props)=>{
|
|
11
|
+
const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();
|
|
12
|
+
const { children , disableButtonEnhancement =false , action =isInsideSurfaceDialog ? 'close' : 'open' } = props;
|
|
13
|
+
const child = getTriggerChild(children);
|
|
14
|
+
const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
|
|
15
|
+
const triggerAttributes = useDialogContext_unstable((ctx)=>ctx.triggerAttributes);
|
|
16
|
+
const handleClick = useEventCallback((event)=>{
|
|
17
|
+
var _child_props, _child_props_onClick;
|
|
18
|
+
(_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);
|
|
19
|
+
if (!event.isDefaultPrevented()) {
|
|
20
|
+
requestOpenChange({
|
|
21
|
+
event,
|
|
22
|
+
type: 'triggerClick',
|
|
23
|
+
open: action === 'open'
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
const triggerChildProps = {
|
|
28
|
+
...child === null || child === void 0 ? void 0 : child.props,
|
|
29
|
+
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
30
|
+
onClick: handleClick,
|
|
31
|
+
...triggerAttributes
|
|
32
|
+
};
|
|
33
|
+
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
|
|
34
|
+
...triggerChildProps,
|
|
35
|
+
type: 'button'
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
|
|
39
|
+
};
|
|
40
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n const triggerChildProps = {\n ...child?.props,\n ref: child?.ref,\n onClick: handleClick,\n ...triggerAttributes,\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerChildProps,\n type: 'button',\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","onClick","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE3G,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,iBAAiB;AAC7F,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAAkD;IAC1F,MAAMC,wBAAwBJ;IAE9B,MAAM,EAAEK,SAAQ,EAAEC,0BAA2B,KAAK,CAAA,EAAEC,QAASH,wBAAwB,UAAU,MAAM,CAAA,EAAE,GAAGD;IAE1G,MAAMK,QAAQX,gBAAgBQ;IAE9B,MAAMI,oBAAoBV,0BAA0BW,CAAAA,MAAOA,IAAID,iBAAiB;IAChF,MAAME,oBAAoBZ,0BAA0BW,CAAAA,MAAOA,IAAIC,iBAAiB;IAEhF,MAAMC,cAAcd,iBAClB,CAACe,QAAoF;YACnFL,cAAAA;QAAAA,CAAAA,uBAAAA,CAAAA,eAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOL,KAAK,EAACW,OAAO,cAApBN,kCAAAA,KAAAA,IAAAA,qBAAAA,KAAAA,cAAuBK;QACvB,IAAI,CAACA,MAAME,kBAAkB,IAAI;YAC/BN,kBAAkB;gBAChBI;gBACAG,MAAM;gBACNC,MAAMV,WAAW;YACnB;QACF,CAAC;IACH;IAGF,MAAMW,oBAAoB;QACxB,GAAGV,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOL,KAAK;QACfgB,KAAKX,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOW,GAAG;QACfL,SAASF;QACT,GAAGD,iBAAiB;IACtB;IAEA,MAAMS,8BAA8BnB,mBAClCO,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOQ,IAAI,AAAD,MAAM,YAAYR,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOQ,IAAI,AAAD,MAAM,MAAMR,MAAMQ,IAAI,GAAG,KAAK,EACpE;QACE,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IAGF,OAAO;QACLX,UAAUT,4BACRS,UACAC,2BAA2BY,oBAAoBE,2BAA2B;IAE9E;AACF,EAAE"}
|
package/lib/utils/index.js
CHANGED
package/lib/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,yBAAyB"}
|
|
@@ -29,6 +29,7 @@ const dialogBodyClassNames = {
|
|
|
29
29
|
i8kkvl: "f4px1ci",
|
|
30
30
|
Belr9w4: "fn67r4l",
|
|
31
31
|
wkccdc: "f1x46k84",
|
|
32
|
+
Budl1dq: "fjj47a5",
|
|
32
33
|
B5xtmjs: "ff54dml",
|
|
33
34
|
Bqu9lor: "f1t97isy"
|
|
34
35
|
}
|
|
@@ -42,7 +43,8 @@ const dialogBodyClassNames = {
|
|
|
42
43
|
".fa2wlxz{overflow-y:unset;}",
|
|
43
44
|
".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}",
|
|
44
45
|
".fn67r4l{row-gap:8px;}",
|
|
45
|
-
".f1x46k84{grid-template-rows:auto 1fr;}"
|
|
46
|
+
".f1x46k84{grid-template-rows:auto 1fr;}",
|
|
47
|
+
".fjj47a5{grid-template-columns:1fr 1fr auto;}"
|
|
46
48
|
],
|
|
47
49
|
m: [
|
|
48
50
|
[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __styles, 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 useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f13qh94s\",\n fshzfu: \"f120kxnn\",\n Bxyxcbc: \"flnwrvu\",\n B7ck84d: \"f1ewtqcl\",\n B68tc82: \"f1ln0qer\",\n Bmxbyg5: \"fa2wlxz\",\n i8kkvl: \"f4px1ci\",\n Belr9w4: \"fn67r4l\",\n wkccdc: \"f1x46k84\",\n B5xtmjs: \"ff54dml\",\n Bqu9lor: \"f1t97isy\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}\", \".flnwrvu{max-height:calc(100vh - 2 * 24px);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f1ln0qer{overflow-x:unset;}\", \".fa2wlxz{overflow-y:unset;}\", \".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1x46k84{grid-template-rows:auto 1fr;}\"],\n m: [[\"@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}\", {\n m: \"screen and (max-width: 480px)\"\n }]]\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useStyles","__styles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","wkccdc","B5xtmjs","Bqu9lor","d","m","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;
|
|
1
|
+
{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __styles, 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 useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f13qh94s\",\n fshzfu: \"f120kxnn\",\n Bxyxcbc: \"flnwrvu\",\n B7ck84d: \"f1ewtqcl\",\n B68tc82: \"f1ln0qer\",\n Bmxbyg5: \"fa2wlxz\",\n i8kkvl: \"f4px1ci\",\n Belr9w4: \"fn67r4l\",\n wkccdc: \"f1x46k84\",\n Budl1dq: \"fjj47a5\",\n B5xtmjs: \"ff54dml\",\n Bqu9lor: \"f1t97isy\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}\", \".flnwrvu{max-height:calc(100vh - 2 * 24px);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f1ln0qer{overflow-x:unset;}\", \".fa2wlxz{overflow-y:unset;}\", \".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1x46k84{grid-template-rows:auto 1fr;}\", \".fjj47a5{grid-template-columns:1fr 1fr auto;}\"],\n m: [[\"@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}\", {\n m: \"screen and (max-width: 480px)\"\n }]]\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useStyles","__styles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","wkccdc","Budl1dq","B5xtmjs","Bqu9lor","d","m","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;IAgCAC,4BAA4B,MAA5BA;;uBAlCsC;AAE5C,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA4B;QAA6D;QAAgD;QAAqC;QAAgC;QAA+B;QAAoD;QAA0B;QAA2C;KAAgD;IAC1ZC,GAAG;QAAC;YAAC;YAAoE;gBACvEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAsF;gBACzFA,GAAG;YACL;SAAE;KAAC;AACL;AAIO,MAAMjB,+BAA+BkB,CAAAA,QAAS;IACnD,MAAMC,SAASjB;IACfgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,qBAAqBE,IAAI,EAAEkB,OAAOlB,IAAI,EAAEiB,MAAMjB,IAAI,CAACmB,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}
|
|
@@ -10,7 +10,7 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
|
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
11
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
12
|
const _contexts = require("../../contexts");
|
|
13
|
-
const
|
|
13
|
+
const _keyboardKeys = require("@fluentui/keyboard-keys");
|
|
14
14
|
const useDialogSurface_unstable = (props, ref)=>{
|
|
15
15
|
const { backdrop , as } = props;
|
|
16
16
|
const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
|
|
@@ -35,7 +35,7 @@ const useDialogSurface_unstable = (props, ref)=>{
|
|
|
35
35
|
const handleKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
|
|
36
36
|
var _props_onKeyDown;
|
|
37
37
|
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
|
|
38
|
-
if (
|
|
38
|
+
if (event.key === _keyboardKeys.Escape && !event.isDefaultPrevented()) {
|
|
39
39
|
requestOpenChange({
|
|
40
40
|
event,
|
|
41
41
|
open: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } 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 { backdrop , as } = props;\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);\n const open = useDialogContext_unstable((ctx)=>ctx.open);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n const handledBackdropClick = useEventCallback((event)=>{\n if (isResolvedShorthand(props.backdrop)) {\n var _props_backdrop, _props_backdrop_onClick;\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 return {\n components: {\n backdrop: 'div',\n root: 'div'\n },\n backdrop: resolveShorthand(backdrop, {\n required: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n onClick: handledBackdropClick\n }\n }),\n root: getNativeElementProps(as !== null && as !== void 0 ? as : '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 ref: useMergedRefs(ref, dialogRef)\n })\n };\n};\n"],"names":["useDialogSurface_unstable","props","ref","backdrop","as","modalType","useDialogContext_unstable","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","key","Escape","stopPropagation","components","root","resolveShorthand","required","defaultProps","getNativeElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACuF;0BACpE;8BACnB;AASZ,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,SAAQ,EAAGC,GAAE,EAAG,GAAGH;IAC3B,MAAMI,YAAYC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,kBAAkBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IAC5E,MAAMC,YAAYH,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIE,SAAS;IAChE,MAAMC,OAAOJ,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBL,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBN,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIM,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QACnD,IAAIC,IAAAA,mCAAmB,EAAChB,MAAME,QAAQ,GAAG;YACrC,IAAIe,iBAAiBC;YACpBA,CAAAA,0BAA0B,AAACD,CAAAA,kBAAkBjB,MAAME,QAAQ,AAAD,EAAGiB,OAAO,AAAD,MAAO,IAAI,IAAID,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBE,IAAI,CAACH,iBAAiBF,MAAM;QACzL,CAAC;QACD,IAAIX,cAAc,WAAW,CAACW,MAAMM,kBAAkB,IAAI;YACtDX,kBAAkB;gBACdK;gBACAN,MAAM,KAAK;gBACXa,MAAM;YACV;QACJ,CAAC;IACL;IACA,MAAMC,gBAAgBT,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QAC5C,IAAIS;QACHA,CAAAA,mBAAmBxB,MAAMyB,SAAS,AAAD,MAAO,IAAI,IAAID,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACpB,OAAOe,MAAM;QAC3H,IAAIA,MAAMW,GAAG,KAAKC,oBAAM,IAAI,CAACZ,MAAMM,kBAAkB,IAAI;YACrDX,kBAAkB;gBACdK;gBACAN,MAAM,KAAK;gBACXa,MAAM;YACV;YACA,qFAAqF;YACrF,gDAAgD;YAChDP,MAAMa,eAAe;QACzB,CAAC;IACL;IACA,OAAO;QACHC,YAAY;YACR3B,UAAU;YACV4B,MAAM;QACV;QACA5B,UAAU6B,IAAAA,gCAAgB,EAAC7B,UAAU;YACjC8B,UAAUvB,QAAQL,cAAc;YAChC6B,cAAc;gBACV,eAAe;gBACfd,SAASN;YACb;QACJ;QACAiB,MAAMI,IAAAA,qCAAqB,EAAC/B,OAAO,IAAI,IAAIA,OAAO,KAAK,IAAIA,KAAK,KAAK,EAAE;YACnEgC,UAAU,CAAC;YACX,cAAc/B,cAAc;YAC5BgC,MAAMhC,cAAc,UAAU,gBAAgB,QAAQ;YACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAGqC,YAAY1B,aAAa;YAClE,GAAGX,KAAK;YACR,GAAGO,eAAe;YAClBkB,WAAWF;YACXtB,KAAKqC,IAAAA,6BAAa,EAACrC,KAAKO;QAC5B;IACJ;AACJ"}
|
|
@@ -8,10 +8,10 @@ Object.defineProperty(exports, "DialogTrigger", {
|
|
|
8
8
|
});
|
|
9
9
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
-
const
|
|
11
|
+
const _useDialogTrigger = require("./useDialogTrigger");
|
|
12
12
|
const _renderDialogTrigger = require("./renderDialogTrigger");
|
|
13
13
|
const DialogTrigger = (props)=>{
|
|
14
|
-
const state = (0,
|
|
14
|
+
const state = (0, _useDialogTrigger.useDialogTrigger_unstable)(props);
|
|
15
15
|
return (0, _renderDialogTrigger.renderDialogTrigger_unstable)(state);
|
|
16
16
|
};
|
|
17
17
|
DialogTrigger.displayName = 'DialogTrigger';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger
|
|
1
|
+
{"version":3,"sources":["DialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\n * Besides being a trigger that opens/close a dialog through context this component doesn't do much,\n * making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.\n */ export const DialogTrigger = (props)=>{\n const state = useDialogTrigger_unstable(props);\n return renderDialogTrigger_unstable(state);\n};\nDialogTrigger.displayName = 'DialogTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\nDialogTrigger.isFluentTriggerComponent = true;\n"],"names":["DialogTrigger","props","state","useDialogTrigger_unstable","renderDialogTrigger_unstable","displayName","isFluentTriggerComponent"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;kCACmB;qCACG;AASlC,MAAMA,gBAAgB,CAACC,QAAQ;IACtC,MAAMC,QAAQC,IAAAA,2CAAyB,EAACF;IACxC,OAAOG,IAAAA,iDAA4B,EAACF;AACxC;AACAF,cAAcK,WAAW,GAAG;AAC5B,6FAA6F;AAC7FL,cAAcM,wBAAwB,GAAG,IAAI"}
|
|
@@ -6,4 +6,4 @@ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
|
6
6
|
_exportStar(require("./DialogTrigger"), exports);
|
|
7
7
|
_exportStar(require("./DialogTrigger.types"), exports);
|
|
8
8
|
_exportStar(require("./renderDialogTrigger"), exports);
|
|
9
|
-
_exportStar(require("./useDialogTrigger
|
|
9
|
+
_exportStar(require("./useDialogTrigger"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA"}
|
package/lib-commonjs/components/DialogTrigger/{useDialogTrigger.styles.js → useDialogTrigger.js}
RENAMED
|
@@ -41,4 +41,4 @@ const useDialogTrigger_unstable = (props)=>{
|
|
|
41
41
|
return {
|
|
42
42
|
children: (0, _reactUtilities.applyTriggerPropsToChildren)(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
|
|
43
43
|
};
|
|
44
|
-
};
|
|
44
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useDialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */ export const useDialogTrigger_unstable = (props)=>{\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n const { children , disableButtonEnhancement =false , action =isInsideSurfaceDialog ? 'close' : 'open' } = props;\n const child = getTriggerChild(children);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const triggerAttributes = useDialogContext_unstable((ctx)=>ctx.triggerAttributes);\n const handleClick = useEventCallback((event)=>{\n var _child_props, _child_props_onClick;\n (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open'\n });\n }\n });\n const triggerChildProps = {\n ...child === null || child === void 0 ? void 0 : child.props,\n ref: child === null || child === void 0 ? void 0 : child.ref,\n onClick: handleClick,\n ...triggerAttributes\n };\n const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {\n ...triggerChildProps,\n type: 'button'\n });\n return {\n children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)\n };\n};\n"],"names":["useDialogTrigger_unstable","props","isInsideSurfaceDialog","useDialogSurfaceContext_unstable","children","disableButtonEnhancement","action","child","getTriggerChild","requestOpenChange","useDialogContext_unstable","ctx","triggerAttributes","handleClick","useEventCallback","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren"],"mappings":";;;;+BASiBA;;aAAAA;;;6DATM;gCACwD;0BACH;2BACzC;AAMxB,MAAMA,4BAA4B,CAACC,QAAQ;IAClD,MAAMC,wBAAwBC,IAAAA,0CAAgC;IAC9D,MAAM,EAAEC,SAAQ,EAAGC,0BAA0B,KAAK,CAAA,EAAGC,QAAQJ,wBAAwB,UAAU,MAAM,CAAA,EAAG,GAAGD;IAC3G,MAAMM,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,MAAMK,oBAAoBC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,iBAAiB;IAChF,MAAMG,oBAAoBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,iBAAiB;IAChF,MAAMC,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QAC1C,IAAIC,cAAcC;QACjBA,CAAAA,uBAAuB,AAACD,CAAAA,eAAeT,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK,AAAD,EAAGiB,OAAO,AAAD,MAAO,IAAI,IAAID,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBE,IAAI,CAACH,cAAcD,MAAM;QACjN,IAAI,CAACA,MAAMK,kBAAkB,IAAI;YAC7BX,kBAAkB;gBACdM;gBACAM,MAAM;gBACNC,MAAMhB,WAAW;YACrB;QACJ,CAAC;IACL;IACA,MAAMiB,oBAAoB;QACtB,GAAGhB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK;QAC5DuB,KAAKjB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMiB,GAAG;QAC5DN,SAASL;QACT,GAAGD,iBAAiB;IACxB;IACA,MAAMa,8BAA8BC,IAAAA,6BAAkB,EAAC,AAACnB,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMc,IAAI,AAAD,MAAO,YAAY,AAACd,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMc,IAAI,AAAD,MAAO,MAAMd,MAAMc,IAAI,GAAG,KAAK,EAAE;QACvN,GAAGE,iBAAiB;QACpBF,MAAM;IACV;IACA,OAAO;QACHjB,UAAUuB,IAAAA,2CAA2B,EAACvB,UAAUC,2BAA2BkB,oBAAoBE,2BAA2B;IAC9H;AACJ"}
|
|
@@ -3,6 +3,5 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
-
_exportStar(require("./isEscapeKeyDown"), exports);
|
|
7
6
|
_exportStar(require("./useDisableBodyScroll"), exports);
|
|
8
7
|
_exportStar(require("./useFocusFirstElement"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.12",
|
|
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.9.
|
|
40
|
-
"@fluentui/react-jsx-runtime": "9.0.0-alpha.
|
|
39
|
+
"@fluentui/react-utilities": "^9.9.4",
|
|
40
|
+
"@fluentui/react-jsx-runtime": "9.0.0-alpha.8",
|
|
41
41
|
"@fluentui/keyboard-keys": "^9.0.3",
|
|
42
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
42
|
+
"@fluentui/react-context-selector": "^9.1.24",
|
|
43
43
|
"@fluentui/react-shared-contexts": "^9.5.1",
|
|
44
|
-
"@fluentui/react-aria": "^9.3.
|
|
44
|
+
"@fluentui/react-aria": "^9.3.24",
|
|
45
45
|
"@fluentui/react-icons": "^2.0.203",
|
|
46
|
-
"@fluentui/react-tabster": "^9.
|
|
46
|
+
"@fluentui/react-tabster": "^9.9.0",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.9",
|
|
48
|
-
"@fluentui/react-portal": "^9.2.
|
|
48
|
+
"@fluentui/react-portal": "^9.2.15",
|
|
49
49
|
"@griffel/react": "^1.5.7",
|
|
50
50
|
"@swc/helpers": "^0.4.14"
|
|
51
51
|
},
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
|
|
3
|
-
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
|
|
4
|
-
import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
5
|
-
/**
|
|
6
|
-
* Create the state required to render DialogTrigger.
|
|
7
|
-
* Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of DialogTrigger
|
|
10
|
-
*/
|
|
11
|
-
export const useDialogTrigger_unstable = props => {
|
|
12
|
-
const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();
|
|
13
|
-
const {
|
|
14
|
-
children,
|
|
15
|
-
disableButtonEnhancement = false,
|
|
16
|
-
action = isInsideSurfaceDialog ? 'close' : 'open'
|
|
17
|
-
} = props;
|
|
18
|
-
const child = getTriggerChild(children);
|
|
19
|
-
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
20
|
-
const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);
|
|
21
|
-
const handleClick = useEventCallback(event => {
|
|
22
|
-
var _child_props, _child_props_onClick;
|
|
23
|
-
(_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);
|
|
24
|
-
if (!event.isDefaultPrevented()) {
|
|
25
|
-
requestOpenChange({
|
|
26
|
-
event,
|
|
27
|
-
type: 'triggerClick',
|
|
28
|
-
open: action === 'open'
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const triggerChildProps = {
|
|
33
|
-
...(child === null || child === void 0 ? void 0 : child.props),
|
|
34
|
-
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
35
|
-
onClick: handleClick,
|
|
36
|
-
...triggerAttributes
|
|
37
|
-
};
|
|
38
|
-
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
|
|
39
|
-
...triggerChildProps,
|
|
40
|
-
type: 'button'
|
|
41
|
-
});
|
|
42
|
-
return {
|
|
43
|
-
children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
//# sourceMappingURL=useDialogTrigger.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"sources":["useDialogTrigger.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */ export const useDialogTrigger_unstable = (props)=>{\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n const { children , disableButtonEnhancement =false , action =isInsideSurfaceDialog ? 'close' : 'open' } = props;\n const child = getTriggerChild(children);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const triggerAttributes = useDialogContext_unstable((ctx)=>ctx.triggerAttributes);\n const handleClick = useEventCallback((event)=>{\n var _child_props, _child_props_onClick;\n (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open'\n });\n }\n });\n const triggerChildProps = {\n ...child === null || child === void 0 ? void 0 : child.props,\n ref: child === null || child === void 0 ? void 0 : child.ref,\n onClick: handleClick,\n ...triggerAttributes\n };\n const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {\n ...triggerChildProps,\n type: 'button'\n });\n return {\n children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)\n };\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,2BAA2B;AAC1G,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,gBAAgB;AAC5F,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD;AACA;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,qBAAqB,GAAGJ,gCAAgC,CAAC,CAAC;EAChE,MAAM;IAAEK,QAAQ;IAAGC,wBAAwB,GAAE,KAAK;IAAGC,MAAM,GAAEH,qBAAqB,GAAG,OAAO,GAAG;EAAQ,CAAC,GAAGD,KAAK;EAChH,MAAMK,KAAK,GAAGX,eAAe,CAACQ,QAAQ,CAAC;EACvC,MAAMI,iBAAiB,GAAGV,yBAAyB,CAAEW,GAAG,IAAGA,GAAG,CAACD,iBAAiB,CAAC;EACjF,MAAME,iBAAiB,GAAGZ,yBAAyB,CAAEW,GAAG,IAAGA,GAAG,CAACC,iBAAiB,CAAC;EACjF,MAAMC,WAAW,GAAGd,gBAAgB,CAAEe,KAAK,IAAG;IAC1C,IAAIC,YAAY,EAAEC,oBAAoB;IACtC,CAACA,oBAAoB,GAAG,CAACD,YAAY,GAAGN,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACL,KAAK,EAAEa,OAAO,MAAM,IAAI,IAAID,oBAAoB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,oBAAoB,CAACE,IAAI,CAACH,YAAY,EAAED,KAAK,CAAC;IACjN,IAAI,CAACA,KAAK,CAACK,kBAAkB,CAAC,CAAC,EAAE;MAC7BT,iBAAiB,CAAC;QACdI,KAAK;QACLM,IAAI,EAAE,cAAc;QACpBC,IAAI,EAAEb,MAAM,KAAK;MACrB,CAAC,CAAC;IACN;EACJ,CAAC,CAAC;EACF,MAAMc,iBAAiB,GAAG;IACtB,IAAGb,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACL,KAAK;IAC5DmB,GAAG,EAAEd,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACc,GAAG;IAC5DN,OAAO,EAAEJ,WAAW;IACpB,GAAGD;EACP,CAAC;EACD,MAAMY,2BAA2B,GAAGtB,kBAAkB,CAAC,CAACO,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACW,IAAI,MAAM,QAAQ,IAAI,CAACX,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACW,IAAI,MAAM,GAAG,GAAGX,KAAK,CAACW,IAAI,GAAG,KAAK,EAAE;IACvN,GAAGE,iBAAiB;IACpBF,IAAI,EAAE;EACV,CAAC,CAAC;EACF,OAAO;IACHd,QAAQ,EAAET,2BAA2B,CAACS,QAAQ,EAAEC,wBAAwB,GAAGe,iBAAiB,GAAGE,2BAA2B;EAC9H,CAAC;AACL,CAAC"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Escape } from '@fluentui/keyboard-keys';
|
|
3
|
-
/**
|
|
4
|
-
* Checks if keydown event is a proper Escape key dismiss
|
|
5
|
-
*/ export function isEscapeKeyDismiss(event, modalType) {
|
|
6
|
-
return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["isEscapeKeyDown.ts"],"sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { DialogSurfaceElement } from '../DialogSurface';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(\n event: React.KeyboardEvent<DialogSurfaceElement>,\n modalType: DialogModalType,\n): boolean {\n return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();\n}\n"],"names":["React","Escape","isEscapeKeyDismiss","event","modalType","key","isDefaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,0BAA0B;AAIjD;;CAEC,GACD,OAAO,SAASC,mBACdC,KAAgD,EAChDC,SAA0B,EACjB;IACT,OAAOD,MAAME,GAAG,KAAKJ,UAAUG,cAAc,WAAW,CAACD,MAAMG,kBAAkB;AACnF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogTrigger.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = props => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n const {\n children,\n disableButtonEnhancement = false,\n action = isInsideSurfaceDialog ? 'close' : 'open'\n } = props;\n const child = getTriggerChild(children);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);\n const handleClick = useEventCallback(event => {\n var _child_props, _child_props_onClick;\n (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open'\n });\n }\n });\n const triggerChildProps = {\n ...(child === null || child === void 0 ? void 0 : child.props),\n ref: child === null || child === void 0 ? void 0 : child.ref,\n onClick: handleClick,\n ...triggerAttributes\n };\n const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {\n ...triggerChildProps,\n type: 'button'\n });\n return {\n children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)\n };\n};\n//# sourceMappingURL=useDialogTrigger.styles.js.map"],"names":["useDialogTrigger_unstable","props","isInsideSurfaceDialog","useDialogSurfaceContext_unstable","children","disableButtonEnhancement","action","child","getTriggerChild","requestOpenChange","useDialogContext_unstable","ctx","triggerAttributes","handleClick","useEventCallback","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;gCACwD;0BACH;2BACzC;AAO5B,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAMC,wBAAwBC,IAAAA,0CAAgC;IAC9D,MAAM,EACJC,SAAQ,EACRC,0BAA2B,KAAK,CAAA,EAChCC,QAASJ,wBAAwB,UAAU,MAAM,CAAA,EAClD,GAAGD;IACJ,MAAMM,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,MAAMK,oBAAoBC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,iBAAiB;IAChF,MAAMG,oBAAoBF,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIC,iBAAiB;IAChF,MAAMC,cAAcC,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QAC5C,IAAIC,cAAcC;QACjBA,CAAAA,uBAAuB,AAACD,CAAAA,eAAeT,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK,AAAD,EAAGiB,OAAO,AAAD,MAAO,IAAI,IAAID,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBE,IAAI,CAACH,cAAcD,MAAM;QACjN,IAAI,CAACA,MAAMK,kBAAkB,IAAI;YAC/BX,kBAAkB;gBAChBM;gBACAM,MAAM;gBACNC,MAAMhB,WAAW;YACnB;QACF,CAAC;IACH;IACA,MAAMiB,oBAAoB;QACxB,GAAIhB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK;QAC7DuB,KAAKjB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMiB,GAAG;QAC5DN,SAASL;QACT,GAAGD,iBAAiB;IACtB;IACA,MAAMa,8BAA8BC,IAAAA,6BAAkB,EAAC,AAACnB,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMc,IAAI,AAAD,MAAO,YAAY,AAACd,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMc,IAAI,AAAD,MAAO,MAAMd,MAAMc,IAAI,GAAG,KAAK,EAAE;QACzN,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IACA,OAAO;QACLjB,UAAUuB,IAAAA,2CAA2B,EAACvB,UAAUC,2BAA2BkB,oBAAoBE,2BAA2B;IAC5H;AACF,GACA,mDAAmD"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "isEscapeKeyDismiss", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>isEscapeKeyDismiss
|
|
8
|
-
});
|
|
9
|
-
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
-
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
-
const _keyboardKeys = require("@fluentui/keyboard-keys");
|
|
12
|
-
function isEscapeKeyDismiss(event, modalType) {
|
|
13
|
-
return event.key === _keyboardKeys.Escape && modalType !== 'alert' && !event.isDefaultPrevented();
|
|
14
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["isEscapeKeyDown.js"],"sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */ export function isEscapeKeyDismiss(event, modalType) {\n return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();\n}\n"],"names":["isEscapeKeyDismiss","event","modalType","key","Escape","isDefaultPrevented"],"mappings":";;;;+BAIoBA;;aAAAA;;;6DAJG;8BACA;AAGZ,SAASA,mBAAmBC,KAAK,EAAEC,SAAS,EAAE;IACrD,OAAOD,MAAME,GAAG,KAAKC,oBAAM,IAAIF,cAAc,WAAW,CAACD,MAAMI,kBAAkB;AACrF"}
|