@fluentui/react-dialog 9.18.1 → 9.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +39 -2
- package/dist/index.d.cts +547 -0
- package/lib/Dialog.js +1 -1
- package/lib/Dialog.js.map +1 -1
- package/lib/DialogActions.js +1 -1
- package/lib/DialogActions.js.map +1 -1
- package/lib/DialogBody.js +1 -1
- package/lib/DialogBody.js.map +1 -1
- package/lib/DialogContent.js +1 -1
- package/lib/DialogContent.js.map +1 -1
- package/lib/DialogSurface.js +1 -1
- package/lib/DialogSurface.js.map +1 -1
- package/lib/DialogTitle.js +1 -1
- package/lib/DialogTitle.js.map +1 -1
- package/lib/DialogTrigger.js +1 -1
- package/lib/DialogTrigger.js.map +1 -1
- package/lib/components/Dialog/Dialog.js +4 -4
- package/lib/components/Dialog/Dialog.js.map +1 -1
- package/lib/components/Dialog/index.js +4 -4
- package/lib/components/Dialog/index.js.map +1 -1
- package/lib/components/Dialog/renderDialog.js +4 -4
- package/lib/components/Dialog/renderDialog.js.map +1 -1
- package/lib/components/Dialog/useDialog.js +8 -8
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/components/Dialog/useDialogContextValues.js +1 -1
- package/lib/components/DialogActions/DialogActions.js +5 -5
- package/lib/components/DialogActions/DialogActions.js.map +1 -1
- package/lib/components/DialogActions/index.js +4 -4
- package/lib/components/DialogActions/index.js.map +1 -1
- package/lib/components/DialogActions/renderDialogActions.js +1 -1
- package/lib/components/DialogActions/useDialogActions.js +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js +2 -4
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js +2 -3
- package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogBackdropMotion.js +1 -1
- package/lib/components/DialogBody/DialogBody.js +5 -5
- package/lib/components/DialogBody/DialogBody.js.map +1 -1
- package/lib/components/DialogBody/index.js +4 -4
- package/lib/components/DialogBody/index.js.map +1 -1
- package/lib/components/DialogBody/renderDialogBody.js +1 -1
- package/lib/components/DialogBody/useDialogBody.js +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js +2 -4
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js +2 -3
- package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogContent/DialogContent.js +5 -5
- package/lib/components/DialogContent/DialogContent.js.map +1 -1
- package/lib/components/DialogContent/index.js +4 -4
- package/lib/components/DialogContent/index.js.map +1 -1
- package/lib/components/DialogContent/renderDialogContent.js +1 -1
- package/lib/components/DialogContent/useDialogContent.js +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.js +3 -5
- package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js +3 -4
- package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogSurface/DialogSurface.js +6 -6
- package/lib/components/DialogSurface/DialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/index.js +5 -5
- package/lib/components/DialogSurface/index.js.map +1 -1
- package/lib/components/DialogSurface/renderDialogSurface.js +4 -4
- package/lib/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +7 -7
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +4 -6
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js +4 -5
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogSurfaceMotion.js +2 -2
- package/lib/components/DialogTitle/DialogTitle.js +5 -5
- package/lib/components/DialogTitle/DialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/index.js +4 -4
- package/lib/components/DialogTitle/index.js.map +1 -1
- package/lib/components/DialogTitle/renderDialogTitle.js +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js +6 -6
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js +3 -5
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js +3 -4
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogTrigger/DialogTrigger.js +2 -2
- package/lib/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib/components/DialogTrigger/index.js +3 -3
- package/lib/components/DialogTrigger/index.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +4 -4
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib/contexts/dialogBackdropContext.js +1 -1
- package/lib/contexts/dialogContext.js +1 -1
- package/lib/contexts/dialogSurfaceContext.js +1 -1
- package/lib/contexts/index.js +4 -4
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js +9 -9
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js +2 -2
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.js +3 -3
- package/lib/utils/useDisableBodyScroll.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.styles.js +1 -1
- package/lib/utils/useDisableBodyScroll.styles.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.styles.raw.js +1 -1
- package/lib/utils/useFocusFirstElement.js +3 -3
- package/lib-commonjs/{Dialog.js → Dialog.cjs} +1 -1
- package/lib-commonjs/{Dialog.js.map → Dialog.cjs.map} +1 -1
- package/lib-commonjs/{DialogActions.js → DialogActions.cjs} +1 -1
- package/lib-commonjs/{DialogActions.js.map → DialogActions.cjs.map} +1 -1
- package/lib-commonjs/{DialogBody.js → DialogBody.cjs} +1 -1
- package/lib-commonjs/{DialogBody.js.map → DialogBody.cjs.map} +1 -1
- package/lib-commonjs/{DialogContent.js → DialogContent.cjs} +1 -1
- package/lib-commonjs/{DialogContent.js.map → DialogContent.cjs.map} +1 -1
- package/lib-commonjs/{DialogSurface.js → DialogSurface.cjs} +1 -1
- package/lib-commonjs/{DialogSurface.js.map → DialogSurface.cjs.map} +1 -1
- package/lib-commonjs/{DialogTitle.js → DialogTitle.cjs} +1 -1
- package/lib-commonjs/{DialogTitle.js.map → DialogTitle.cjs.map} +1 -1
- package/lib-commonjs/{DialogTrigger.js → DialogTrigger.cjs} +1 -1
- package/lib-commonjs/{DialogTrigger.js.map → DialogTrigger.cjs.map} +1 -1
- package/lib-commonjs/components/Dialog/{Dialog.js → Dialog.cjs} +3 -3
- package/lib-commonjs/components/Dialog/{Dialog.js.map → Dialog.cjs.map} +1 -1
- package/lib-commonjs/components/Dialog/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Dialog/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Dialog/{renderDialog.js → renderDialog.cjs} +3 -3
- package/lib-commonjs/components/Dialog/{renderDialog.js.map → renderDialog.cjs.map} +1 -1
- package/lib-commonjs/components/Dialog/{useDialog.js → useDialog.cjs} +5 -5
- package/lib-commonjs/components/Dialog/{useDialog.js.map → useDialog.cjs.map} +1 -1
- package/lib-commonjs/components/DialogActions/{DialogActions.js → DialogActions.cjs} +3 -3
- package/lib-commonjs/components/DialogActions/{DialogActions.js.map → DialogActions.cjs.map} +1 -1
- package/lib-commonjs/components/DialogActions/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/DialogActions/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/DialogActions/{useDialogActionsStyles.styles.js → useDialogActionsStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/DialogActions/{useDialogActionsStyles.styles.raw.js → useDialogActionsStyles.styles.raw.cjs} +1 -2
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/DialogBody/{DialogBody.js → DialogBody.cjs} +3 -3
- package/lib-commonjs/components/DialogBody/{DialogBody.js.map → DialogBody.cjs.map} +1 -1
- package/lib-commonjs/components/DialogBody/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/DialogBody/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/DialogBody/{useDialogBodyStyles.styles.js → useDialogBodyStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/DialogBody/{useDialogBodyStyles.styles.raw.js → useDialogBodyStyles.styles.raw.cjs} +6 -7
- package/lib-commonjs/components/DialogBody/{useDialogBodyStyles.styles.raw.js.map → useDialogBodyStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/DialogContent/{DialogContent.js → DialogContent.cjs} +3 -3
- package/lib-commonjs/components/DialogContent/{DialogContent.js.map → DialogContent.cjs.map} +1 -1
- package/lib-commonjs/components/DialogContent/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/DialogContent/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/DialogContent/{useDialogContentStyles.styles.js → useDialogContentStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/DialogContent/{useDialogContentStyles.styles.raw.js → useDialogContentStyles.styles.raw.cjs} +2 -3
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/DialogSurface/{DialogSurface.js → DialogSurface.cjs} +4 -4
- package/lib-commonjs/components/DialogSurface/{DialogSurface.js.map → DialogSurface.cjs.map} +1 -1
- package/lib-commonjs/components/DialogSurface/{index.js → index.cjs} +5 -5
- package/lib-commonjs/components/DialogSurface/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/DialogSurface/{renderDialogSurface.js → renderDialogSurface.cjs} +2 -2
- package/lib-commonjs/components/DialogSurface/{renderDialogSurface.js.map → renderDialogSurface.cjs.map} +1 -1
- package/lib-commonjs/components/DialogSurface/{useDialogSurface.js → useDialogSurface.cjs} +12 -12
- package/lib-commonjs/components/DialogSurface/{useDialogSurface.js.map → useDialogSurface.cjs.map} +1 -1
- package/lib-commonjs/components/DialogSurface/{useDialogSurfaceStyles.styles.js → useDialogSurfaceStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/DialogSurface/{useDialogSurfaceStyles.styles.raw.js → useDialogSurfaceStyles.styles.raw.cjs} +9 -10
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/DialogTitle/{DialogTitle.js → DialogTitle.cjs} +3 -3
- package/lib-commonjs/components/DialogTitle/{DialogTitle.js.map → DialogTitle.cjs.map} +1 -1
- package/lib-commonjs/components/DialogTitle/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/DialogTitle/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/DialogTitle/{useDialogTitle.js → useDialogTitle.cjs} +3 -3
- package/lib-commonjs/components/DialogTitle/{useDialogTitle.js.map → useDialogTitle.cjs.map} +1 -1
- package/lib-commonjs/components/DialogTitle/{useDialogTitleStyles.styles.js → useDialogTitleStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/DialogTitle/{useDialogTitleStyles.styles.raw.js → useDialogTitleStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/DialogTrigger/{DialogTrigger.js → DialogTrigger.cjs} +2 -2
- package/lib-commonjs/components/DialogTrigger/{DialogTrigger.js.map → DialogTrigger.cjs.map} +1 -1
- package/lib-commonjs/components/DialogTrigger/{index.js → index.cjs} +3 -3
- package/lib-commonjs/components/DialogTrigger/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/DialogTrigger/{useDialogTrigger.js → useDialogTrigger.cjs} +3 -3
- package/lib-commonjs/components/DialogTrigger/{useDialogTrigger.js.map → useDialogTrigger.cjs.map} +1 -1
- package/lib-commonjs/contexts/{index.js → index.cjs} +4 -4
- package/lib-commonjs/contexts/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +9 -9
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/utils/{index.js → index.cjs} +2 -2
- package/lib-commonjs/utils/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/utils/{useDisableBodyScroll.js → useDisableBodyScroll.cjs} +1 -1
- package/lib-commonjs/utils/{useDisableBodyScroll.js.map → useDisableBodyScroll.cjs.map} +1 -1
- package/lib-commonjs/utils/useDisableBodyScroll.styles.cjs.map +1 -0
- package/package.json +24 -18
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/utils/useDisableBodyScroll.styles.js.map +0 -1
- /package/lib-commonjs/components/Dialog/{Dialog.types.js → Dialog.types.cjs} +0 -0
- /package/lib-commonjs/components/Dialog/{Dialog.types.js.map → Dialog.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Dialog/{useDialogContextValues.js → useDialogContextValues.cjs} +0 -0
- /package/lib-commonjs/components/Dialog/{useDialogContextValues.js.map → useDialogContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogActions/{DialogActions.types.js → DialogActions.types.cjs} +0 -0
- /package/lib-commonjs/components/DialogActions/{DialogActions.types.js.map → DialogActions.types.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogActions/{renderDialogActions.js → renderDialogActions.cjs} +0 -0
- /package/lib-commonjs/components/DialogActions/{renderDialogActions.js.map → renderDialogActions.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogActions/{useDialogActions.js → useDialogActions.cjs} +0 -0
- /package/lib-commonjs/components/DialogActions/{useDialogActions.js.map → useDialogActions.cjs.map} +0 -0
- /package/lib-commonjs/components/{DialogBackdropMotion.js → DialogBackdropMotion.cjs} +0 -0
- /package/lib-commonjs/components/{DialogBackdropMotion.js.map → DialogBackdropMotion.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogBody/{DialogBody.types.js → DialogBody.types.cjs} +0 -0
- /package/lib-commonjs/components/DialogBody/{DialogBody.types.js.map → DialogBody.types.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogBody/{renderDialogBody.js → renderDialogBody.cjs} +0 -0
- /package/lib-commonjs/components/DialogBody/{renderDialogBody.js.map → renderDialogBody.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogBody/{useDialogBody.js → useDialogBody.cjs} +0 -0
- /package/lib-commonjs/components/DialogBody/{useDialogBody.js.map → useDialogBody.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogContent/{DialogContent.types.js → DialogContent.types.cjs} +0 -0
- /package/lib-commonjs/components/DialogContent/{DialogContent.types.js.map → DialogContent.types.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogContent/{renderDialogContent.js → renderDialogContent.cjs} +0 -0
- /package/lib-commonjs/components/DialogContent/{renderDialogContent.js.map → renderDialogContent.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogContent/{useDialogContent.js → useDialogContent.cjs} +0 -0
- /package/lib-commonjs/components/DialogContent/{useDialogContent.js.map → useDialogContent.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogSurface/{DialogSurface.types.js → DialogSurface.types.cjs} +0 -0
- /package/lib-commonjs/components/DialogSurface/{DialogSurface.types.js.map → DialogSurface.types.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogSurface/{useDialogSurfaceContextValues.js → useDialogSurfaceContextValues.cjs} +0 -0
- /package/lib-commonjs/components/DialogSurface/{useDialogSurfaceContextValues.js.map → useDialogSurfaceContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/{DialogSurfaceMotion.js → DialogSurfaceMotion.cjs} +0 -0
- /package/lib-commonjs/components/{DialogSurfaceMotion.js.map → DialogSurfaceMotion.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogTitle/{DialogTitle.types.js → DialogTitle.types.cjs} +0 -0
- /package/lib-commonjs/components/DialogTitle/{DialogTitle.types.js.map → DialogTitle.types.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogTitle/{renderDialogTitle.js → renderDialogTitle.cjs} +0 -0
- /package/lib-commonjs/components/DialogTitle/{renderDialogTitle.js.map → renderDialogTitle.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogTrigger/{DialogTrigger.types.js → DialogTrigger.types.cjs} +0 -0
- /package/lib-commonjs/components/DialogTrigger/{DialogTrigger.types.js.map → DialogTrigger.types.cjs.map} +0 -0
- /package/lib-commonjs/components/DialogTrigger/{renderDialogTrigger.js → renderDialogTrigger.cjs} +0 -0
- /package/lib-commonjs/components/DialogTrigger/{renderDialogTrigger.js.map → renderDialogTrigger.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{constants.js → constants.cjs} +0 -0
- /package/lib-commonjs/contexts/{constants.js.map → constants.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{dialogBackdropContext.js → dialogBackdropContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{dialogBackdropContext.js.map → dialogBackdropContext.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{dialogContext.js → dialogContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{dialogContext.js.map → dialogContext.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{dialogSurfaceContext.js → dialogSurfaceContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{dialogSurfaceContext.js.map → dialogSurfaceContext.cjs.map} +0 -0
- /package/lib-commonjs/utils/{useDisableBodyScroll.styles.js → useDisableBodyScroll.styles.cjs} +0 -0
- /package/lib-commonjs/utils/{useDisableBodyScroll.styles.raw.js → useDisableBodyScroll.styles.raw.cjs} +0 -0
- /package/lib-commonjs/utils/{useDisableBodyScroll.styles.raw.js.map → useDisableBodyScroll.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/utils/{useFocusFirstElement.js → useFocusFirstElement.cjs} +0 -0
- /package/lib-commonjs/utils/{useFocusFirstElement.js.map → useFocusFirstElement.cjs.map} +0 -0
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
|
-
const
|
|
21
|
+
const _index = require("../../contexts/index.cjs");
|
|
22
22
|
const dialogBodyClassNames = {
|
|
23
23
|
root: 'fui-DialogBody'
|
|
24
24
|
};
|
|
@@ -26,25 +26,24 @@ const dialogBodyClassNames = {
|
|
|
26
26
|
* Styles for the root slot
|
|
27
27
|
*/ const useResetStyles = (0, _react.makeResetStyles)({
|
|
28
28
|
overflow: 'unset',
|
|
29
|
-
gap:
|
|
29
|
+
gap: _index.DIALOG_GAP,
|
|
30
30
|
display: 'grid',
|
|
31
31
|
maxHeight: [
|
|
32
|
-
`calc(100vh - 2 * ${
|
|
33
|
-
`calc(100dvh - 2 * ${
|
|
32
|
+
`calc(100vh - 2 * ${_index.SURFACE_PADDING})`,
|
|
33
|
+
`calc(100dvh - 2 * ${_index.SURFACE_PADDING})`
|
|
34
34
|
],
|
|
35
35
|
boxSizing: 'border-box',
|
|
36
36
|
gridTemplateRows: 'auto 1fr',
|
|
37
37
|
gridTemplateColumns: '1fr 1fr auto',
|
|
38
|
-
[
|
|
38
|
+
[_index.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
39
39
|
maxWidth: '100vw',
|
|
40
40
|
gridTemplateRows: 'auto 1fr auto'
|
|
41
41
|
},
|
|
42
|
-
[
|
|
42
|
+
[_index.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
|
|
43
43
|
maxHeight: 'unset'
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
const useDialogBodyStyles_unstable = (state)=>{
|
|
47
|
-
'use no memo';
|
|
48
47
|
const resetStyles = useResetStyles();
|
|
49
48
|
// eslint-disable-next-line react-hooks/immutability
|
|
50
49
|
state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 * ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 * ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\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 resetStyles = useResetStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAYaM,oBAAAA;;;gCA6BAW;;;;uBAvCiC,iBAAiB;uBAQxD,0BAAiB;AAEjB,6BAA8D;IACnEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBR,sBAAAA,EAAgB;IACrCS,UAAU;IACVC,KAAKR,iBAAAA;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,sBAAAA,CAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,sBAAAA,CAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,6CAAAA,CAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,sCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMK,+BAA+B,CAACC;IAC3C,MAAMC,cAAcX;IAEpB,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,OAAGnB,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "DialogContent", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useDialogContent = require("./useDialogContent");
|
|
15
|
-
const _renderDialogContent = require("./renderDialogContent");
|
|
16
|
-
const _useDialogContentStylesstyles = require("./useDialogContentStyles.styles");
|
|
14
|
+
const _useDialogContent = require("./useDialogContent.cjs");
|
|
15
|
+
const _renderDialogContent = require("./renderDialogContent.cjs");
|
|
16
|
+
const _useDialogContentStylesstyles = require("./useDialogContentStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const DialogContent = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useDialogContent.useDialogContent_unstable)(props, ref);
|
package/lib-commonjs/components/DialogContent/{DialogContent.js.map → DialogContent.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n\n return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","DialogContent","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n\n return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","DialogContent","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,wBAAqB;qCAClB,2BAAwB;8CACrB,qCAAkC;qCAGtC,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
|
|
@@ -25,7 +25,7 @@ _export(exports, {
|
|
|
25
25
|
return _useDialogContent.useDialogContent_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _DialogContent = require("./DialogContent");
|
|
29
|
-
const _renderDialogContent = require("./renderDialogContent");
|
|
30
|
-
const _useDialogContent = require("./useDialogContent");
|
|
31
|
-
const _useDialogContentStylesstyles = require("./useDialogContentStyles.styles");
|
|
28
|
+
const _DialogContent = require("./DialogContent.cjs");
|
|
29
|
+
const _renderDialogContent = require("./renderDialogContent.cjs");
|
|
30
|
+
const _useDialogContent = require("./useDialogContent.cjs");
|
|
31
|
+
const _useDialogContentStylesstyles = require("./useDialogContentStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogContent/index.ts"],"sourcesContent":["export { DialogContent } from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent.types';\nexport { renderDialogContent_unstable } from './renderDialogContent';\nexport { useDialogContent_unstable } from './useDialogContent';\nexport { dialogContentClassNames, useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\n"],"names":["DialogContent","renderDialogContent_unstable","useDialogContent_unstable","dialogContentClassNames","useDialogContentStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAIbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAEHG,6DAA+B;;;eADxDF,2CAAyB;;;+BAHJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogContent/index.ts"],"sourcesContent":["export { DialogContent } from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent.types';\nexport { renderDialogContent_unstable } from './renderDialogContent';\nexport { useDialogContent_unstable } from './useDialogContent';\nexport { dialogContentClassNames, useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\n"],"names":["DialogContent","renderDialogContent_unstable","useDialogContent_unstable","dialogContentClassNames","useDialogContentStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAIbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAEHG,6DAA+B;;;eADxDF,2CAAyB;;;+BAHJ,qBAAkB;qCAEH,2BAAwB;kCAC3B,wBAAqB;8CACU,qCAAkC"}
|
|
@@ -32,7 +32,6 @@ const dialogContentClassNames = {
|
|
|
32
32
|
]
|
|
33
33
|
});
|
|
34
34
|
const useDialogContentStyles_unstable = (state)=>{
|
|
35
|
-
'use no memo';
|
|
36
35
|
const styles = useStyles();
|
|
37
36
|
// eslint-disable-next-line react-hooks/immutability
|
|
38
37
|
state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from \"../../contexts/index.js\";\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/**\n * Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,uBAAuB;;;mCAsBY;eAA/BK;;;uBAzB6B,gBAAgB;AAGvD,gCAAgC;IACnCJ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -19,7 +19,7 @@ _export(exports, {
|
|
|
19
19
|
});
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
21
|
const _reacttheme = require("@fluentui/react-theme");
|
|
22
|
-
const
|
|
22
|
+
const _index = require("../../contexts/index.cjs");
|
|
23
23
|
const dialogContentClassNames = {
|
|
24
24
|
root: 'fui-DialogContent'
|
|
25
25
|
};
|
|
@@ -36,12 +36,11 @@ const dialogContentClassNames = {
|
|
|
36
36
|
gridRowEnd: 2,
|
|
37
37
|
gridColumnStart: 1,
|
|
38
38
|
gridColumnEnd: 4,
|
|
39
|
-
[
|
|
39
|
+
[_index.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
|
|
40
40
|
overflowY: 'unset'
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
43
|
const useDialogContentStyles_unstable = (state)=>{
|
|
44
|
-
'use no memo';
|
|
45
44
|
const styles = useStyles();
|
|
46
45
|
// eslint-disable-next-line react-hooks/immutability
|
|
47
46
|
state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,uBAAAA;;;mCA2BAc;;;;uBAjCiC,iBAAiB;4BAGtB,wBAAwB;uBACjB,0BAAiB;AAE1D,gCAAoE;IACzEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,SAASN,kBAAAA,CAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,4BAAAA,CAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,sCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMO,kCAAkC,CAACC;IAC9C,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}
|
|
@@ -11,10 +11,10 @@ Object.defineProperty(exports, "DialogSurface", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useDialogSurface = require("./useDialogSurface");
|
|
15
|
-
const _renderDialogSurface = require("./renderDialogSurface");
|
|
16
|
-
const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles");
|
|
17
|
-
const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues");
|
|
14
|
+
const _useDialogSurface = require("./useDialogSurface.cjs");
|
|
15
|
+
const _renderDialogSurface = require("./renderDialogSurface.cjs");
|
|
16
|
+
const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles.cjs");
|
|
17
|
+
const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues.cjs");
|
|
18
18
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
19
19
|
const DialogSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
20
20
|
const state = (0, _useDialogSurface.useDialogSurface_unstable)(props, ref);
|
package/lib-commonjs/components/DialogSurface/{DialogSurface.js.map → DialogSurface.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n const state = useDialogSurface_unstable(props, ref);\n const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n useDialogSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n const state = useDialogSurface_unstable(props, ref);\n const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n useDialogSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,wBAAqB;qCAClB,2BAAwB;8CACrB,qCAAkC;+CAG3B,qCAAkC;qCAC7C,kCAAkC;AAMvE,MAAMM,gBAAAA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DP,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,iDAAAA,EAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
|
|
@@ -28,8 +28,8 @@ _export(exports, {
|
|
|
28
28
|
return _useDialogSurface.useDialogSurface_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
const _DialogSurface = require("./DialogSurface");
|
|
32
|
-
const _renderDialogSurface = require("./renderDialogSurface");
|
|
33
|
-
const _useDialogSurface = require("./useDialogSurface");
|
|
34
|
-
const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles");
|
|
35
|
-
const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues");
|
|
31
|
+
const _DialogSurface = require("./DialogSurface.cjs");
|
|
32
|
+
const _renderDialogSurface = require("./renderDialogSurface.cjs");
|
|
33
|
+
const _useDialogSurface = require("./useDialogSurface.cjs");
|
|
34
|
+
const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles.cjs");
|
|
35
|
+
const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n DialogBackdropSlotProps,\n DialogSurfaceContextValues,\n DialogSurfaceElement,\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAWbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAG5BI,qEAAsC;;;eADbD,6DAA+B;;;eADxDF,2CAAyB;;;+BAVJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n DialogBackdropSlotProps,\n DialogSurfaceContextValues,\n DialogSurfaceElement,\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAWbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAG5BI,qEAAsC;;;eADbD,6DAA+B;;;eADxDF,2CAAyB;;;+BAVJ,qBAAkB;qCASH,2BAAwB;kCAC3B,wBAAqB;8CACU,qCAAkC;+CACpD,qCAAkC"}
|
package/lib-commonjs/components/DialogSurface/{renderDialogSurface.js → renderDialogSurface.cjs}
RENAMED
|
@@ -12,7 +12,7 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
|
12
12
|
const _reactmotion = require("@fluentui/react-motion");
|
|
13
13
|
const _reactportal = require("@fluentui/react-portal");
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const
|
|
15
|
+
const _index = require("../../contexts/index.cjs");
|
|
16
16
|
const renderDialogSurface_unstable = (state, contextValues)=>{
|
|
17
17
|
(0, _reactutilities.assertSlots)(state);
|
|
18
18
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactportal.Portal, {
|
|
@@ -24,7 +24,7 @@ const renderDialogSurface_unstable = (state, contextValues)=>{
|
|
|
24
24
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.backdrop, {})
|
|
25
25
|
}),
|
|
26
26
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarderReset, {
|
|
27
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
27
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.DialogSurfaceProvider, {
|
|
28
28
|
value: contextValues.dialogSurface,
|
|
29
29
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
30
30
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MotionRefForwarderReset } from '@fluentui/react-motion';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n state: DialogSurfaceState,\n contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n assertSlots<DialogSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n {state.backdrop &&\n // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n // FIXME: this should be resolved by properly splitting props and state slots declaration\n state.backdropMotion && (\n <state.backdropMotion>\n <state.backdrop />\n </state.backdropMotion>\n )}\n <MotionRefForwarderReset>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n <state.root />\n </DialogSurfaceProvider>\n </MotionRefForwarderReset>\n </Portal>\n );\n};\n"],"names":["MotionRefForwarderReset","Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":";;;;+BAcaI;;;;;;4BAbb,iCAAiD;6BAET,yBAAyB;6BAC1C,yBAAyB;gCACpB,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MotionRefForwarderReset } from '@fluentui/react-motion';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n state: DialogSurfaceState,\n contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n assertSlots<DialogSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n {state.backdrop &&\n // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n // FIXME: this should be resolved by properly splitting props and state slots declaration\n state.backdropMotion && (\n <state.backdropMotion>\n <state.backdrop />\n </state.backdropMotion>\n )}\n <MotionRefForwarderReset>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n <state.root />\n </DialogSurfaceProvider>\n </MotionRefForwarderReset>\n </Portal>\n );\n};\n"],"names":["MotionRefForwarderReset","Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":";;;;+BAcaI;;;;;;4BAbb,iCAAiD;6BAET,yBAAyB;6BAC1C,yBAAyB;gCACpB,4BAA4B;uBAGlB,0BAAiB;AAMhD,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAgCG;IAEhC,OAAA,WAAA,OACE,gBAAA,EAACJ,mBAAAA,EAAAA;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,IAAA,WAAA,OAClB,eAAA,EAACJ,MAAMI,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACJ,MAAMG,QAAQ,EAAA,CAAA;;8BAGrB,eAAA,EAACR,oCAAAA,EAAAA;0BACC,WAAA,OAAA,eAAA,EAACG,4BAAAA,EAAAA;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,WAAA,OAAA,eAAA,EAACN,MAAMO,IAAI,EAAA,CAAA;;;;;AAKrB,EAAE"}
|
|
@@ -12,21 +12,21 @@ Object.defineProperty(exports, "useDialogSurface_unstable", {
|
|
|
12
12
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
13
13
|
const _reactmotion = require("@fluentui/react-motion");
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const
|
|
16
|
-
const _useDisableBodyScroll = require("../../utils/useDisableBodyScroll");
|
|
17
|
-
const _DialogBackdropMotion = require("../DialogBackdropMotion");
|
|
15
|
+
const _index = require("../../contexts/index.cjs");
|
|
16
|
+
const _useDisableBodyScroll = require("../../utils/useDisableBodyScroll.cjs");
|
|
17
|
+
const _DialogBackdropMotion = require("../DialogBackdropMotion.cjs");
|
|
18
18
|
const useDialogSurface_unstable = (props, ref)=>{
|
|
19
19
|
const contextRef = (0, _reactmotion.useMotionForwardedRef)();
|
|
20
|
-
const modalType = (0,
|
|
21
|
-
const isNestedDialog = (0,
|
|
22
|
-
const backdropOverride = (0,
|
|
20
|
+
const modalType = (0, _index.useDialogContext_unstable)((ctx)=>ctx.modalType);
|
|
21
|
+
const isNestedDialog = (0, _index.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
|
|
22
|
+
const backdropOverride = (0, _index.useDialogBackdropContext_unstable)();
|
|
23
23
|
const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
|
|
24
|
-
const modalAttributes = (0,
|
|
25
|
-
const dialogRef = (0,
|
|
26
|
-
const requestOpenChange = (0,
|
|
27
|
-
const dialogTitleID = (0,
|
|
28
|
-
const open = (0,
|
|
29
|
-
const unmountOnClose = (0,
|
|
24
|
+
const modalAttributes = (0, _index.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
|
|
25
|
+
const dialogRef = (0, _index.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
|
|
26
|
+
const requestOpenChange = (0, _index.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
|
|
27
|
+
const dialogTitleID = (0, _index.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
|
|
28
|
+
const open = (0, _index.useDialogContext_unstable)((ctx)=>ctx.open);
|
|
29
|
+
const unmountOnClose = (0, _index.useDialogContext_unstable)((ctx)=>ctx.unmountOnClose);
|
|
30
30
|
const handledBackdropClick = (0, _reactutilities.useEventCallback)((event)=>{
|
|
31
31
|
if ((0, _reactutilities.isResolvedShorthand)(props.backdrop)) {
|
|
32
32
|
var _props_backdrop_onClick, _props_backdrop;
|
package/lib-commonjs/components/DialogSurface/{useDialogSurface.js.map → useDialogSurface.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\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 contextRef = useMotionForwardedRef();\n\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n const backdropOverride = useDialogBackdropContext_unstable();\n const treatBackdropAsNested = backdropOverride ?? isNestedDialog;\n\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n const open = useDialogContext_unstable(ctx => ctx.open);\n const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\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.preventDefault();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n\n const backdropAppearance = backdrop?.appearance;\n\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n // remove backdrop.appearance so it is not passed to the DOM\n delete backdrop.appearance;\n }\n\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n enableBodyScroll();\n return;\n }\n\n if (isNestedDialog || modalType === 'non-modal') {\n return;\n }\n\n disableBodyScroll();\n\n return () => enableBodyScroll();\n }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n return {\n components: {\n backdrop: 'div',\n root: 'div',\n backdropMotion: DialogBackdropMotion,\n },\n open,\n backdrop,\n isNestedDialog,\n treatBackdropAsNested,\n backdropAppearance,\n unmountOnClose,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-modal': modalType !== 'non-modal',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n backdropMotion: presenceMotionSlot(props.backdropMotion, {\n elementType: DialogBackdropMotion,\n defaultProps: {\n appear: unmountOnClose,\n visible: open,\n },\n }),\n\n // Deprecated properties\n transitionStatus: undefined,\n };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","useDialogContext_unstable","useDialogBackdropContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","backdropOverride","treatBackdropAsNested","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","backdropAppearance","appearance","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"AAAA;;;;;+BA6Baa;;;;;;8BA3BU,0BAA0B;6BACd,yBAAyB;gCAQrD,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\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 contextRef = useMotionForwardedRef();\n\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n const backdropOverride = useDialogBackdropContext_unstable();\n const treatBackdropAsNested = backdropOverride ?? isNestedDialog;\n\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n const open = useDialogContext_unstable(ctx => ctx.open);\n const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\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.preventDefault();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n\n const backdropAppearance = backdrop?.appearance;\n\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n // remove backdrop.appearance so it is not passed to the DOM\n delete backdrop.appearance;\n }\n\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n enableBodyScroll();\n return;\n }\n\n if (isNestedDialog || modalType === 'non-modal') {\n return;\n }\n\n disableBodyScroll();\n\n return () => enableBodyScroll();\n }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n return {\n components: {\n backdrop: 'div',\n root: 'div',\n backdropMotion: DialogBackdropMotion,\n },\n open,\n backdrop,\n isNestedDialog,\n treatBackdropAsNested,\n backdropAppearance,\n unmountOnClose,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-modal': modalType !== 'non-modal',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n backdropMotion: presenceMotionSlot(props.backdropMotion, {\n elementType: DialogBackdropMotion,\n defaultProps: {\n appear: unmountOnClose,\n visible: open,\n },\n }),\n\n // Deprecated properties\n transitionStatus: undefined,\n };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","useDialogContext_unstable","useDialogBackdropContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","backdropOverride","treatBackdropAsNested","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","backdropAppearance","appearance","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"AAAA;;;;;+BA6Baa;;;;;;8BA3BU,0BAA0B;6BACd,yBAAyB;gCAQrD,4BAA4B;uBAG0C,0BAAiB;sCACzD,sCAAmC;sCACnC,6BAA0B;AAaxD,kCAAkC,CACvCC,OACAC;IAEA,MAAMC,iBAAaJ,kCAAAA;IAEnB,MAAMK,gBAAYT,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,qBAAiBX,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,uBAAmBX,wCAAAA;IACzB,MAAMY,wBAAwBD,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoBD;IAElD,MAAMG,sBAAkBd,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAII,eAAe;IAC5E,MAAMC,gBAAYf,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAIK,SAAS;IAChE,MAAMC,wBAAoBhB,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAIM,iBAAiB;IAChF,MAAMC,oBAAgBjB,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAIQ,aAAa;IACxE,MAAMC,WAAOnB,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAIS,IAAI;IACtD,MAAMC,qBAAiBpB,gCAAAA,EAA0BU,CAAAA,MAAOA,IAAIU,cAAc;IAE1E,MAAMC,2BAAuB3B,gCAAAA,EAAiB,CAAC4B;QAC7C,QAAI1B,mCAAAA,EAAoBU,MAAMiB,QAAQ,GAAG;gBACvCjB,yBAAAA;YAAAA,2BAAAA,CAAAA,kBAAAA,MAAMiB,QAAQ,AAARA,EAASC,OAAAA,AAAO,MAAA,QAAtBlB,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAAA,IAAAA,CAAAA,iBAAyBgB;QAC3B;QACA,IAAIb,cAAc,WAAW,CAACa,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,oBAAgBjC,gCAAAA,EAAiB,CAAC4B;YACtChB;QAAAA,oBAAAA,MAAMsB,SAAAA,AAAS,MAAA,QAAftB,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,OAAkBgB;QAElB,IAAIA,MAAMO,GAAG,KAAKrC,oBAAAA,IAAU,CAAC8B,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAW1B,oBAAAA,CAAKkC,QAAQ,CAACzB,MAAMiB,QAAQ,EAAE;QAC7CS,iBAAiBvB,cAAc;QAC/BwB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,MAAMC,qBAAqBZ,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUa,UAAU;IAE/C,IAAIb,UAAU;QACZA,SAASC,OAAO,GAAGH;QACnB,4DAA4D;QAC5D,OAAOE,SAASa,UAAU;IAC5B;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,OAAGpC,0CAAAA;QAEhDH,yCAAAA,EAA0B;QACxB,IAAI,CAACoB,MAAM;YACTmB;YACA;QACF;QAEA,IAAI3B,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEA4B;QAEA,OAAO,IAAMC;IACf,GAAG;QAACnB;QAAMV;QAAWE;QAAgB0B;QAAmBC;KAAiB;IAEzE,OAAO;QACLC,YAAY;YACVhB,UAAU;YACViB,MAAM;YACNC,gBAAgBtC,0CAAAA;QAClB;QACAgB;QACAI;QACAZ;QACAE;QACAsB;QACAf;QACAsB,WAAWpC,MAAMoC,SAAS;QAC1BF,MAAM3C,oBAAAA,CAAK8C,MAAM,KACf7C,wCAAAA,EAAyB,OAAO;YAC9B8C,UAAU,CAAC;YACXC,MAAMpC,cAAc,UAAU,gBAAgB;YAC9C,cAAcA,cAAc;YAC5B,mBAAmBH,KAAK,CAAC,aAAa,GAAGwC,YAAY7B;YACrD,eAAe,CAACG,kBAAkB,CAACD,OAAO,OAAO2B;YACjD,GAAGxC,KAAK;YACR,GAAGQ,eAAe;YAClBc,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FpB,SAAKZ,6BAAAA,EAAcY,KAAKC,YAAYO;QACtC,IACA;YAAEmB,aAAa;QAAM;QAEvBO,gBAAgBhD,mCAAAA,EAAmBa,MAAMmC,cAAc,EAAE;YACvDP,aAAa/B,0CAAAA;YACb8B,cAAc;gBACZc,QAAQ3B;gBACR4B,SAAS7B;YACX;QACF;QAEA,wBAAwB;QACxB8B,kBAAkBH;IACpB;AACF,EAAE"}
|
|
@@ -63,7 +63,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
63
63
|
]
|
|
64
64
|
});
|
|
65
65
|
const useDialogSurfaceStyles_unstable = (state)=>{
|
|
66
|
-
'use no memo';
|
|
67
66
|
const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
|
|
68
67
|
const rootBaseStyle = useRootBaseStyle();
|
|
69
68
|
const backdropBaseStyle = useBackdropBaseStyle();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from \"../../contexts/index.js\";\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: [\n '100vh',\n '100dvh'\n ],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed'\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n dialogHidden: {\n pointerEvents: 'none'\n }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n const mountedAndClosed = !unmountOnClose && !open;\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCU,uBAAuB;;;mCA2DY;eAA/Ba;;;uBA/DyC,gBAAgB;AAInE,gCAAgC;IACnCZ,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMiB,SAAS,GAAA,WAAA,OAAGhB,eAAA,EAAA;IAAAiB,oBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,MAAM,EAAEb,IAAI,EAAEC,QAAQ,EAAEa,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAAA,EAAoB,GAAGJ,KAAK;IACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;IACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;IAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;IAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;IACjD,oDAAA;IACAd,IAAI,CAACuB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;IACnI,IAAItB,QAAQ,EAAE;QACV,oDAAA;QACAA,QAAQ,CAACsB,SAAS,GAAGhC,uBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;IAC7M;IACA,OAAOV,KAAK;AAChB,CAAC"}
|
|
@@ -20,7 +20,7 @@ _export(exports, {
|
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
21
|
const _reacttheme = require("@fluentui/react-theme");
|
|
22
22
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
23
|
-
const
|
|
23
|
+
const _index = require("../../contexts/index.cjs");
|
|
24
24
|
const dialogSurfaceClassNames = {
|
|
25
25
|
root: 'fui-DialogSurface',
|
|
26
26
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
@@ -30,11 +30,11 @@ const dialogSurfaceClassNames = {
|
|
|
30
30
|
*/ const useRootBaseStyle = (0, _react.makeResetStyles)({
|
|
31
31
|
...(0, _reacttabster.createFocusOutlineStyle)(),
|
|
32
32
|
inset: 0,
|
|
33
|
-
padding:
|
|
33
|
+
padding: _index.SURFACE_PADDING,
|
|
34
34
|
margin: 'auto',
|
|
35
35
|
borderStyle: 'none',
|
|
36
36
|
overflow: 'unset',
|
|
37
|
-
border: `${
|
|
37
|
+
border: `${_index.SURFACE_BORDER_WIDTH} solid ${_reacttheme.tokens.colorTransparentStroke}`,
|
|
38
38
|
borderRadius: _reacttheme.tokens.borderRadiusXLarge,
|
|
39
39
|
display: 'block',
|
|
40
40
|
userSelect: 'unset',
|
|
@@ -52,17 +52,17 @@ const dialogSurfaceClassNames = {
|
|
|
52
52
|
// Same styles as DialogSurfaceMotion last keyframe,
|
|
53
53
|
// to ensure dialog will be properly styled when surfaceMotion is opted-out
|
|
54
54
|
boxShadow: _reacttheme.tokens.shadow64,
|
|
55
|
-
[
|
|
55
|
+
[_index.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
56
56
|
maxWidth: '100vw'
|
|
57
57
|
},
|
|
58
|
-
[
|
|
58
|
+
[_index.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
|
|
59
59
|
overflowY: 'auto',
|
|
60
60
|
// We need to offset the scrollbar by adding transparent borders otherwise
|
|
61
61
|
// it conflicts with the border radius.
|
|
62
|
-
paddingRight: `calc(${
|
|
63
|
-
borderRightWidth:
|
|
64
|
-
borderTopWidth:
|
|
65
|
-
borderBottomWidth:
|
|
62
|
+
paddingRight: `calc(${_index.SURFACE_PADDING} - ${_index.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
|
|
63
|
+
borderRightWidth: _index.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
|
|
64
|
+
borderTopWidth: _index.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
|
|
65
|
+
borderBottomWidth: _index.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
68
|
const useBackdropBaseStyle = (0, _react.makeResetStyles)({
|
|
@@ -79,7 +79,6 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
79
79
|
}
|
|
80
80
|
});
|
|
81
81
|
const useDialogSurfaceStyles_unstable = (state)=>{
|
|
82
|
-
'use no memo';
|
|
83
82
|
const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
|
|
84
83
|
const rootBaseStyle = useRootBaseStyle();
|
|
85
84
|
const backdropBaseStyle = useBackdropBaseStyle();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: ['100vh', '100dvh'],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n dialogHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n rootBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n root.className,\n );\n\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n backdropBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n isBackdropTransparent && styles.nestedDialogBackdrop,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaU,uBAAAA;;;mCAkEAuC;eAAAA;;;uBA/E6C,iBAAiB;4BACpD,wBAAwB;8BACP,0BAA0B;uBAO3D,0BAAiB;AAIjB,gCAA4F;IACjGtC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAmBb,sBAAAA,EAAgB;IACvC,OAAGI,qCAAAA,GAAyB;IAC5BU,OAAO;IACPC,SAASN,sBAAAA;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,2BAAAA,CAAqB,OAAO,EAAEL,kBAAAA,CAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,kBAAAA,CAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,kBAAAA,CAAO6B,uBAAuB;IAC/CC,OAAO9B,kBAAAA,CAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,kBAAAA,CAAOiC,QAAQ;IAE1B,CAAC9B,6CAAAA,CAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,sCAAAA,CAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,sBAAAA,CAAgB,GAAG,EAAEJ,gDAAAA,CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC,gDAAAA;QAClBmC,gBAAgBnC,gDAAAA;QAChBoC,mBAAmBpC,gDAAAA;IACrB;AACF;AAEA,MAAMqC,2BAAuB1C,sBAAAA,EAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,kBAAAA,CAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,gBAAY3C,iBAAAA,EAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,kBAAAA,CAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,wCAAwC,CAACE;IAC9C,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;IAE7C,oDAAoD;IACpDxC,KAAKiD,SAAS,OAAG1D,mBAAAA,EACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;QACZ,oDAAoD;QACpDA,SAASgD,SAAS,OAAG1D,mBAAAA,EACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "DialogTitle", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useDialogTitle = require("./useDialogTitle");
|
|
15
|
-
const _renderDialogTitle = require("./renderDialogTitle");
|
|
16
|
-
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles");
|
|
14
|
+
const _useDialogTitle = require("./useDialogTitle.cjs");
|
|
15
|
+
const _renderDialogTitle = require("./renderDialogTitle.cjs");
|
|
16
|
+
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const DialogTitle = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useDialogTitle.useDialogTitle_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n const state = useDialogTitle_unstable(props, ref);\n\n useDialogTitleStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);\n\n return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n const state = useDialogTitle_unstable(props, ref);\n\n useDialogTitleStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);\n\n return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
|
|
@@ -28,7 +28,7 @@ _export(exports, {
|
|
|
28
28
|
return _useDialogTitle.useDialogTitle_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
const _DialogTitle = require("./DialogTitle");
|
|
32
|
-
const _renderDialogTitle = require("./renderDialogTitle");
|
|
33
|
-
const _useDialogTitle = require("./useDialogTitle");
|
|
34
|
-
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles");
|
|
31
|
+
const _DialogTitle = require("./DialogTitle.cjs");
|
|
32
|
+
const _renderDialogTitle = require("./renderDialogTitle.cjs");
|
|
33
|
+
const _useDialogTitle = require("./useDialogTitle.cjs");
|
|
34
|
+
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTitle/index.ts"],"sourcesContent":["export { DialogTitle } from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nexport { renderDialogTitle_unstable } from './renderDialogTitle';\nexport { useDialogTitle_unstable } from './useDialogTitle';\nexport {\n dialogTitleClassNames,\n useDialogTitleInternalStyles,\n useDialogTitleStyles_unstable,\n} from './useDialogTitleStyles.styles';\n"],"names":["DialogTitle","renderDialogTitle_unstable","useDialogTitle_unstable","dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,iDAAqB;;;eAHdF,6CAA0B;;;eAIjCG,wDAA4B;;;eAC5BC,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTitle/index.ts"],"sourcesContent":["export { DialogTitle } from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nexport { renderDialogTitle_unstable } from './renderDialogTitle';\nexport { useDialogTitle_unstable } from './useDialogTitle';\nexport {\n dialogTitleClassNames,\n useDialogTitleInternalStyles,\n useDialogTitleStyles_unstable,\n} from './useDialogTitleStyles.styles';\n"],"names":["DialogTitle","renderDialogTitle_unstable","useDialogTitle_unstable","dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,iDAAqB;;;eAHdF,6CAA0B;;;eAIjCG,wDAA4B;;;eAC5BC,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,mBAAgB;mCAED,yBAAsB;gCACzB,sBAAmB;4CAKpD,mCAAgC"}
|
|
@@ -12,10 +12,10 @@ Object.defineProperty(exports, "useDialogTitle_unstable", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _dialogContext = require("../../contexts/dialogContext");
|
|
15
|
+
const _dialogContext = require("../../contexts/dialogContext.cjs");
|
|
16
16
|
const _reacticons = require("@fluentui/react-icons");
|
|
17
|
-
const _DialogTrigger = require("../DialogTrigger/DialogTrigger");
|
|
18
|
-
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles");
|
|
17
|
+
const _DialogTrigger = require("../DialogTrigger/DialogTrigger.cjs");
|
|
18
|
+
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles.cjs");
|
|
19
19
|
const useDialogTitle_unstable = (props, ref)=>{
|
|
20
20
|
const { action } = props;
|
|
21
21
|
const modalType = (0, _dialogContext.useDialogContext_unstable)((ctx)=>ctx.modalType);
|
package/lib-commonjs/components/DialogTitle/{useDialogTitle.js.map → useDialogTitle.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n const { action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'h2',\n action: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n { elementType: 'h2' },\n ),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss20Regular />\n </button>\n </DialogTrigger>\n ),\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;gCACgB,4BAA4B;+BAEjC
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n const { action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'h2',\n action: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n { elementType: 'h2' },\n ),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss20Regular />\n </button>\n </DialogTrigger>\n ),\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;gCACgB,4BAA4B;+BAEjC,kCAA+B;4BACxC,wBAAwB;+BAC3B,oCAAiC;4CAClB,mCAAgC;AAWtE,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,gBAAYR,wCAAAA,EAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,qBAAiBP,wDAAAA;IAEvB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,MAAM;YAC7BQ;YACAQ,QAAId,wCAAAA,EAA0BS,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGV,KAAK;QACV,IACA;YAAEW,aAAa;QAAK;QAEtBT,QAAQR,oBAAAA,CAAKkB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,UAAAA,WAAAA,GACE,OAAA,aAAA,CAAClB,4BAAAA,EAAAA;oBAAcmB,0BAAAA;oBAAyBd,QAAO;iCAC7C,OAAA,aAAA,CAACe,UAAAA;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,OAAA,aAAA,CAACxB,4BAAAA,EAAAA;YAIT;YACAe,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -63,7 +63,6 @@ const useDialogTitleInternalStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r2
|
|
|
63
63
|
]
|
|
64
64
|
});
|
|
65
65
|
const useDialogTitleStyles_unstable = (state)=>{
|
|
66
|
-
'use no memo';
|
|
67
66
|
const rootResetStyles = useRootResetStyles();
|
|
68
67
|
const actionResetStyles = useActionResetStyles();
|
|
69
68
|
const styles = useStyles();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { typographyStyles } from \"@fluentui/react-theme\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/**\n * Styles for the action slot\n */ const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */ export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IA+BjBS,4BAA4B;;;iCAkBC;eAA7BG;;;uBApDyC,gBAAgB;AAGnE,8BAA8B;IACjCX,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;AACZ,CAAC;AACD;;CAEA,GAAI,MAAMC,kBAAkB,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAA;CAO9B,CAAC;AACF,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,iBAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACF;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,MAAA;IAAA;CAMhC,CAAC;AAIS,qCAAkC,WAAA,OAAGA,oBAAA,EAAA,WAAA,WAAA;IAAAe,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAe/C,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;IAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACZ,IAAI,CAACgB,SAAS,OAAGpB,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;IACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;QACd,oDAAA;QACAW,KAAK,CAACX,MAAM,CAACe,SAAS,OAAGpB,mBAAY,EAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;IAClH;IACA,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -68,7 +68,6 @@ const useDialogTitleInternalStyles = (0, _react.makeResetStyles)({
|
|
|
68
68
|
textAlign: 'unset'
|
|
69
69
|
});
|
|
70
70
|
const useDialogTitleStyles_unstable = (state)=>{
|
|
71
|
-
'use no memo';
|
|
72
71
|
const rootResetStyles = useRootResetStyles();
|
|
73
72
|
const actionResetStyles = useActionResetStyles();
|
|
74
73
|
const styles = useStyles();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3,\n});\n\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4,\n },\n});\n\n/**\n * Styles for the action slot\n */\nconst useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start',\n});\n\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */\nexport const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset',\n});\n\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dialogTitleClassNames.root,\n rootResetStyles,\n !state.action && styles.rootWithoutAction,\n state.root.className,\n );\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","subtitle1","margin","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useStyles","rootWithoutAction","useActionResetStyles","justifySelf","alignSelf","useDialogTitleInternalStyles","overflow","padding","borderStyle","position","boxSizing","backgroundColor","color","fontFamily","fontSize","cursor","lineHeight","WebkitAppearance","textAlign","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;gCAsCAe;;;IAoBAc,6BAAAA;;;;uBAhE6C,iBAAiB;4BAG1C,wBAAwB;8BACjB,0BAA0B;AAE3D,8BAAgE;IACrE5B,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,yBAAqBR,sBAAAA,EAAgB;IACzC,GAAGG,4BAAAA,CAAiBM,SAAS;IAC7BC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;AACjB;AAEA,MAAMC,gBAAYd,iBAAAA,EAAW;IAC3Be,mBAAmB;QACjBF,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMG,2BAAuBjB,sBAAAA,EAAgB;IAC3CW,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBK,aAAa;IACbC,WAAW;AACb;AAMO,MAAMC,mCAA+BpB,sBAAAA,EAAgB;IAC1D,OAAGI,qCAAAA,GAAyB;IAC5BiB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,WAAW;IACXC,iBAAiB;IACjBC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,WAAW;AACb,GAAG;AAKI,sCAAsC,CAACE;IAC5C,MAAMC,kBAAkB5B;IACxB,MAAM6B,oBAAoBpB;IAC1B,MAAMqB,SAASvB;IAEf,oDAAoD;IACpDoB,MAAM7B,IAAI,CAACiC,SAAS,OAAGrC,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1B8B,iBACA,CAACD,MAAM5B,MAAM,IAAI+B,OAAOtB,iBAAiB,EACzCmB,MAAM7B,IAAI,CAACiC,SAAS;IAGtB,IAAIJ,MAAM5B,MAAM,EAAE;QAChB,oDAAoD;QACpD4B,MAAM5B,MAAM,CAACgC,SAAS,OAAGrC,mBAAAA,EAAaG,sBAAsBE,MAAM,EAAE8B,mBAAmBF,MAAM5B,MAAM,CAACgC,SAAS;IAC/G;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -9,8 +9,8 @@ Object.defineProperty(exports, "DialogTrigger", {
|
|
|
9
9
|
return DialogTrigger;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _useDialogTrigger = require("./useDialogTrigger");
|
|
13
|
-
const _renderDialogTrigger = require("./renderDialogTrigger");
|
|
12
|
+
const _useDialogTrigger = require("./useDialogTrigger.cjs");
|
|
13
|
+
const _renderDialogTrigger = require("./renderDialogTrigger.cjs");
|
|
14
14
|
const DialogTrigger = (props)=>{
|
|
15
15
|
const state = (0, _useDialogTrigger.useDialogTrigger_unstable)(props);
|
|
16
16
|
return (0, _renderDialogTrigger.renderDialogTrigger_unstable)(state);
|
package/lib-commonjs/components/DialogTrigger/{DialogTrigger.js.map → DialogTrigger.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["'use client';\n\nimport type * 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":["useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;;;;;;;;;;;kCAG0C,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["'use client';\n\nimport type * 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":["useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;;;;;;;;;;;kCAG0C,wBAAqB;qCAClB,2BAAwB;AAa9D,MAAME,gBAA8CC,CAAAA;IACzD,MAAMC,YAAQJ,2CAAAA,EAA0BG;IAExC,WAAOF,iDAAAA,EAA6BG;AACtC,EAAE;AAEFF,cAAcG,WAAW,GAAG;AAC5B,6FAA6F;AAC5FH,cAAyCI,wBAAwB,GAAG"}
|