@fluentui/react-dialog 9.0.0-beta.9 → 9.0.0
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 +141 -2
- package/CHANGELOG.md +47 -3
- package/README.md +41 -1
- package/dist/index.d.ts +27 -21
- package/lib/components/Dialog/Dialog.types.js.map +1 -1
- package/lib/components/Dialog/useDialog.js +5 -6
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/components/Dialog/useDialogContextValues.js +4 -4
- package/lib/components/Dialog/useDialogContextValues.js.map +1 -1
- package/lib/components/DialogBody/useDialogBody.js +3 -3
- package/lib/components/DialogBody/useDialogBody.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.js +25 -17
- package/lib/components/DialogBody/useDialogBodyStyles.js.map +1 -1
- package/lib/components/DialogContent/DialogContent.js +2 -1
- package/lib/components/DialogContent/DialogContent.js.map +1 -1
- package/lib/components/DialogContent/DialogContent.types.js.map +1 -1
- package/lib/components/DialogContent/renderDialogContent.js +1 -2
- package/lib/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib/components/DialogContent/useDialogContent.js +11 -10
- package/lib/components/DialogContent/useDialogContent.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.js +23 -9
- package/lib/components/DialogContent/useDialogContentStyles.js.map +1 -1
- package/lib/components/DialogSurface/DialogSurface.types.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +10 -81
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.js +61 -59
- package/lib/components/DialogSurface/useDialogSurfaceStyles.js.map +1 -1
- package/lib/components/DialogTitle/DialogTitle.types.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.js +29 -29
- package/lib/components/DialogTrigger/DialogTrigger.types.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +4 -3
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib/contexts/constants.js +1 -1
- package/lib/contexts/constants.js.map +1 -1
- package/lib/contexts/dialogContext.js.map +1 -1
- package/lib/utils/index.js +0 -2
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/isEscapeKeyDown.js +1 -4
- package/lib/utils/isEscapeKeyDown.js.map +1 -1
- package/lib/utils/useFocusFirstElement.js +7 -8
- package/lib/utils/useFocusFirstElement.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialog.js +3 -4
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialogContextValues.js +4 -4
- package/lib-commonjs/components/Dialog/useDialogContextValues.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBody.js +3 -4
- package/lib-commonjs/components/DialogBody/useDialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js +25 -18
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js.map +1 -1
- package/lib-commonjs/components/DialogContent/DialogContent.js +2 -1
- package/lib-commonjs/components/DialogContent/DialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/renderDialogContent.js +1 -2
- package/lib-commonjs/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContent.js +12 -10
- package/lib-commonjs/components/DialogContent/useDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.js +24 -8
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +10 -81
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js +62 -60
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js +29 -29
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +4 -4
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib-commonjs/contexts/constants.js +2 -2
- package/lib-commonjs/contexts/constants.js.map +1 -1
- package/lib-commonjs/contexts/dialogContext.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -4
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/isEscapeKeyDown.js +1 -5
- package/lib-commonjs/utils/isEscapeKeyDown.js.map +1 -1
- package/lib-commonjs/utils/useFocusFirstElement.js +7 -9
- package/lib-commonjs/utils/useFocusFirstElement.js.map +1 -1
- package/package.json +9 -11
- package/lib/utils/isHTMLDialogElement.js +0 -4
- package/lib/utils/isHTMLDialogElement.js.map +0 -1
- package/lib/utils/useControlNativeDialogOpenState.js +0 -20
- package/lib/utils/useControlNativeDialogOpenState.js.map +0 -1
- package/lib-commonjs/utils/isHTMLDialogElement.js +0 -13
- package/lib-commonjs/utils/isHTMLDialogElement.js.map +0 -1
- package/lib-commonjs/utils/useControlNativeDialogOpenState.js +0 -31
- package/lib-commonjs/utils/useControlNativeDialogOpenState.js.map +0 -1
|
@@ -65,37 +65,37 @@ export const useDialogTitleInternalStyles = /*#__PURE__*/__styles({
|
|
|
65
65
|
"fsow6f": "fgusgyc",
|
|
66
66
|
"Brovlpu": "ftqa4ok",
|
|
67
67
|
"B486eqv": "f2hkw1w",
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"
|
|
88
|
-
"
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"
|
|
95
|
-
"
|
|
68
|
+
"B8q5s1w": "f8hki3x",
|
|
69
|
+
"Bci5o5g": ["f1d2448m", "ffh67wi"],
|
|
70
|
+
"n8qw10": "f1bjia2o",
|
|
71
|
+
"Bdrgwmp": ["ffh67wi", "f1d2448m"],
|
|
72
|
+
"Bm4h7ae": "f15bsgw9",
|
|
73
|
+
"B7ys5i9": "f14e48fq",
|
|
74
|
+
"Busjfv9": "f18yb2kv",
|
|
75
|
+
"Bhk32uz": "fd6o370",
|
|
76
|
+
"Bf4ptjt": "fh1cnn4",
|
|
77
|
+
"kclons": ["fy7oxxb", "f184ne2d"],
|
|
78
|
+
"Bhdgwq3": "fpukqih",
|
|
79
|
+
"Blkhhs4": ["f184ne2d", "fy7oxxb"],
|
|
80
|
+
"Bqtpl0w": "frrh606",
|
|
81
|
+
"clg4pj": ["f1v5zibi", "fo2hd23"],
|
|
82
|
+
"hgwjuy": "ful5kiu",
|
|
83
|
+
"Bonggc9": ["fo2hd23", "f1v5zibi"],
|
|
84
|
+
"B1tsrr9": ["f1jqcqds", "ftffrms"],
|
|
85
|
+
"Dah5zi": ["ftffrms", "f1jqcqds"],
|
|
86
|
+
"Bkh64rk": ["f2e7qr6", "fsr1zz6"],
|
|
87
|
+
"qqdqy8": ["fsr1zz6", "f2e7qr6"],
|
|
88
|
+
"B6dhp37": "f1dvezut",
|
|
89
|
+
"i03rao": ["fd0oaoj", "f1cwg4i8"],
|
|
90
|
+
"Boxcth7": "fjvm52t",
|
|
91
|
+
"Bsom6fd": ["f1cwg4i8", "fd0oaoj"],
|
|
92
|
+
"J0r882": "fdiulkx",
|
|
93
|
+
"Bjwuhne": "f1yalx80",
|
|
94
|
+
"Ghsupd": ["fq22d5a", "f1jw7pan"],
|
|
95
|
+
"Bule8hv": ["f1jw7pan", "fq22d5a"]
|
|
96
96
|
}
|
|
97
97
|
}, {
|
|
98
|
-
"d": [".f10pi13n{position:relative;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fez10in{line-height:0;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".
|
|
98
|
+
"d": [".f10pi13n{position:relative;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fez10in{line-height:0;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}"],
|
|
99
99
|
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
100
100
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
101
101
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogTrigger.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = {\n /**\n * Explicitly declare if the trigger is responsible for opening or\n * closing a Dialog visibility state.\n *
|
|
1
|
+
{"version":3,"file":"DialogTrigger.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {\n /**\n * Explicitly declare if the trigger is responsible for opening or\n * closing a Dialog visibility state.\n *\n * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default\n *\n * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default\n */\n action?: DialogTriggerAction;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup'?: 'dialog';\n }\n>;\n\nexport type DialogTriggerState = {\n children: React.ReactElement | null;\n};\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
3
2
|
import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
|
|
4
3
|
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
|
|
@@ -16,7 +15,7 @@ export const useDialogTrigger_unstable = props => {
|
|
|
16
15
|
children,
|
|
17
16
|
action = isInsideSurfaceDialog ? 'close' : 'open'
|
|
18
17
|
} = props;
|
|
19
|
-
const child =
|
|
18
|
+
const child = getTriggerChild(children);
|
|
20
19
|
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
21
20
|
const {
|
|
22
21
|
triggerAttributes
|
|
@@ -35,7 +34,9 @@ export const useDialogTrigger_unstable = props => {
|
|
|
35
34
|
}
|
|
36
35
|
});
|
|
37
36
|
return {
|
|
38
|
-
children: applyTriggerPropsToChildren(children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
|
|
37
|
+
children: applyTriggerPropsToChildren(children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
|
|
38
|
+
type: 'button',
|
|
39
|
+
...(child === null || child === void 0 ? void 0 : child.props),
|
|
39
40
|
'aria-haspopup': action === 'close' ? undefined : 'dialog',
|
|
40
41
|
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
41
42
|
onClick: handleClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,2BAAT,EAAsC,eAAtC,EAAuD,gBAAvD,QAA+E,2BAA/E;AAEA,SAAS,yBAAT,EAAoC,gCAApC,QAA4E,gBAA5E;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA;;;;;AAKG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAkD;EACzF,MAAM,qBAAqB,GAAG,gCAAgC,EAA9D;EAEA,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,qBAAqB,GAAG,OAAH,GAAa;EAAvD,IAAkE,KAAxE;EAEA,MAAM,KAAK,GAAG,eAAe,CAAC,QAAD,CAA7B;EAEA,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAZ,CAAnD;EAEA,MAAM;IAAE;EAAF,IAAwB,kBAAkB,EAAhD;EAEA,MAAM,WAAW,GAAG,gBAAgB,CACjC,KAAD,IAAoF;;;IAClF,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,OAAb,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAApB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAL,EAAiC;MAC/B,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,cAFU;QAGhB,IAAI,EAAE,MAAM,KAAK;MAHD,CAAD,CAAjB;IAKD;EACF,CAViC,CAApC;EAaA,OAAO;IACL,QAAQ,EAAE,2BAA2B,CACnC,QADmC,EAEnC,kBAAkB,CAAC,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,QAAhB,IAA4B,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,GAA5C,GAAkD,KAAK,CAAC,IAAxD,GAA+D,KAAhE,EAAuE;MACvF,IAAI,EAAE,QADiF;MAEvF,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CAFuF;MAGvF,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,QAHqC;MAIvF,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAJ2E;MAKvF,OAAO,EAAE,WAL8E;MAMvF,GAAG;IANoF,CAAvE,CAFiB;EADhC,CAAP;AAaD,CArCM","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n const { triggerAttributes } = useModalAttributes();\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 return {\n children: applyTriggerPropsToChildren(\n children,\n useARIAButtonProps(child?.type === 'button' || child?.type === 'a' ? child.type : 'div', {\n type: 'button',\n ...child?.props,\n 'aria-haspopup': action === 'close' ? undefined : 'dialog',\n ref: child?.ref,\n onClick: handleClick,\n ...triggerAttributes,\n }),\n ),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -7,5 +7,5 @@ export const ACTIONS_START_GRID_AREA = 'actions-start';
|
|
|
7
7
|
export const ACTIONS_END_GRID_AREA = 'actions-end';
|
|
8
8
|
export const TITLE_GRID_AREA = 'title';
|
|
9
9
|
export const TITLE_ACTION_GRID_AREA = 'close-button';
|
|
10
|
-
export const
|
|
10
|
+
export const CONTENT_GRID_AREA = 'body';
|
|
11
11
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC","sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_RADIUS = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n\nexport const ACTIONS_START_GRID_AREA = 'actions-start';\nexport const ACTIONS_END_GRID_AREA = 'actions-end';\nexport const TITLE_GRID_AREA = 'title';\nexport const TITLE_ACTION_GRID_AREA = 'close-button';\nexport const CONTENT_GRID_AREA = 'body';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/contexts/dialogContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAkBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,cAAc,EAAE,KAH8B;EAI9C,SAAS,EAAE;IAAE,OAAO,EAAE;EAAX,CAJmC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n open: boolean;\n
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/contexts/dialogContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAkBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,cAAc,EAAE,KAH8B;EAI9C,SAAS,EAAE;IAAE,OAAO,EAAE;EAAX,CAJmC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n open: boolean;\n dialogContentId?: string;\n dialogTitleId?: string;\n isNestedDialog: boolean;\n dialogRef: React.Ref<DialogSurfaceElement>;\n modalType: DialogModalType;\n /**\n * Requests dialog main component to update it's internal open state\n */\n requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n open: false,\n modalType: 'modal',\n isNestedDialog: false,\n dialogRef: { current: null },\n requestOpenChange() {\n /* noop */\n },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
|
package/lib/utils/index.js
CHANGED
package/lib/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\n"]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { Escape } from '@fluentui/keyboard-keys';
|
|
2
|
-
import { isHTMLDialogElement } from './isHTMLDialogElement';
|
|
3
2
|
/**
|
|
4
3
|
* Checks if keydown event is a proper Escape key dismiss
|
|
5
4
|
*/
|
|
6
5
|
|
|
7
6
|
export function isEscapeKeyDismiss(event, modalType) {
|
|
8
|
-
return event.key === Escape &&
|
|
9
|
-
// `modal` should only be handled in the case of non native dialog
|
|
10
|
-
modalType === 'non-modal' || !isHTMLDialogElement(event.currentTarget) && modalType === 'modal') && !event.isDefaultPrevented();
|
|
7
|
+
return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();
|
|
11
8
|
}
|
|
12
9
|
//# sourceMappingURL=isEscapeKeyDown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;AAIA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CACJ,KADI,EAEJ,SAFI,EAEsB;EAE1B,OAAO,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,SAAS,KAAK,OAAtC,IAAiD,CAAC,KAAK,CAAC,kBAAN,EAAzD;AACD","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"],"sourceRoot":"../src/"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
3
3
|
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
4
|
-
import { isHTMLDialogElement } from './isHTMLDialogElement';
|
|
5
4
|
/**
|
|
6
5
|
* Focus first element on content when dialog is opened,
|
|
7
6
|
*/
|
|
@@ -26,14 +25,14 @@ export function useFocusFirstElement(open, modalType) {
|
|
|
26
25
|
const element = dialogRef.current && findFirstFocusable(dialogRef.current);
|
|
27
26
|
|
|
28
27
|
if (element) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
} else if (process.env.NODE_ENV !== 'production') {
|
|
34
|
-
(_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.blur(); // eslint-disable-next-line no-console
|
|
28
|
+
element.focus();
|
|
29
|
+
} else {
|
|
30
|
+
(_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus(); // https://github.com/microsoft/fluentui/issues/25150
|
|
35
31
|
|
|
36
|
-
|
|
32
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
33
|
+
// eslint-disable-next-line no-console
|
|
34
|
+
console.warn(['@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.', 'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`'].join('\n'));
|
|
35
|
+
}
|
|
37
36
|
}
|
|
38
37
|
}, [findFirstFocusable, open, modalType, targetDocument]);
|
|
39
38
|
return dialogRef;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,kBAAT,QAAmC,iCAAnC;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,kBAAT,QAAmC,iCAAnC;AAIA;;AAEG;;AACH,OAAM,SAAU,oBAAV,CAA+B,IAA/B,EAA8C,SAA9C,EAAwE;EAC5E,MAAM;IAAE;EAAF,IAAyB,eAAe,EAA9C;EACA,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAAmC,IAAnC,CAAlB;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,EAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;IACnB,IAAI,CAAC,IAAL,EAAW;MACT,OAAO,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAAF,EAAzB;IACD;;IACD,UAAU,CAAC,OAAX,GAAqB,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAArC;IACA,MAAM,OAAO,GAAG,SAAS,CAAC,OAAV,IAAqB,kBAAkB,CAAC,SAAS,CAAC,OAAX,CAAvD;;IACA,IAAI,OAAJ,EAAa;MACX,OAAO,CAAC,KAAR;IACD,CAFD,MAEO;MACL,CAAA,EAAA,GAAA,SAAS,CAAC,OAAV,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAiB,EAAA,CAAE,KAAF,EAAjB,CADK,CACuB;;MAC5B,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC;QACA,OAAO,CAAC,IAAR,CACE,CACE,mGADF,EAEE,kGAFF,EAGE,IAHF,CAGO,IAHP,CADF;MAMD;IACF;EACF,CApBD,EAoBG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,SAA3B,EAAsC,cAAtC,CApBH;EAsBA,OAAO,SAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n const { findFirstFocusable } = useFocusFinders();\n const { targetDocument } = useFluent_unstable();\n const dialogRef = React.useRef<DialogSurfaceElement>(null);\n const triggerRef = React.useRef<HTMLElement>();\n\n React.useEffect(() => {\n if (!open) {\n return triggerRef.current?.focus();\n }\n triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;\n const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n if (element) {\n element.focus();\n } else {\n dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(\n [\n '@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',\n 'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`',\n ].join('\\n'),\n );\n }\n }\n }, [findFirstFocusable, open, modalType, targetDocument]);\n\n return dialogRef;\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -45,7 +45,6 @@ const useDialog_unstable = props => {
|
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
47
|
const focusRef = utils_1.useFocusFirstElement(open, modalType);
|
|
48
|
-
const nativeControlRef = utils_1.useControlNativeDialogOpenState(open, modalType);
|
|
49
48
|
const disableBodyScroll = utils_1.useDisableBodyScroll();
|
|
50
49
|
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
51
50
|
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
@@ -62,10 +61,10 @@ const useDialog_unstable = props => {
|
|
|
62
61
|
content: open ? content : null,
|
|
63
62
|
trigger,
|
|
64
63
|
requestOpenChange,
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
dialogContentId: react_utilities_1.useId('dialog-content-'),
|
|
65
|
+
dialogTitleId: react_utilities_1.useId('dialog-title-'),
|
|
67
66
|
isNestedDialog: react_context_selector_1.useHasParentContext(contexts_1.DialogContext),
|
|
68
|
-
dialogRef:
|
|
67
|
+
dialogRef: focusRef
|
|
69
68
|
};
|
|
70
69
|
};
|
|
71
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialog.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialog.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;;;;;;AAOG;;;AACI,MAAM,kBAAkB,GAAI,KAAD,IAAoC;EACpE,MAAM;IAAE,QAAF;IAAY,SAAS,GAAG,OAAxB;IAAiC;EAAjC,IAAkD,KAAxD;EAEA,MAAM,CAAC,OAAD,EAAU,OAAV,IAAqB,2BAA2B,CAAC,QAAD,CAAtD;EAEA,MAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,iBAAA,CAAA,oBAAA,CAAqB;IAC3C,KAAK,EAAE,KAAK,CAAC,IAD8B;IAE3C,YAAY,EAAE,KAAK,CAAC,WAFuB;IAG3C,YAAY,EAAE;EAH6B,CAArB,CAAxB;EAMA,MAAM,iBAAiB,GAAG,iBAAA,CAAA,gBAAA,CAAkB,IAAD,IAA+B;IACxE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,IAAI,CAAC,KAAR,EAAe,IAAf,CAAZ,CADwE,CAGxE;IACA;;IACA,IAAI,CAAC,IAAI,CAAC,KAAL,CAAW,kBAAX,EAAL,EAAsC;MACpC,OAAO,CAAC,IAAI,CAAC,IAAN,CAAP;IACD;EACF,CARyB,CAA1B;EAUA,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,CAAqB,IAArB,EAA2B,SAA3B,CAAjB;EACA,MAAM,iBAAiB,GAAG,OAAA,CAAA,oBAAA,EAA1B;EACA,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,KAAK,WAAvB,CAAlC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,kBAAJ,EAAwB;MACtB,OAAO,iBAAiB,EAAxB;IACD;EACF,CAJD,EAIG,CAAC,iBAAD,EAAoB,kBAApB,CAJH;EAMA,OAAO;IACL,UAAU,EAAE;MACV,QAAQ,EAAE;IADA,CADP;IAIL,IAJK;IAKL,SALK;IAML,OAAO,EAAE,IAAI,GAAG,OAAH,GAAa,IANrB;IAOL,OAPK;IAQL,iBARK;IASL,eAAe,EAAE,iBAAA,CAAA,KAAA,CAAM,iBAAN,CATZ;IAUL,aAAa,EAAE,iBAAA,CAAA,KAAA,CAAM,eAAN,CAVV;IAWL,cAAc,EAAE,wBAAA,CAAA,mBAAA,CAAoB,UAAA,CAAA,aAApB,CAXX;IAYL,SAAS,EAAE;EAZN,CAAP;AAcD,CA7CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AA+Cb;;AAEG;;AACH,SAAS,2BAAT,CACE,QADF,EAC2B;EAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;;EACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAI,aAAa,CAAC,MAAd,KAAyB,CAAzB,IAA8B,aAAa,CAAC,MAAd,KAAyB,CAA3D,EAA8D;MAC5D;MACA,OAAO,CAAC,IAAR,CACE,+DACE,4EAFJ;IAID;EACF;;EACD,QAAQ,aAAa,CAAC,MAAtB;IACE;IACA,KAAK,CAAL;MACE,OAAO,aAAP;IACF;;IACA,KAAK,CAAL;MACE,OAAO,CAAC,SAAD,EAAY,aAAa,CAAC,CAAD,CAAzB,CAAP;IACF;;IACA;MACE,OAAO,CAAC,SAAD,EAAY,SAAZ,CAAP;EATJ;AAWD","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n const disableBodyScroll = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n useIsomorphicLayoutEffect(() => {\n if (isBodyScrollLocked) {\n return disableBodyScroll();\n }\n }, [disableBodyScroll, isBodyScrollLocked]);\n\n return {\n components: {\n backdrop: 'div',\n },\n open,\n modalType,\n content: open ? content : null,\n trigger,\n requestOpenChange,\n dialogContentId: useId('dialog-content-'),\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog: useHasParentContext(DialogContext),\n dialogRef: focusRef,\n };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(\n 'Dialog must contain at least one child <DialogSurface/>,\\n' +\n 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n );\n }\n }\n switch (childrenArray.length) {\n // case where there's a trigger followed by content\n case 2:\n return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n // case where there's only content\n case 1:\n return [undefined, childrenArray[0]];\n // unknown case\n default:\n return [undefined, undefined];\n }\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -9,9 +9,9 @@ function useDialogContextValues_unstable(state) {
|
|
|
9
9
|
const {
|
|
10
10
|
modalType,
|
|
11
11
|
open,
|
|
12
|
-
|
|
12
|
+
dialogContentId,
|
|
13
13
|
dialogRef,
|
|
14
|
-
|
|
14
|
+
dialogTitleId,
|
|
15
15
|
isNestedDialog,
|
|
16
16
|
requestOpenChange
|
|
17
17
|
} = state;
|
|
@@ -24,8 +24,8 @@ function useDialogContextValues_unstable(state) {
|
|
|
24
24
|
open,
|
|
25
25
|
modalType,
|
|
26
26
|
dialogRef,
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
dialogContentId,
|
|
28
|
+
dialogTitleId,
|
|
29
29
|
isNestedDialog,
|
|
30
30
|
requestOpenChange
|
|
31
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts"],"names":[],"mappings":";;;;;;;AAGA,SAAgB,+BAAhB,CAAgD,KAAhD,EAAkE;EAChE,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts"],"names":[],"mappings":";;;;;;;AAGA,SAAgB,+BAAhB,CAAgD,KAAhD,EAAkE;EAChE,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,eAAnB;IAAoC,SAApC;IAA+C,aAA/C;IAA8D,cAA9D;IAA8E;EAA9E,IAAoG,KAA1G;EAEA;;;AAGG;;EACH,MAAM,MAAM,GAAuB;IACjC,IADiC;IAEjC,SAFiC;IAGjC,SAHiC;IAIjC,eAJiC;IAKjC,aALiC;IAMjC,cANiC;IAOjC;EAPiC,CAAnC;EAUA,MAAM,aAAa,GAA8B,KAAjD;EAEA,OAAO;IAAE,MAAF;IAAU;EAAV,CAAP;AACD;;AApBD,OAAA,CAAA,+BAAA,GAAA,+BAAA","sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n const { modalType, open, dialogContentId, dialogRef, dialogTitleId, isNestedDialog, requestOpenChange } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const dialog: DialogContextValue = {\n open,\n modalType,\n dialogRef,\n dialogContentId,\n dialogTitleId,\n isNestedDialog,\n requestOpenChange,\n };\n\n const dialogSurface: DialogSurfaceContextValue = false;\n\n return { dialog, dialogSurface };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useDialogBody_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
|
|
10
|
-
const contexts_1 = /*#__PURE__*/require("../../contexts");
|
|
11
9
|
/**
|
|
12
10
|
* Create the state required to render DialogBody.
|
|
13
11
|
*
|
|
@@ -20,13 +18,14 @@ const contexts_1 = /*#__PURE__*/require("../../contexts");
|
|
|
20
18
|
|
|
21
19
|
|
|
22
20
|
const useDialogBody_unstable = (props, ref) => {
|
|
21
|
+
var _a;
|
|
22
|
+
|
|
23
23
|
return {
|
|
24
24
|
components: {
|
|
25
25
|
root: 'div'
|
|
26
26
|
},
|
|
27
|
-
root: react_utilities_1.getNativeElementProps('div', {
|
|
27
|
+
root: react_utilities_1.getNativeElementProps((_a = props.as) !== null && _a !== void 0 ? _a : 'div', {
|
|
28
28
|
ref,
|
|
29
|
-
id: contexts_1.useDialogContext_unstable(ctx => ctx.dialogBodyID),
|
|
30
29
|
...props
|
|
31
30
|
})
|
|
32
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;;;EAC7G,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,GAAG;IAF0C,CAAzC;EAJD,CAAP;AASD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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: getNativeElementProps(props.as ?? 'div', {\n ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -7,9 +7,7 @@ exports.useDialogBodyStyles_unstable = exports.dialogBodyClassNames = void 0;
|
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
const constants_1 = /*#__PURE__*/require("../../contexts/constants");
|
|
10
|
+
const contexts_1 = /*#__PURE__*/require("../../contexts");
|
|
13
11
|
|
|
14
12
|
exports.dialogBodyClassNames = {
|
|
15
13
|
root: 'fui-DialogBody'
|
|
@@ -20,22 +18,33 @@ exports.dialogBodyClassNames = {
|
|
|
20
18
|
|
|
21
19
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
22
20
|
"root": {
|
|
21
|
+
"mc9l5x": "f13qh94s",
|
|
22
|
+
"fshzfu": "f120kxnn",
|
|
23
23
|
"a9b677": "fly5x3f",
|
|
24
|
-
"Bqenvij": "
|
|
25
|
-
"
|
|
26
|
-
"
|
|
24
|
+
"Bqenvij": "f3052tw",
|
|
25
|
+
"B2u0y6b": "fvgz9i8",
|
|
26
|
+
"Bxyxcbc": "flnwrvu",
|
|
27
27
|
"B7ck84d": "f1ewtqcl",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
28
|
+
"wkccdc": "f874eam",
|
|
29
|
+
"Budl1dq": "fjj47a5",
|
|
30
|
+
"zoa1oz": "fe34spp",
|
|
31
|
+
"B68tc82": "f1ln0qer",
|
|
32
|
+
"Bmxbyg5": "fa2wlxz",
|
|
33
|
+
"i8kkvl": "f4px1ci",
|
|
34
|
+
"Belr9w4": "fn67r4l",
|
|
35
|
+
"B5xtmjs": "ff54dml",
|
|
36
|
+
"Bqu9lor": "f52bj20",
|
|
37
|
+
"B06wobe": "f1dangjo"
|
|
36
38
|
}
|
|
37
39
|
}, {
|
|
38
|
-
"d": [".fly5x3f{width:100%;}", ".
|
|
40
|
+
"d": [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".fe34spp{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"],
|
|
41
|
+
"m": [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
|
|
42
|
+
"m": "screen and (max-width: 480px)"
|
|
43
|
+
}], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
|
|
44
|
+
"m": "screen and (max-width: 480px)"
|
|
45
|
+
}], ["@media screen and (max-width: 480px){.f1dangjo{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-start actions-start\" \"actions-end actions-end actions-end\";}}", {
|
|
46
|
+
"m": "screen and (max-width: 480px)"
|
|
47
|
+
}]]
|
|
39
48
|
});
|
|
40
49
|
/**
|
|
41
50
|
* Apply styling to the DialogBody slots based on the state
|
|
@@ -44,9 +53,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
44
53
|
|
|
45
54
|
const useDialogBodyStyles_unstable = state => {
|
|
46
55
|
const styles = useStyles();
|
|
47
|
-
state.root.className = react_1.mergeClasses(exports.dialogBodyClassNames.root, styles.root, state.root.className);
|
|
48
|
-
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
49
|
-
|
|
56
|
+
state.root.className = react_1.mergeClasses(exports.dialogBodyClassNames.root, styles.root, state.root.className);
|
|
50
57
|
return state;
|
|
51
58
|
};
|
|
52
59
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAWa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE;AAD6D,CAAxD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAiCA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n CONTENT_GRID_AREA,\n DIALOG_GAP,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n SURFACE_PADDING,\n TITLE_ACTION_GRID_AREA,\n TITLE_GRID_AREA,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'grid',\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n },\n width: `100%`,\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr auto',\n gridTemplateColumns: '1fr 1fr auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n },\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -13,7 +13,8 @@ const renderDialogContent_1 = /*#__PURE__*/require("./renderDialogContent");
|
|
|
13
13
|
|
|
14
14
|
const useDialogContentStyles_1 = /*#__PURE__*/require("./useDialogContentStyles");
|
|
15
15
|
/**
|
|
16
|
-
* DialogContent
|
|
16
|
+
* The `DialogContent` is a container where the content of the dialog is rendered.
|
|
17
|
+
* Apart from styling, this component does not have other behavior.
|
|
17
18
|
*/
|
|
18
19
|
|
|
19
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;EAEA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;EACA,OAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n const state = useDialogContent_unstable(props, ref);\n\n useDialogContentStyles_unstable(state);\n return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"sourceRoot":"../src/"}
|
|
@@ -17,8 +17,7 @@ const renderDialogContent_unstable = state => {
|
|
|
17
17
|
const {
|
|
18
18
|
slots,
|
|
19
19
|
slotProps
|
|
20
|
-
} = react_utilities_1.getSlots(state);
|
|
21
|
-
|
|
20
|
+
} = react_utilities_1.getSlots(state);
|
|
22
21
|
return React.createElement(slots.root, { ...slotProps.root
|
|
23
22
|
});
|
|
24
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/renderDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/renderDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B;EAEA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState) => {\n const { slots, slotProps } = getSlots<DialogContentSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -6,28 +6,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useDialogContent_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
|
|
10
|
+
const contexts_1 = /*#__PURE__*/require("../../contexts");
|
|
9
11
|
/**
|
|
10
|
-
* Create the state required to render
|
|
12
|
+
* Create the state required to render DialogBody.
|
|
11
13
|
*
|
|
12
|
-
* The returned state can be modified with hooks such as
|
|
13
|
-
* before being passed to
|
|
14
|
+
* The returned state can be modified with hooks such as useDialogBodyStyles_unstable,
|
|
15
|
+
* before being passed to renderDialogBody_unstable.
|
|
14
16
|
*
|
|
15
|
-
* @param props - props from this instance of
|
|
16
|
-
* @param ref - reference to root HTMLElement of
|
|
17
|
+
* @param props - props from this instance of DialogBody
|
|
18
|
+
* @param ref - reference to root HTMLElement of DialogBody
|
|
17
19
|
*/
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
const useDialogContent_unstable = (props, ref) => {
|
|
23
|
+
var _a;
|
|
24
|
+
|
|
25
|
+
const dialogContentId = contexts_1.useDialogContext_unstable(ctx => ctx.dialogContentId);
|
|
21
26
|
return {
|
|
22
|
-
// TODO add appropriate props/defaults
|
|
23
27
|
components: {
|
|
24
|
-
// TODO add each slot's element type or component
|
|
25
28
|
root: 'div'
|
|
26
29
|
},
|
|
27
|
-
|
|
28
|
-
// mySlot: resolveShorthand(props.mySlot),
|
|
29
|
-
root: react_utilities_1.getNativeElementProps('div', {
|
|
30
|
+
root: react_utilities_1.getNativeElementProps((_a = props.as) !== null && _a !== void 0 ? _a : 'div', {
|
|
30
31
|
ref,
|
|
32
|
+
id: dialogContentId,
|
|
31
33
|
...props
|
|
32
34
|
})
|
|
33
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;EACtB,MAAM,eAAe,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,eAArC,CAAxB;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,EAAE,EAAE,eAFyC;MAG7C,GAAG;IAH0C,CAAzC;EAJD,CAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\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 const dialogContentId = useDialogContext_unstable(ctx => ctx.dialogContentId);\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps(props.as ?? 'div', {\n ref,\n id: dialogContentId,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|