@fluentui/react-dialog 9.18.2 → 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 +22 -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 -2
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js +2 -2
- 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 -2
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js +2 -2
- 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 -3
- package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js +3 -3
- 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 -4
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js +4 -4
- 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 -3
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js +3 -3
- 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.cjs.map +1 -0
- package/lib-commonjs/components/DialogActions/{useDialogActionsStyles.styles.raw.js → useDialogActionsStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/DialogActions/{useDialogActionsStyles.styles.raw.js.map → useDialogActionsStyles.styles.raw.cjs.map} +1 -1
- 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.cjs.map +1 -0
- package/lib-commonjs/components/DialogBody/{useDialogBodyStyles.styles.raw.js → useDialogBodyStyles.styles.raw.cjs} +6 -6
- 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.cjs.map +1 -0
- package/lib-commonjs/components/DialogContent/{useDialogContentStyles.styles.raw.js → useDialogContentStyles.styles.raw.cjs} +2 -2
- package/lib-commonjs/components/DialogContent/{useDialogContentStyles.styles.raw.js.map → useDialogContentStyles.styles.raw.cjs.map} +1 -1
- 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.cjs.map +1 -0
- package/lib-commonjs/components/DialogSurface/{useDialogSurfaceStyles.styles.raw.js → useDialogSurfaceStyles.styles.raw.cjs} +9 -9
- package/lib-commonjs/components/DialogSurface/{useDialogSurfaceStyles.styles.raw.js.map → useDialogSurfaceStyles.styles.raw.cjs.map} +1 -1
- 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.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/DialogBody/useDialogBodyStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +0 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.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/DialogActions/{useDialogActionsStyles.styles.js → useDialogActionsStyles.styles.cjs} +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/DialogBody/{useDialogBodyStyles.styles.js → useDialogBodyStyles.styles.cjs} +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/DialogContent/{useDialogContentStyles.styles.js → useDialogContentStyles.styles.cjs} +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/DialogSurface/{useDialogSurfaceStyles.styles.js → useDialogSurfaceStyles.styles.cjs} +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/DialogTitle/{useDialogTitleStyles.styles.js → useDialogTitleStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/DialogTitle/{useDialogTitleStyles.styles.raw.js → useDialogTitleStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/DialogTitle/{useDialogTitleStyles.styles.raw.js.map → useDialogTitleStyles.styles.raw.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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { MotionRefForwarderReset } from
|
|
3
|
-
import { Portal } from
|
|
4
|
-
import { assertSlots } from
|
|
5
|
-
import { DialogSurfaceProvider } from
|
|
2
|
+
import { MotionRefForwarderReset } from "@fluentui/react-motion";
|
|
3
|
+
import { Portal } from "@fluentui/react-portal";
|
|
4
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
5
|
+
import { DialogSurfaceProvider } from "../../contexts/index.js";
|
|
6
6
|
/**
|
|
7
7
|
* Render the final JSX of DialogSurface
|
|
8
8
|
*/ export const renderDialogSurface_unstable = (state, contextValues)=>{
|
|
@@ -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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,
|
|
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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,0BAAiB;AAGvD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,MAACJ;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,kBAClB,KAACJ,MAAMI,cAAc;0BACnB,cAAA,KAACJ,MAAMG,QAAQ;;0BAGrB,KAACR;0BACC,cAAA,KAACG;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,cAAA,KAACN,MAAMO,IAAI;;;;;AAKrB,EAAE"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { Escape } from
|
|
3
|
-
import { presenceMotionSlot } from
|
|
4
|
-
import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from
|
|
5
|
-
import { useDialogContext_unstable, useDialogBackdropContext_unstable } from
|
|
6
|
-
import { useDisableBodyScroll } from
|
|
7
|
-
import { DialogBackdropMotion } from
|
|
8
|
-
import { useMotionForwardedRef } from
|
|
2
|
+
import { Escape } from "@fluentui/keyboard-keys";
|
|
3
|
+
import { presenceMotionSlot } from "@fluentui/react-motion";
|
|
4
|
+
import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
|
|
5
|
+
import { useDialogContext_unstable, useDialogBackdropContext_unstable } from "../../contexts/index.js";
|
|
6
|
+
import { useDisableBodyScroll } from "../../utils/useDisableBodyScroll.js";
|
|
7
|
+
import { DialogBackdropMotion } from "../DialogBackdropMotion.js";
|
|
8
|
+
import { useMotionForwardedRef } from "@fluentui/react-motion";
|
|
9
9
|
/**
|
|
10
10
|
* Create the state required to render DialogSurface.
|
|
11
11
|
*
|
|
@@ -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;AAEA,SAASA,MAAM,QAAQ,0BAA0B;AACjD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,EACxBC,yBAAyB,QACpB,4BAA4B;AAGnC,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,
|
|
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;AAEA,SAASA,MAAM,QAAQ,0BAA0B;AACjD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,EACxBC,yBAAyB,QACpB,4BAA4B;AAGnC,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,0BAAiB;AAC9F,SAASC,oBAAoB,QAAQ,sCAAmC;AACxE,SAASC,oBAAoB,QAAQ,6BAA0B;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaJ;IAEnB,MAAMK,YAAYT,0BAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBX,0BAA0BU,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,mBAAmBX;IACzB,MAAMY,wBAAwBD,6BAAAA,8BAAAA,mBAAoBD;IAElD,MAAMG,kBAAkBd,0BAA0BU,CAAAA,MAAOA,IAAII,eAAe;IAC5E,MAAMC,YAAYf,0BAA0BU,CAAAA,MAAOA,IAAIK,SAAS;IAChE,MAAMC,oBAAoBhB,0BAA0BU,CAAAA,MAAOA,IAAIM,iBAAiB;IAChF,MAAMC,gBAAgBjB,0BAA0BU,CAAAA,MAAOA,IAAIQ,aAAa;IACxE,MAAMC,OAAOnB,0BAA0BU,CAAAA,MAAOA,IAAIS,IAAI;IACtD,MAAMC,iBAAiBpB,0BAA0BU,CAAAA,MAAOA,IAAIU,cAAc;IAE1E,MAAMC,uBAAuB3B,iBAAiB,CAAC4B;QAC7C,IAAI1B,oBAAoBU,MAAMiB,QAAQ,GAAG;gBACvCjB,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMiB,QAAQ,EAACC,OAAO,cAAtBlB,8CAAAA,6BAAAA,iBAAyBgB;QAC3B;QACA,IAAIb,cAAc,WAAW,CAACa,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBjC,iBAAiB,CAAC4B;YACtChB;SAAAA,mBAAAA,MAAMsB,SAAS,cAAftB,uCAAAA,sBAAAA,OAAkBgB;QAElB,IAAIA,MAAMO,GAAG,KAAKrC,UAAU,CAAC8B,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAW1B,KAAKkC,QAAQ,CAACzB,MAAMiB,QAAQ,EAAE;QAC7CS,iBAAiBvB,cAAc;QAC/BwB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,MAAMC,qBAAqBZ,qBAAAA,+BAAAA,SAAUa,UAAU;IAE/C,IAAIb,UAAU;QACZA,SAASC,OAAO,GAAGH;QACnB,4DAA4D;QAC5D,OAAOE,SAASa,UAAU;IAC5B;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGpC;IAEhDH,0BAA0B;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;QAClB;QACAgB;QACAI;QACAZ;QACAE;QACAsB;QACAf;QACAsB,WAAWpC,MAAMoC,SAAS;QAC1BF,MAAM3C,KAAK8C,MAAM,CACf7C,yBAAyB,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,KAAKZ,cAAcY,KAAKC,YAAYO;QACtC,IACA;YAAEmB,aAAa;QAAM;QAEvBO,gBAAgBhD,mBAAmBa,MAAMmC,cAAc,EAAE;YACvDP,aAAa/B;YACb8B,cAAc;gBACZc,QAAQ3B;gBACR4B,SAAS7B;YACX;QACF;QAEA,wBAAwB;QACxB8B,kBAAkBH;IACpB;AACF,EAAE"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { __resetStyles, __styles, mergeClasses } from
|
|
4
|
-
import { tokens } from
|
|
5
|
-
import { createFocusOutlineStyle } from
|
|
6
|
-
import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from
|
|
3
|
+
import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
|
|
4
|
+
import { tokens } from "@fluentui/react-theme";
|
|
5
|
+
import { createFocusOutlineStyle } from "@fluentui/react-tabster";
|
|
6
|
+
import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from "../../contexts/index.js";
|
|
7
7
|
export const dialogSurfaceClassNames = {
|
|
8
8
|
root: 'fui-DialogSurface',
|
|
9
9
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from
|
|
1
|
+
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,yCAAyC,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,yBAAyB;AACnM,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,0GAI5B,CAAC;AACF,MAAMiB,SAAS,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEb,IAAI;IAAEC,QAAQ;IAAEa,IAAI;IAAEC,cAAc;IAAEC,qBAAqB;IAAEC;EAAmB,CAAC,GAAGJ,KAAK;EACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;EAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;EACjD;EACAd,IAAI,CAACuB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;EACnI,IAAItB,QAAQ,EAAE;IACV;IACAA,QAAQ,CAACsB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;EAC7M;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { makeResetStyles, makeStyles, mergeClasses } from
|
|
3
|
-
import { tokens } from
|
|
4
|
-
import { createFocusOutlineStyle } from
|
|
5
|
-
import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from
|
|
2
|
+
import { makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
|
|
3
|
+
import { tokens } from "@fluentui/react-theme";
|
|
4
|
+
import { createFocusOutlineStyle } from "@fluentui/react-tabster";
|
|
5
|
+
import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from "../../contexts/index.js";
|
|
6
6
|
export const dialogSurfaceClassNames = {
|
|
7
7
|
root: 'fui-DialogSurface',
|
|
8
8
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
@@ -1 +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;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,
|
|
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;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,0BAAiB;AAIxB,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBb,gBAAgB;IACvC,GAAGI,yBAAyB;IAC5BU,OAAO;IACPC,SAASN;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,qBAAqB,OAAO,EAAEL,OAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,OAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,OAAO6B,uBAAuB;IAC/CC,OAAO9B,OAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,OAAOiC,QAAQ;IAE1B,CAAC9B,uCAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,gCAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,gBAAgB,GAAG,EAAEJ,0CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC;QAClBmC,gBAAgBnC;QAChBoC,mBAAmBpC;IACrB;AACF;AAEA,MAAMqC,uBAAuB1C,gBAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,OAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,YAAY3C,WAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,OAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;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,GAAG1D,aACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;QACZ,oDAAoD;QACpDA,SAASgD,SAAS,GAAG1D,aACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createPresenceComponentVariant, motionTokens } from
|
|
2
|
-
import { Scale } from
|
|
1
|
+
import { createPresenceComponentVariant, motionTokens } from "@fluentui/react-motion";
|
|
2
|
+
import { Scale } from "@fluentui/react-motion-components-preview";
|
|
3
3
|
export const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {
|
|
4
4
|
outScale: 0.85,
|
|
5
5
|
easing: motionTokens.curveDecelerateMid,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useDialogTitle_unstable } from
|
|
4
|
-
import { renderDialogTitle_unstable } from
|
|
5
|
-
import { useDialogTitleStyles_unstable } from
|
|
6
|
-
import { useCustomStyleHook_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useDialogTitle_unstable } from "./useDialogTitle.js";
|
|
4
|
+
import { renderDialogTitle_unstable } from "./renderDialogTitle.js";
|
|
5
|
+
import { useDialogTitleStyles_unstable } from "./useDialogTitleStyles.styles.js";
|
|
6
|
+
import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
|
|
7
7
|
/**
|
|
8
8
|
* The `DialogTitle` component expects to have a title/header
|
|
9
9
|
* and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
|
|
@@ -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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,
|
|
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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { DialogTitle } from
|
|
2
|
-
export { renderDialogTitle_unstable } from
|
|
3
|
-
export { useDialogTitle_unstable } from
|
|
4
|
-
export { dialogTitleClassNames, useDialogTitleInternalStyles, useDialogTitleStyles_unstable } from
|
|
1
|
+
export { DialogTitle } from "./DialogTitle.js";
|
|
2
|
+
export { renderDialogTitle_unstable } from "./renderDialogTitle.js";
|
|
3
|
+
export { useDialogTitle_unstable } from "./useDialogTitle.js";
|
|
4
|
+
export { dialogTitleClassNames, useDialogTitleInternalStyles, useDialogTitleStyles_unstable } from "./useDialogTitleStyles.styles.js";
|
|
@@ -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":"AAAA,SAASA,WAAW,QAAQ,
|
|
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":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SACEC,qBAAqB,EACrBC,4BAA4B,EAC5BC,6BAA6B,QACxB,mCAAgC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { assertSlots } from
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of DialogTitle
|
|
5
5
|
*/ export const renderDialogTitle_unstable = (state)=>{
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { getIntrinsicElementProps, slot } from
|
|
4
|
-
import { useDialogContext_unstable } from
|
|
5
|
-
import { Dismiss20Regular } from
|
|
6
|
-
import { DialogTrigger } from
|
|
7
|
-
import { useDialogTitleInternalStyles } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { getIntrinsicElementProps, slot } from "@fluentui/react-utilities";
|
|
4
|
+
import { useDialogContext_unstable } from "../../contexts/dialogContext.js";
|
|
5
|
+
import { Dismiss20Regular } from "@fluentui/react-icons";
|
|
6
|
+
import { DialogTrigger } from "../DialogTrigger/DialogTrigger.js";
|
|
7
|
+
import { useDialogTitleInternalStyles } from "./useDialogTitleStyles.styles.js";
|
|
8
8
|
/**
|
|
9
9
|
* Create the state required to render DialogTitle.
|
|
10
10
|
*
|
|
@@ -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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ
|
|
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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,kCAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,mCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,YAAYR,0BAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP;IAEvB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMb,KAAKc,MAAM,CACff,yBAAyB,MAAM;YAC7BQ;YACAQ,IAAId,0BAA0BS,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGV,KAAK;QACV,IACA;YAAEW,aAAa;QAAK;QAEtBT,QAAQR,KAAKkB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAAClB;oBAAcmB,0BAAAA;oBAAyBd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,oBAACxB;YAIT;YACAe,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { __resetStyles, __styles, mergeClasses } from
|
|
4
|
-
import { typographyStyles } from
|
|
5
|
-
import { createFocusOutlineStyle } from
|
|
3
|
+
import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
|
|
4
|
+
import { typographyStyles } from "@fluentui/react-theme";
|
|
5
|
+
import { createFocusOutlineStyle } from "@fluentui/react-tabster";
|
|
6
6
|
export const dialogTitleClassNames = {
|
|
7
7
|
root: 'fui-DialogTitle',
|
|
8
8
|
action: 'fui-DialogTitle__action'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from
|
|
1
|
+
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGR,aAAA,6PAO9B,CAAC;AACF,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,gBAAGd,aAAA;EAAAe,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAS,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;IACd;IACAW,KAAK,CAACX,MAAM,CAACe,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { makeResetStyles, makeStyles, mergeClasses } from
|
|
3
|
-
import { typographyStyles } from
|
|
4
|
-
import { createFocusOutlineStyle } from
|
|
2
|
+
import { makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
|
|
3
|
+
import { typographyStyles } from "@fluentui/react-theme";
|
|
4
|
+
import { createFocusOutlineStyle } from "@fluentui/react-tabster";
|
|
5
5
|
export const dialogTitleClassNames = {
|
|
6
6
|
root: 'fui-DialogTitle',
|
|
7
7
|
action: 'fui-DialogTitle__action'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { useDialogTrigger_unstable } from
|
|
3
|
-
import { renderDialogTrigger_unstable } from
|
|
2
|
+
import { useDialogTrigger_unstable } from "./useDialogTrigger.js";
|
|
3
|
+
import { renderDialogTrigger_unstable } from "./renderDialogTrigger.js";
|
|
4
4
|
/**
|
|
5
5
|
* A non-visual component that wraps its child
|
|
6
6
|
* and configures them to be the trigger that will open or close a `Dialog`.
|
|
@@ -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;AAGA,SAASA,yBAAyB,QAAQ,
|
|
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;AAGA,SAASA,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,2BAAwB;AAIrE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gBAA8CC,CAAAA;IACzD,MAAMC,QAAQJ,0BAA0BG;IAExC,OAAOF,6BAA6BG;AACtC,EAAE;AAEFF,cAAcG,WAAW,GAAG;AAC5B,6FAA6F;AAC5FH,cAAyCI,wBAAwB,GAAG"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { DialogTrigger } from
|
|
2
|
-
export { renderDialogTrigger_unstable } from
|
|
3
|
-
export { useDialogTrigger_unstable } from
|
|
1
|
+
export { DialogTrigger } from "./DialogTrigger.js";
|
|
2
|
+
export { renderDialogTrigger_unstable } from "./renderDialogTrigger.js";
|
|
3
|
+
export { useDialogTrigger_unstable } from "./useDialogTrigger.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTrigger/index.ts"],"sourcesContent":["export { DialogTrigger } from './DialogTrigger';\nexport type {\n DialogTriggerAction,\n DialogTriggerChildProps,\n DialogTriggerProps,\n DialogTriggerState,\n} from './DialogTrigger.types';\nexport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nexport { useDialogTrigger_unstable } from './useDialogTrigger';\n"],"names":["DialogTrigger","renderDialogTrigger_unstable","useDialogTrigger_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTrigger/index.ts"],"sourcesContent":["export { DialogTrigger } from './DialogTrigger';\nexport type {\n DialogTriggerAction,\n DialogTriggerChildProps,\n DialogTriggerProps,\n DialogTriggerState,\n} from './DialogTrigger.types';\nexport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nexport { useDialogTrigger_unstable } from './useDialogTrigger';\n"],"names":["DialogTrigger","renderDialogTrigger_unstable","useDialogTrigger_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,qBAAkB;AAOhD,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,yBAAyB,QAAQ,wBAAqB"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, useEventCallback } from
|
|
3
|
-
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from
|
|
4
|
-
import { useARIAButtonProps } from
|
|
5
|
-
import { useModalAttributes } from
|
|
2
|
+
import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, useEventCallback } from "@fluentui/react-utilities";
|
|
3
|
+
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from "../../contexts/index.js";
|
|
4
|
+
import { useARIAButtonProps } from "@fluentui/react-aria";
|
|
5
|
+
import { useModalAttributes } from "@fluentui/react-tabster";
|
|
6
6
|
/**
|
|
7
7
|
* Create the state required to render DialogTrigger.
|
|
8
8
|
* Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n const triggerChildProps = {\n ...child?.props,\n ref: getReactElementRef<HTMLAnchorElement>(child),\n onClick: handleClick,\n ...triggerAttributes,\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerChildProps,\n type: 'button',\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n"],"names":["applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useModalAttributes","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","onClick","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"mappings":"AAAA;AAGA,SACEA,2BAA2B,EAC3BC,eAAe,EACfC,kBAAkB,EAClBC,gBAAgB,QACX,4BAA4B;AAEnC,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n const triggerChildProps = {\n ...child?.props,\n ref: getReactElementRef<HTMLAnchorElement>(child),\n onClick: handleClick,\n ...triggerAttributes,\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerChildProps,\n type: 'button',\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n"],"names":["applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useModalAttributes","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","onClick","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"mappings":"AAAA;AAGA,SACEA,2BAA2B,EAC3BC,eAAe,EACfC,kBAAkB,EAClBC,gBAAgB,QACX,4BAA4B;AAEnC,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,0BAAiB;AAC7F,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,wBAAwBL;IAE9B,MAAM,EAAEM,QAAQ,EAAEC,2BAA2B,KAAK,EAAEC,SAASH,wBAAwB,UAAU,MAAM,EAAE,GAAGD;IAE1G,MAAMK,QAAQb,gBAAgBU;IAE9B,MAAMI,oBAAoBX,0BAA0BY,CAAAA,MAAOA,IAAID,iBAAiB;IAChF,MAAM,EAAEE,iBAAiB,EAAE,GAAGV;IAE9B,MAAMW,cAAcf,iBAClB,CAACgB;YACCL,sBAAAA;QAAAA,kBAAAA,6BAAAA,uBAAAA,CAAAA,eAAAA,MAAOL,KAAK,EAACW,OAAO,cAApBN,2CAAAA,0BAAAA,cAAuBK;QACvB,IAAI,CAACA,MAAME,kBAAkB,IAAI;YAC/BN,kBAAkB;gBAChBI;gBACAG,MAAM;gBACNC,MAAMV,WAAW;YACnB;QACF;IACF;IAGF,MAAMW,oBAAoB;WACrBV,kBAAAA,4BAAAA,MAAOL,KAAK,AAAf;QACAgB,KAAKvB,mBAAsCY;QAC3CM,SAASF;QACT,GAAGD,iBAAiB;IACtB;IAEA,MAAMS,8BAA8BpB,mBAClCQ,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,YAAYR,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,MAAMR,MAAMQ,IAAI,GAAG,OAC/D;QACE,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IAGF,OAAO;QACLX,UAAUX,4BACRW,UACAC,2BAA2BY,oBAAoBE;IAEnD;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
export const DialogBackdropContext = React.createContext(undefined);
|
|
4
4
|
export const DialogBackdropProvider = DialogBackdropContext.Provider;
|
|
5
5
|
export const useDialogBackdropContext_unstable = ()=>{
|
package/lib/contexts/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { DIALOG_GAP, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from
|
|
2
|
-
export { DialogContext, DialogProvider, useDialogContext_unstable } from
|
|
3
|
-
export { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from
|
|
4
|
-
export { DialogBackdropContext, DialogBackdropProvider, useDialogBackdropContext_unstable } from
|
|
1
|
+
export { DIALOG_GAP, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from "./constants.js";
|
|
2
|
+
export { DialogContext, DialogProvider, useDialogContext_unstable } from "./dialogContext.js";
|
|
3
|
+
export { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from "./dialogSurfaceContext.js";
|
|
4
|
+
export { DialogBackdropContext, DialogBackdropProvider, useDialogBackdropContext_unstable } from "./dialogBackdropContext.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n DIALOG_GAP,\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 './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport type { DialogBackdropContextValue } from './dialogBackdropContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\nexport {\n DialogBackdropContext,\n DialogBackdropProvider,\n useDialogBackdropContext_unstable,\n} from './dialogBackdropContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable","DialogBackdropContext","DialogBackdropProvider","useDialogBackdropContext_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,
|
|
1
|
+
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n DIALOG_GAP,\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 './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport type { DialogBackdropContextValue } from './dialogBackdropContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\nexport {\n DialogBackdropContext,\n DialogBackdropProvider,\n useDialogBackdropContext_unstable,\n} from './dialogBackdropContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable","DialogBackdropContext","DialogBackdropProvider","useDialogBackdropContext_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,iBAAc;AAErB,SAASC,aAAa,EAAEC,cAAc,EAAEC,yBAAyB,QAAQ,qBAAkB;AAG3F,SAASC,oBAAoB,EAAEC,qBAAqB,EAAEC,gCAAgC,QAAQ,4BAAyB;AACvH,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,6BAA0B"}
|
package/lib/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from
|
|
2
|
-
export { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from
|
|
3
|
-
export { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from
|
|
4
|
-
export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from
|
|
5
|
-
export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from
|
|
6
|
-
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from
|
|
7
|
-
export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from
|
|
8
|
-
export { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider, DialogBackdropProvider, useDialogBackdropContext_unstable } from
|
|
9
|
-
export { DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET } from
|
|
1
|
+
export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from "./Dialog.js";
|
|
2
|
+
export { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from "./DialogTrigger.js";
|
|
3
|
+
export { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from "./DialogActions.js";
|
|
4
|
+
export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from "./DialogBody.js";
|
|
5
|
+
export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from "./DialogTitle.js";
|
|
6
|
+
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from "./DialogSurface.js";
|
|
7
|
+
export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from "./DialogContent.js";
|
|
8
|
+
export { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider, DialogBackdropProvider, useDialogBackdropContext_unstable } from "./contexts/index.js";
|
|
9
|
+
export { DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET } from "./contexts/constants.js";
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n DialogContextValues,\n DialogSlots,\n DialogProps,\n DialogState,\n DialogModalType,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n DialogTriggerProps,\n DialogTriggerChildProps,\n DialogTriggerState,\n DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n DialogActions,\n dialogActionsClassNames,\n useDialogActions_unstable,\n useDialogActionsStyles_unstable,\n renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n DialogBody,\n dialogBodyClassNames,\n useDialogBody_unstable,\n useDialogBodyStyles_unstable,\n renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n DialogTitle,\n dialogTitleClassNames,\n useDialogTitle_unstable,\n useDialogTitleStyles_unstable,\n renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n useDialogSurface_unstable,\n useDialogSurfaceStyles_unstable,\n useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n DialogBackdropSlotProps,\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n DialogSurfaceElement,\n DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n DialogContent,\n dialogContentClassNames,\n useDialogContent_unstable,\n useDialogContentStyles_unstable,\n renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n useDialogContext_unstable,\n useDialogSurfaceContext_unstable,\n DialogProvider,\n DialogSurfaceProvider,\n DialogBackdropProvider,\n useDialogBackdropContext_unstable,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue, DialogBackdropContextValue } from './contexts/index';\n\nexport {\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DialogBackdropProvider","useDialogBackdropContext_unstable","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n DialogContextValues,\n DialogSlots,\n DialogProps,\n DialogState,\n DialogModalType,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n DialogTriggerProps,\n DialogTriggerChildProps,\n DialogTriggerState,\n DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n DialogActions,\n dialogActionsClassNames,\n useDialogActions_unstable,\n useDialogActionsStyles_unstable,\n renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n DialogBody,\n dialogBodyClassNames,\n useDialogBody_unstable,\n useDialogBodyStyles_unstable,\n renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n DialogTitle,\n dialogTitleClassNames,\n useDialogTitle_unstable,\n useDialogTitleStyles_unstable,\n renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n useDialogSurface_unstable,\n useDialogSurfaceStyles_unstable,\n useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n DialogBackdropSlotProps,\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n DialogSurfaceElement,\n DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n DialogContent,\n dialogContentClassNames,\n useDialogContent_unstable,\n useDialogContentStyles_unstable,\n renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n useDialogContext_unstable,\n useDialogSurfaceContext_unstable,\n DialogProvider,\n DialogSurfaceProvider,\n DialogBackdropProvider,\n useDialogBackdropContext_unstable,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue, DialogBackdropContextValue } from './contexts/index';\n\nexport {\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DialogBackdropProvider","useDialogBackdropContext_unstable","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,cAAW;AAY9G,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,qBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,qBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,kBAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,mBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,sCAAsC,EACtCC,4BAA4B,QACvB,qBAAkB;AAUzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,qBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,sBAAmB;AAI1B,SACEC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yCAAyC,QACpC,0BAAuB"}
|
package/lib/utils/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { useDisableBodyScroll } from
|
|
2
|
-
export { useFocusFirstElement } from
|
|
1
|
+
export { useDisableBodyScroll } from "./useDisableBodyScroll.js";
|
|
2
|
+
export { useFocusFirstElement } from "./useFocusFirstElement.js";
|
package/lib/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useDisableBodyScroll } from './useDisableBodyScroll';\nexport { useFocusFirstElement } from './useFocusFirstElement';\n"],"names":["useDisableBodyScroll","useFocusFirstElement"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useDisableBodyScroll } from './useDisableBodyScroll';\nexport { useFocusFirstElement } from './useFocusFirstElement';\n"],"names":["useDisableBodyScroll","useFocusFirstElement"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,oBAAoB,QAAQ,4BAAyB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useFluent_unstable } from
|
|
4
|
-
import { useBodyNoScrollStyles, useHTMLNoScrollStyles } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useFluent_unstable } from "@fluentui/react-shared-contexts";
|
|
4
|
+
import { useBodyNoScrollStyles, useHTMLNoScrollStyles } from "./useDisableBodyScroll.styles.js";
|
|
5
5
|
/**
|
|
6
6
|
* A React *hook* that disables body scrolling through `overflowY: hidden` CSS property
|
|
7
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useDisableBodyScroll.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n *\n * @internal\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const htmlNoScrollStyles = useHTMLNoScrollStyles();\n const bodyNoScrollStyles = useBodyNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n\n const disableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n const isHorizontalScrollbarVisible =\n // When the window is a fractional height, `innerHeight` always rounds down but `clientHeight` rounds either up or down depending on the value.\n // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.\n Math.floor(targetDocument.body.getBoundingClientRect().height) > (targetDocument.defaultView?.innerHeight ?? 0);\n if (!isHorizontalScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n targetDocument.body.classList.add(bodyNoScrollStyles);\n return;\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n const enableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n targetDocument.body.classList.remove(bodyNoScrollStyles);\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n return {\n disableBodyScroll,\n enableBodyScroll,\n };\n}\n"],"names":["React","useFluent_unstable","useBodyNoScrollStyles","useHTMLNoScrollStyles","useDisableBodyScroll","htmlNoScrollStyles","bodyNoScrollStyles","targetDocument","disableBodyScroll","useCallback","isHorizontalScrollbarVisible","Math","floor","body","getBoundingClientRect","height","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/utils/useDisableBodyScroll.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n *\n * @internal\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const htmlNoScrollStyles = useHTMLNoScrollStyles();\n const bodyNoScrollStyles = useBodyNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n\n const disableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n const isHorizontalScrollbarVisible =\n // When the window is a fractional height, `innerHeight` always rounds down but `clientHeight` rounds either up or down depending on the value.\n // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.\n Math.floor(targetDocument.body.getBoundingClientRect().height) > (targetDocument.defaultView?.innerHeight ?? 0);\n if (!isHorizontalScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n targetDocument.body.classList.add(bodyNoScrollStyles);\n return;\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n const enableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n targetDocument.body.classList.remove(bodyNoScrollStyles);\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n return {\n disableBodyScroll,\n enableBodyScroll,\n };\n}\n"],"names":["React","useFluent_unstable","useBodyNoScrollStyles","useHTMLNoScrollStyles","useDisableBodyScroll","htmlNoScrollStyles","bodyNoScrollStyles","targetDocument","disableBodyScroll","useCallback","isHorizontalScrollbarVisible","Math","floor","body","getBoundingClientRect","height","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,mCAAgC;AAE7F;;;;CAIC,GACD,OAAO,SAASC;IAId,MAAMC,qBAAqBF;IAC3B,MAAMG,qBAAqBJ;IAC3B,MAAM,EAAEK,cAAc,EAAE,GAAGN;IAE3B,MAAMO,oBAAoBR,MAAMS,WAAW,CAAC;YAO0BF;QANpE,IAAI,CAACA,gBAAgB;YACnB;QACF;YAIoEA;QAHpE,MAAMG,+BACJ,+IAA+I;QAC/I,oJAAoJ;QACpJC,KAAKC,KAAK,CAACL,eAAeM,IAAI,CAACC,qBAAqB,GAAGC,MAAM,IAAKR,CAAAA,CAAAA,2CAAAA,8BAAAA,eAAeS,WAAW,cAA1BT,kDAAAA,4BAA4BU,WAAW,cAAvCV,qDAAAA,0CAA2C,CAAA;QAC/G,IAAI,CAACG,8BAA8B;YACjC;QACF;QACAH,eAAeW,eAAe,CAACC,SAAS,CAACC,GAAG,CAACf;QAC7CE,eAAeM,IAAI,CAACM,SAAS,CAACC,GAAG,CAACd;QAClC;IACF,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,MAAMe,mBAAmBrB,MAAMS,WAAW,CAAC;QACzC,IAAI,CAACF,gBAAgB;YACnB;QACF;QACAA,eAAeW,eAAe,CAACC,SAAS,CAACG,MAAM,CAACjB;QAChDE,eAAeM,IAAI,CAACM,SAAS,CAACG,MAAM,CAAChB;IACvC,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,OAAO;QACLE;QACAa;IACF;AACF"}
|