@fluentui/react-dialog 9.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +527 -0
- package/CHANGELOG.md +199 -0
- package/LICENSE +15 -0
- package/README.md +5 -0
- package/Spec.md +537 -0
- package/assets/AlertDialogKeyboardInteraction.png +0 -0
- package/assets/AlertDialogMouseInteraction.png +0 -0
- package/assets/ModalDialogKeyboardInteraction.png +0 -0
- package/assets/ModalDialogMouseInteraction.png +0 -0
- package/assets/NonModalDialogKeyboardInteraction.png +0 -0
- package/assets/NonModalDialogMouseInteraction.png +0 -0
- package/dist/index.d.ts +451 -0
- package/lib/Dialog.js +2 -0
- package/lib/Dialog.js.map +1 -0
- package/lib/DialogActions.js +2 -0
- package/lib/DialogActions.js.map +1 -0
- package/lib/DialogBody.js +2 -0
- package/lib/DialogBody.js.map +1 -0
- package/lib/DialogContent.js +2 -0
- package/lib/DialogContent.js.map +1 -0
- package/lib/DialogSurface.js +2 -0
- package/lib/DialogSurface.js.map +1 -0
- package/lib/DialogTitle.js +2 -0
- package/lib/DialogTitle.js.map +1 -0
- package/lib/DialogTrigger.js +2 -0
- package/lib/DialogTrigger.js.map +1 -0
- package/lib/components/Dialog/Dialog.js +19 -0
- package/lib/components/Dialog/Dialog.js.map +1 -0
- package/lib/components/Dialog/Dialog.types.js +2 -0
- package/lib/components/Dialog/Dialog.types.js.map +1 -0
- package/lib/components/Dialog/index.js +5 -0
- package/lib/components/Dialog/index.js.map +1 -0
- package/lib/components/Dialog/renderDialog.js +18 -0
- package/lib/components/Dialog/renderDialog.js.map +1 -0
- package/lib/components/Dialog/useDialog.js +87 -0
- package/lib/components/Dialog/useDialog.js.map +1 -0
- package/lib/components/Dialog/useDialogContextValues.js +31 -0
- package/lib/components/Dialog/useDialogContextValues.js.map +1 -0
- package/lib/components/DialogActions/DialogActions.js +16 -0
- package/lib/components/DialogActions/DialogActions.js.map +1 -0
- package/lib/components/DialogActions/DialogActions.types.js +2 -0
- package/lib/components/DialogActions/DialogActions.types.js.map +1 -0
- package/lib/components/DialogActions/index.js +6 -0
- package/lib/components/DialogActions/index.js.map +1 -0
- package/lib/components/DialogActions/renderDialogActions.js +16 -0
- package/lib/components/DialogActions/renderDialogActions.js.map +1 -0
- package/lib/components/DialogActions/useDialogActions.js +27 -0
- package/lib/components/DialogActions/useDialogActions.js.map +1 -0
- package/lib/components/DialogActions/useDialogActionsStyles.js +49 -0
- package/lib/components/DialogActions/useDialogActionsStyles.js.map +1 -0
- package/lib/components/DialogBody/DialogBody.js +16 -0
- package/lib/components/DialogBody/DialogBody.js.map +1 -0
- package/lib/components/DialogBody/DialogBody.types.js +2 -0
- package/lib/components/DialogBody/DialogBody.types.js.map +1 -0
- package/lib/components/DialogBody/index.js +6 -0
- package/lib/components/DialogBody/index.js.map +1 -0
- package/lib/components/DialogBody/renderDialogBody.js +16 -0
- package/lib/components/DialogBody/renderDialogBody.js.map +1 -0
- package/lib/components/DialogBody/useDialogBody.js +25 -0
- package/lib/components/DialogBody/useDialogBody.js.map +1 -0
- package/lib/components/DialogBody/useDialogBodyStyles.js +50 -0
- package/lib/components/DialogBody/useDialogBodyStyles.js.map +1 -0
- package/lib/components/DialogContent/DialogContent.js +16 -0
- package/lib/components/DialogContent/DialogContent.js.map +1 -0
- package/lib/components/DialogContent/DialogContent.types.js +2 -0
- package/lib/components/DialogContent/DialogContent.types.js.map +1 -0
- package/lib/components/DialogContent/index.js +6 -0
- package/lib/components/DialogContent/index.js.map +1 -0
- package/lib/components/DialogContent/renderDialogContent.js +15 -0
- package/lib/components/DialogContent/renderDialogContent.js.map +1 -0
- package/lib/components/DialogContent/useDialogContent.js +28 -0
- package/lib/components/DialogContent/useDialogContent.js.map +1 -0
- package/lib/components/DialogContent/useDialogContentStyles.js +40 -0
- package/lib/components/DialogContent/useDialogContentStyles.js.map +1 -0
- package/lib/components/DialogSurface/DialogSurface.js +18 -0
- package/lib/components/DialogSurface/DialogSurface.js.map +1 -0
- package/lib/components/DialogSurface/DialogSurface.types.js +2 -0
- package/lib/components/DialogSurface/DialogSurface.types.js.map +1 -0
- package/lib/components/DialogSurface/index.js +6 -0
- package/lib/components/DialogSurface/index.js.map +1 -0
- package/lib/components/DialogSurface/renderDialogSurface.js +20 -0
- package/lib/components/DialogSurface/renderDialogSurface.js.map +1 -0
- package/lib/components/DialogSurface/useDialogSurface.js +158 -0
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -0
- package/lib/components/DialogSurface/useDialogSurfaceContextValues.js +7 -0
- package/lib/components/DialogSurface/useDialogSurfaceContextValues.js.map +1 -0
- package/lib/components/DialogSurface/useDialogSurfaceStyles.js +95 -0
- package/lib/components/DialogSurface/useDialogSurfaceStyles.js.map +1 -0
- package/lib/components/DialogTitle/DialogTitle.js +16 -0
- package/lib/components/DialogTitle/DialogTitle.js.map +1 -0
- package/lib/components/DialogTitle/DialogTitle.types.js +2 -0
- package/lib/components/DialogTitle/DialogTitle.types.js.map +1 -0
- package/lib/components/DialogTitle/index.js +6 -0
- package/lib/components/DialogTitle/index.js.map +1 -0
- package/lib/components/DialogTitle/renderDialogTitle.js +16 -0
- package/lib/components/DialogTitle/renderDialogTitle.js.map +1 -0
- package/lib/components/DialogTitle/useDialogTitle.js +48 -0
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -0
- package/lib/components/DialogTitle/useDialogTitleStyles.js +116 -0
- package/lib/components/DialogTitle/useDialogTitleStyles.js.map +1 -0
- package/lib/components/DialogTrigger/DialogTrigger.js +20 -0
- package/lib/components/DialogTrigger/DialogTrigger.js.map +1 -0
- package/lib/components/DialogTrigger/DialogTrigger.types.js +2 -0
- package/lib/components/DialogTrigger/DialogTrigger.types.js.map +1 -0
- package/lib/components/DialogTrigger/index.js +5 -0
- package/lib/components/DialogTrigger/index.js.map +1 -0
- package/lib/components/DialogTrigger/renderDialogTrigger.js +7 -0
- package/lib/components/DialogTrigger/renderDialogTrigger.js.map +1 -0
- package/lib/components/DialogTrigger/useDialogTrigger.js +48 -0
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -0
- package/lib/contexts/constants.js +11 -0
- package/lib/contexts/constants.js.map +1 -0
- package/lib/contexts/dialogContext.js +19 -0
- package/lib/contexts/dialogContext.js.map +1 -0
- package/lib/contexts/dialogSurfaceContext.js +10 -0
- package/lib/contexts/dialogSurfaceContext.js.map +1 -0
- package/lib/contexts/index.js +4 -0
- package/lib/contexts/index.js.map +1 -0
- package/lib/index.js +8 -0
- package/lib/index.js.map +1 -0
- package/lib/utils/index.js +6 -0
- package/lib/utils/index.js.map +1 -0
- package/lib/utils/isEscapeKeyDown.js +12 -0
- package/lib/utils/isEscapeKeyDown.js.map +1 -0
- package/lib/utils/isHTMLDialogElement.js +4 -0
- package/lib/utils/isHTMLDialogElement.js.map +1 -0
- package/lib/utils/useControlNativeDialogOpenState.js +20 -0
- package/lib/utils/useControlNativeDialogOpenState.js.map +1 -0
- package/lib/utils/useDisableBodyScroll.js +60 -0
- package/lib/utils/useDisableBodyScroll.js.map +1 -0
- package/lib/utils/useFocusFirstElement.js +41 -0
- package/lib/utils/useFocusFirstElement.js.map +1 -0
- package/lib-commonjs/Dialog.js +10 -0
- package/lib-commonjs/Dialog.js.map +1 -0
- package/lib-commonjs/DialogActions.js +10 -0
- package/lib-commonjs/DialogActions.js.map +1 -0
- package/lib-commonjs/DialogBody.js +10 -0
- package/lib-commonjs/DialogBody.js.map +1 -0
- package/lib-commonjs/DialogContent.js +10 -0
- package/lib-commonjs/DialogContent.js.map +1 -0
- package/lib-commonjs/DialogSurface.js +10 -0
- package/lib-commonjs/DialogSurface.js.map +1 -0
- package/lib-commonjs/DialogTitle.js +10 -0
- package/lib-commonjs/DialogTitle.js.map +1 -0
- package/lib-commonjs/DialogTrigger.js +10 -0
- package/lib-commonjs/DialogTrigger.js.map +1 -0
- package/lib-commonjs/components/Dialog/Dialog.js +30 -0
- package/lib-commonjs/components/Dialog/Dialog.js.map +1 -0
- package/lib-commonjs/components/Dialog/Dialog.types.js +6 -0
- package/lib-commonjs/components/Dialog/Dialog.types.js.map +1 -0
- package/lib-commonjs/components/Dialog/index.js +16 -0
- package/lib-commonjs/components/Dialog/index.js.map +1 -0
- package/lib-commonjs/components/Dialog/renderDialog.js +29 -0
- package/lib-commonjs/components/Dialog/renderDialog.js.map +1 -0
- package/lib-commonjs/components/Dialog/useDialog.js +101 -0
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -0
- package/lib-commonjs/components/Dialog/useDialogContextValues.js +40 -0
- package/lib-commonjs/components/Dialog/useDialogContextValues.js.map +1 -0
- package/lib-commonjs/components/DialogActions/DialogActions.js +27 -0
- package/lib-commonjs/components/DialogActions/DialogActions.js.map +1 -0
- package/lib-commonjs/components/DialogActions/DialogActions.types.js +6 -0
- package/lib-commonjs/components/DialogActions/DialogActions.types.js.map +1 -0
- package/lib-commonjs/components/DialogActions/index.js +18 -0
- package/lib-commonjs/components/DialogActions/index.js.map +1 -0
- package/lib-commonjs/components/DialogActions/renderDialogActions.js +27 -0
- package/lib-commonjs/components/DialogActions/renderDialogActions.js.map +1 -0
- package/lib-commonjs/components/DialogActions/useDialogActions.js +37 -0
- package/lib-commonjs/components/DialogActions/useDialogActions.js.map +1 -0
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.js +60 -0
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.js.map +1 -0
- package/lib-commonjs/components/DialogBody/DialogBody.js +27 -0
- package/lib-commonjs/components/DialogBody/DialogBody.js.map +1 -0
- package/lib-commonjs/components/DialogBody/DialogBody.types.js +6 -0
- package/lib-commonjs/components/DialogBody/DialogBody.types.js.map +1 -0
- package/lib-commonjs/components/DialogBody/index.js +18 -0
- package/lib-commonjs/components/DialogBody/index.js.map +1 -0
- package/lib-commonjs/components/DialogBody/renderDialogBody.js +27 -0
- package/lib-commonjs/components/DialogBody/renderDialogBody.js.map +1 -0
- package/lib-commonjs/components/DialogBody/useDialogBody.js +35 -0
- package/lib-commonjs/components/DialogBody/useDialogBody.js.map +1 -0
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js +61 -0
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js.map +1 -0
- package/lib-commonjs/components/DialogContent/DialogContent.js +27 -0
- package/lib-commonjs/components/DialogContent/DialogContent.js.map +1 -0
- package/lib-commonjs/components/DialogContent/DialogContent.types.js +6 -0
- package/lib-commonjs/components/DialogContent/DialogContent.types.js.map +1 -0
- package/lib-commonjs/components/DialogContent/index.js +18 -0
- package/lib-commonjs/components/DialogContent/index.js.map +1 -0
- package/lib-commonjs/components/DialogContent/renderDialogContent.js +26 -0
- package/lib-commonjs/components/DialogContent/renderDialogContent.js.map +1 -0
- package/lib-commonjs/components/DialogContent/useDialogContent.js +39 -0
- package/lib-commonjs/components/DialogContent/useDialogContent.js.map +1 -0
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.js +52 -0
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/DialogSurface.js +30 -0
- package/lib-commonjs/components/DialogSurface/DialogSurface.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/DialogSurface.types.js +6 -0
- package/lib-commonjs/components/DialogSurface/DialogSurface.types.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/index.js +18 -0
- package/lib-commonjs/components/DialogSurface/index.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js +33 -0
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +171 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js +16 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js +107 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/DialogTitle.js +27 -0
- package/lib-commonjs/components/DialogTitle/DialogTitle.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/DialogTitle.types.js +6 -0
- package/lib-commonjs/components/DialogTitle/DialogTitle.types.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/index.js +18 -0
- package/lib-commonjs/components/DialogTitle/index.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js +27 -0
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js +64 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js +129 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js.map +1 -0
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js +31 -0
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js.map +1 -0
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.types.js +6 -0
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.types.js.map +1 -0
- package/lib-commonjs/components/DialogTrigger/index.js +16 -0
- package/lib-commonjs/components/DialogTrigger/index.js.map +1 -0
- package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js +16 -0
- package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js.map +1 -0
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +62 -0
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -0
- package/lib-commonjs/contexts/constants.js +17 -0
- package/lib-commonjs/contexts/constants.js.map +1 -0
- package/lib-commonjs/contexts/dialogContext.js +30 -0
- package/lib-commonjs/contexts/dialogContext.js.map +1 -0
- package/lib-commonjs/contexts/dialogSurfaceContext.js +21 -0
- package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -0
- package/lib-commonjs/contexts/index.js +14 -0
- package/lib-commonjs/contexts/index.js.map +1 -0
- package/lib-commonjs/index.js +214 -0
- package/lib-commonjs/index.js.map +1 -0
- package/lib-commonjs/utils/index.js +18 -0
- package/lib-commonjs/utils/index.js.map +1 -0
- package/lib-commonjs/utils/isEscapeKeyDown.js +23 -0
- package/lib-commonjs/utils/isEscapeKeyDown.js.map +1 -0
- package/lib-commonjs/utils/isHTMLDialogElement.js +13 -0
- package/lib-commonjs/utils/isHTMLDialogElement.js.map +1 -0
- package/lib-commonjs/utils/useControlNativeDialogOpenState.js +31 -0
- package/lib-commonjs/utils/useControlNativeDialogOpenState.js.map +1 -0
- package/lib-commonjs/utils/useDisableBodyScroll.js +73 -0
- package/lib-commonjs/utils/useDisableBodyScroll.js.map +1 -0
- package/lib-commonjs/utils/useFocusFirstElement.js +54 -0
- package/lib-commonjs/utils/useFocusFirstElement.js.map +1 -0
- package/package.json +68 -0
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
3
|
+
import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
|
|
4
|
+
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
|
|
5
|
+
import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
6
|
+
/**
|
|
7
|
+
* Create the state required to render DialogTrigger.
|
|
8
|
+
* Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
|
|
9
|
+
*
|
|
10
|
+
* @param props - props from this instance of DialogTrigger
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
export const useDialogTrigger_unstable = props => {
|
|
14
|
+
const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();
|
|
15
|
+
const {
|
|
16
|
+
children,
|
|
17
|
+
action = isInsideSurfaceDialog ? 'close' : 'open'
|
|
18
|
+
} = props;
|
|
19
|
+
const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
|
|
20
|
+
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
21
|
+
const {
|
|
22
|
+
triggerAttributes
|
|
23
|
+
} = useModalAttributes();
|
|
24
|
+
const handleClick = useEventCallback(event => {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
|
|
27
|
+
(_b = child === null || child === void 0 ? void 0 : (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
28
|
+
|
|
29
|
+
if (!event.isDefaultPrevented()) {
|
|
30
|
+
requestOpenChange({
|
|
31
|
+
event,
|
|
32
|
+
type: 'triggerClick',
|
|
33
|
+
open: action === 'open'
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
children: applyTriggerPropsToChildren(children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
|
|
39
|
+
type: 'button',
|
|
40
|
+
...(child === null || child === void 0 ? void 0 : child.props),
|
|
41
|
+
'aria-haspopup': action === 'close' ? undefined : 'dialog',
|
|
42
|
+
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
43
|
+
onClick: handleClick,
|
|
44
|
+
...triggerAttributes
|
|
45
|
+
}))
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=useDialogTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,2BAAT,EAAsC,eAAtC,EAAuD,gBAAvD,QAA+E,2BAA/E;AAEA,SAAS,yBAAT,EAAoC,gCAApC,QAA4E,gBAA5E;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA;;;;;AAKG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAkD;EACzF,MAAM,qBAAqB,GAAG,gCAAgC,EAA9D;EAEA,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,qBAAqB,GAAG,OAAH,GAAa;EAAvD,IAAkE,KAAxE;EAEA,MAAM,KAAK,GAAG,aAAA,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,eAAe,CAA0B,QAA1B,CAAhD,GAAsF,SAApG;EAEA,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAZ,CAAnD;EAEA,MAAM;IAAE;EAAF,IAAwB,kBAAkB,EAAhD;EAEA,MAAM,WAAW,GAAG,gBAAgB,CACjC,KAAD,IAAoF;;;IAClF,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,OAAb,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAApB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAL,EAAiC;MAC/B,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,cAFU;QAGhB,IAAI,EAAE,MAAM,KAAK;MAHD,CAAD,CAAjB;IAKD;EACF,CAViC,CAApC;EAaA,OAAO;IACL,QAAQ,EAAE,2BAA2B,CACnC,QADmC,EAEnC,kBAAkB,CAAC,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,QAAhB,IAA4B,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,GAA5C,GAAkD,KAAK,CAAC,IAAxD,GAA+D,KAAhE,EAAuE;MACvF,IAAI,EAAE,QADiF;MAEvF,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CAFuF;MAGvF,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,QAHqC;MAIvF,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAJ2E;MAKvF,OAAO,EAAE,WAL8E;MAMvF,GAAG;IANoF,CAAvE,CAFiB;EADhC,CAAP;AAaD,CArCM","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { DialogTriggerChildProps, DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = React.isValidElement(children) ? getTriggerChild<DialogTriggerChildProps>(children) : undefined;\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n return {\n children: applyTriggerPropsToChildren<DialogTriggerChildProps>(\n children,\n useARIAButtonProps(child?.type === 'button' || child?.type === 'a' ? child.type : 'div', {\n type: 'button',\n ...child?.props,\n 'aria-haspopup': action === 'close' ? undefined : 'dialog',\n ref: child?.ref as React.Ref<never>,\n onClick: handleClick,\n ...triggerAttributes,\n }),\n ),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';
|
|
2
|
+
export const SURFACE_PADDING = '24px';
|
|
3
|
+
export const DIALOG_GAP = '8px';
|
|
4
|
+
export const SURFACE_BORDER_RADIUS = '8px';
|
|
5
|
+
export const SURFACE_BORDER_WIDTH = '1px';
|
|
6
|
+
export const ACTIONS_START_GRID_AREA = 'actions-start';
|
|
7
|
+
export const ACTIONS_END_GRID_AREA = 'actions-end';
|
|
8
|
+
export const TITLE_GRID_AREA = 'title';
|
|
9
|
+
export const TITLE_ACTION_GRID_AREA = 'close-button';
|
|
10
|
+
export const CONTENT_GRID_AREA = 'body';
|
|
11
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC","sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_RADIUS = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n\nexport const ACTIONS_START_GRID_AREA = 'actions-start';\nexport const ACTIONS_END_GRID_AREA = 'actions-end';\nexport const TITLE_GRID_AREA = 'title';\nexport const TITLE_ACTION_GRID_AREA = 'close-button';\nexport const CONTENT_GRID_AREA = 'body';\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
|
+
const defaultContextValue = {
|
|
3
|
+
open: false,
|
|
4
|
+
modalType: 'modal',
|
|
5
|
+
isNestedDialog: false,
|
|
6
|
+
dialogRef: {
|
|
7
|
+
current: null
|
|
8
|
+
},
|
|
9
|
+
|
|
10
|
+
requestOpenChange() {
|
|
11
|
+
/* noop */
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
}; // Contexts should default to undefined
|
|
15
|
+
|
|
16
|
+
export const DialogContext = /*#__PURE__*/createContext(undefined);
|
|
17
|
+
export const DialogProvider = DialogContext.Provider;
|
|
18
|
+
export const useDialogContext_unstable = selector => useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));
|
|
19
|
+
//# sourceMappingURL=dialogContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/contexts/dialogContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAkBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,cAAc,EAAE,KAH8B;EAI9C,SAAS,EAAE;IAAE,OAAO,EAAE;EAAX,CAJmC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n open: boolean;\n dialogContentId?: string;\n dialogTitleId?: string;\n isNestedDialog: boolean;\n dialogRef: React.Ref<DialogSurfaceElement>;\n modalType: DialogModalType;\n /**\n * Requests dialog main component to update it's internal open state\n */\n requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n open: false,\n modalType: 'modal',\n isNestedDialog: false,\n dialogRef: { current: null },\n requestOpenChange() {\n /* noop */\n },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
const defaultContextValue = false;
|
|
3
|
+
export const DialogSurfaceContext = /*#__PURE__*/createContext(undefined);
|
|
4
|
+
export const DialogSurfaceProvider = DialogSurfaceContext.Provider;
|
|
5
|
+
export const useDialogSurfaceContext_unstable = () => {
|
|
6
|
+
var _a;
|
|
7
|
+
|
|
8
|
+
return (_a = useContext(DialogSurfaceContext)) !== null && _a !== void 0 ? _a : defaultContextValue;
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=dialogSurfaceContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/contexts/dialogSurfaceContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,UAAxB,QAA0C,OAA1C;AAIA,MAAM,mBAAmB,GAA8B,KAAvD;AAEA,OAAO,MAAM,oBAAoB,gBAAG,aAAa,CAAwC,SAAxC,CAA1C;AAEP,OAAO,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,QAAnD;AAEP,OAAO,MAAM,gCAAgC,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,UAAU,CAAC,oBAAD,CAAV,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,EAAhC,GAAoC,mBAApC;AAAuD,CAAtG","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './constants';\nexport * from './dialogContext';\nexport * from './dialogSurfaceContext';\n"]}
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';
|
|
2
|
+
export { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';
|
|
3
|
+
export { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from './DialogActions';
|
|
4
|
+
export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from './DialogBody';
|
|
5
|
+
export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';
|
|
6
|
+
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable } from './DialogSurface';
|
|
7
|
+
export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,EAAiB,qBAAjB,EAAwC,kBAAxC,QAAkE,UAAlE;AAUA,SAAS,aAAT,EAAwB,yBAAxB,EAAmD,4BAAnD,QAAuF,iBAAvF;AAQA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AAcA,SACE,UADF,EAEE,oBAFF,EAGE,sBAHF,EAIE,4BAJF,EAKE,yBALF,QAMO,cANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,6BAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP","sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n DialogSlots,\n DialogProps,\n DialogState,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n DialogTriggerProps,\n DialogTriggerChildProps,\n DialogTriggerState,\n DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n DialogActions,\n dialogActionsClassNames,\n useDialogActions_unstable,\n useDialogActionsStyles_unstable,\n renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n DialogBody,\n dialogBodyClassNames,\n useDialogBody_unstable,\n useDialogBodyStyles_unstable,\n renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n DialogTitle,\n dialogTitleClassNames,\n useDialogTitle_unstable,\n useDialogTitleStyles_unstable,\n renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n useDialogSurface_unstable,\n useDialogSurfaceStyles_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState, DialogSurfaceElement } 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"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\nexport * from './isHTMLDialogElement';\nexport * from './useControlNativeDialogOpenState';\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Escape } from '@fluentui/keyboard-keys';
|
|
2
|
+
import { isHTMLDialogElement } from './isHTMLDialogElement';
|
|
3
|
+
/**
|
|
4
|
+
* Checks if keydown event is a proper Escape key dismiss
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export function isEscapeKeyDismiss(event, modalType) {
|
|
8
|
+
return event.key === Escape && ( // `non-modal` should always have Escape key handling
|
|
9
|
+
// `modal` should only be handled in the case of non native dialog
|
|
10
|
+
modalType === 'non-modal' || !isHTMLDialogElement(event.currentTarget) && modalType === 'modal') && !event.isDefaultPrevented();
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=isEscapeKeyDown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;AAGA,SAAS,mBAAT,QAAoC,uBAApC;AAEA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CACJ,KADI,EAEJ,SAFI,EAEsB;EAE1B,OACE,KAAK,CAAC,GAAN,KAAc,MAAd,MACA;EACA;EACC,SAAS,KAAK,WAAd,IAA8B,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAP,CAApB,IAA6C,SAAS,KAAK,OAH1F,KAIA,CAAC,KAAK,CAAC,kBAAN,EALH;AAOD","sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(\n event: React.KeyboardEvent<DialogSurfaceElement>,\n modalType: DialogModalType,\n): boolean {\n return (\n event.key === Escape &&\n // `non-modal` should always have Escape key handling\n // `modal` should only be handled in the case of non native dialog\n (modalType === 'non-modal' || (!isHTMLDialogElement(event.currentTarget) && modalType === 'modal')) &&\n !event.isDefaultPrevented()\n );\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/isHTMLDialogElement.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,mBAAV,CAA8B,OAA9B,EAA0D;EAC9D,OAAO,OAAO,CAAC,OAAO,IAAI,UAAU,OAArB,IAAgC,UAAU,OAA1C,IAAqD,eAAe,OAApE,IAA+E,WAAW,OAA3F,CAAd;AACD","sourcesContent":["import * as React from 'react';\n\nexport function isHTMLDialogElement(element?: HTMLElement | null): element is HTMLDialogElement {\n return Boolean(element && 'open' in element && 'show' in element && 'showModal' in element && 'close' in element);\n}\n\n/**\n * adds additional types which are missing from current version of react\n * @internal\n */\nexport type HTMLDialogElementProps = JSX.IntrinsicElements['dialog'] & {\n /**\n * The close event is fired on a <dialog> when it has been closed.\n */\n onClose?: (event: React.SyntheticEvent) => void;\n /**\n * The cancel event fires on a <dialog> when\n * the user instructs the browser that they wish to dismiss the current open dialog.\n * For example, the browser might fire this event when the user presses the Esc\n * key.\n */\n onCancel?: (event: React.SyntheticEvent) => void;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { isHTMLDialogElement } from './isHTMLDialogElement';
|
|
3
|
+
export function useControlNativeDialogOpenState(open, modalType) {
|
|
4
|
+
const dialogSurfaceRef = React.useRef(null);
|
|
5
|
+
React.useEffect(() => {
|
|
6
|
+
if (isHTMLDialogElement(dialogSurfaceRef.current) && dialogSurfaceRef.current.open !== open) {
|
|
7
|
+
if (open) {
|
|
8
|
+
if (modalType === 'non-modal') {
|
|
9
|
+
dialogSurfaceRef.current.show();
|
|
10
|
+
} else {
|
|
11
|
+
dialogSurfaceRef.current.showModal();
|
|
12
|
+
}
|
|
13
|
+
} else {
|
|
14
|
+
dialogSurfaceRef.current.close();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}, [open, modalType]);
|
|
18
|
+
return dialogSurfaceRef;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=useControlNativeDialogOpenState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useControlNativeDialogOpenState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA,OAAM,SAAU,+BAAV,CAA0C,IAA1C,EAAyD,SAAzD,EAAmF;EACvF,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAN,CAAmC,IAAnC,CAAzB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,mBAAmB,CAAC,gBAAgB,CAAC,OAAlB,CAAnB,IAAiD,gBAAgB,CAAC,OAAjB,CAAyB,IAAzB,KAAkC,IAAvF,EAA6F;MAC3F,IAAI,IAAJ,EAAU;QACR,IAAI,SAAS,KAAK,WAAlB,EAA+B;UAC7B,gBAAgB,CAAC,OAAjB,CAAyB,IAAzB;QACD,CAFD,MAEO;UACL,gBAAgB,CAAC,OAAjB,CAAyB,SAAzB;QACD;MACF,CAND,MAMO;QACL,gBAAgB,CAAC,OAAjB,CAAyB,KAAzB;MACD;IACF;EACF,CAZD,EAYG,CAAC,IAAD,EAAO,SAAP,CAZH;EAcA,OAAO,gBAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\nimport type { DialogModalType } from '../Dialog';\nimport type { DialogSurfaceElement } from '../DialogSurface';\n\nexport function useControlNativeDialogOpenState(open: boolean, modalType: DialogModalType) {\n const dialogSurfaceRef = React.useRef<DialogSurfaceElement>(null);\n\n React.useEffect(() => {\n if (isHTMLDialogElement(dialogSurfaceRef.current) && dialogSurfaceRef.current.open !== open) {\n if (open) {\n if (modalType === 'non-modal') {\n dialogSurfaceRef.current.show();\n } else {\n dialogSurfaceRef.current.showModal();\n }\n } else {\n dialogSurfaceRef.current.close();\n }\n }\n }, [open, modalType]);\n\n return dialogSurfaceRef;\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
const disableScrollElementProp = '__fluentDisableScrollElement';
|
|
4
|
+
/**
|
|
5
|
+
* hook that disables body scrolling through `overflow: hidden` CSS property
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export function useDisableBodyScroll() {
|
|
9
|
+
const {
|
|
10
|
+
targetDocument
|
|
11
|
+
} = useFluent_unstable();
|
|
12
|
+
return useCallback(() => {
|
|
13
|
+
if (targetDocument) {
|
|
14
|
+
return disableScroll(targetDocument.body);
|
|
15
|
+
}
|
|
16
|
+
}, [targetDocument]);
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* disables scrolling from a given element through `overflow: hidden` CSS property
|
|
20
|
+
* @param target - element to disable scrolling from
|
|
21
|
+
* @returns a method for enabling scrolling again
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
export function disableScroll(target) {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
|
|
27
|
+
const {
|
|
28
|
+
clientWidth
|
|
29
|
+
} = target.ownerDocument.documentElement;
|
|
30
|
+
const innerWidth = (_b = (_a = target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.innerWidth) !== null && _b !== void 0 ? _b : 0;
|
|
31
|
+
assertIsDisableScrollElement(target);
|
|
32
|
+
|
|
33
|
+
if (target[disableScrollElementProp].count === 0) {
|
|
34
|
+
target.style.overflow = 'hidden';
|
|
35
|
+
target.style.paddingRight = `${innerWidth - clientWidth}px`;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
target[disableScrollElementProp].count++;
|
|
39
|
+
return () => {
|
|
40
|
+
target[disableScrollElementProp].count--;
|
|
41
|
+
|
|
42
|
+
if (target[disableScrollElementProp].count === 0) {
|
|
43
|
+
target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;
|
|
44
|
+
target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function assertIsDisableScrollElement(element) {
|
|
50
|
+
var _a;
|
|
51
|
+
|
|
52
|
+
var _b;
|
|
53
|
+
|
|
54
|
+
(_a = (_b = element)[disableScrollElementProp]) !== null && _a !== void 0 ? _a : _b[disableScrollElementProp] = {
|
|
55
|
+
count: 0,
|
|
56
|
+
previousOverflowStyle: element.style.overflow,
|
|
57
|
+
previousPaddingRightStyle: element.style.paddingRight
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=useDisableBodyScroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,iCAAnC;AACA,SAAS,WAAT,QAA4B,OAA5B;AAEA,MAAM,wBAAwB,GAAG,8BAAjC;AAUA;;AAEG;;AACH,OAAM,SAAU,oBAAV,GAA8B;EAClC,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,OAAO,WAAW,CAAC,MAAK;IACtB,IAAI,cAAJ,EAAoB;MAClB,OAAO,aAAa,CAAC,cAAc,CAAC,IAAhB,CAApB;IACD;EACF,CAJiB,EAIf,CAAC,cAAD,CAJe,CAAlB;AAKD;AAED;;;;AAIG;;AACH,OAAM,SAAU,aAAV,CAAwB,MAAxB,EAA2C;;;EAC/C,MAAM;IAAE;EAAF,IAAkB,MAAM,CAAC,aAAP,CAAqB,eAA7C;EACA,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,aAAP,CAAqB,WAArB,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,KAAA,CAAhC,GAAgC,EAAA,CAAE,UAAlC,MAA4C,IAA5C,IAA4C,EAAA,KAAA,KAAA,CAA5C,GAA4C,EAA5C,GAAgD,CAAnE;EACA,4BAA4B,CAAC,MAAD,CAA5B;;EACA,IAAI,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC,KAA2C,CAA/C,EAAkD;IAChD,MAAM,CAAC,KAAP,CAAa,QAAb,GAAwB,QAAxB;IACA,MAAM,CAAC,KAAP,CAAa,YAAb,GAA4B,GAAG,UAAU,GAAG,WAAW,IAAvD;EACD;;EACD,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC;EACA,OAAO,MAAK;IACV,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC;;IACA,IAAI,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC,KAA2C,CAA/C,EAAkD;MAChD,MAAM,CAAC,KAAP,CAAa,QAAb,GAAwB,MAAM,CAAC,wBAAD,CAAN,CAAiC,qBAAzD;MACA,MAAM,CAAC,KAAP,CAAa,YAAb,GAA4B,MAAM,CAAC,wBAAD,CAAN,CAAiC,yBAA7D;IACD;EACF,CAND;AAOD;;AAED,SAAS,4BAAT,CAAsC,OAAtC,EAA0D;;;;;EACxD,CAAA,EAAA,GAAA,CAAA,EAAA,GAAC,OAAD,EAAwC,wBAAxC,CAAA,MAAgE,IAAhE,IAAgE,EAAA,KAAA,KAAA,CAAhE,GAAgE,EAAhE,GAAgE,EAAA,CAAxB,wBAAwB,CAAA,GAAM;IACpE,KAAK,EAAE,CAD6D;IAEpE,qBAAqB,EAAE,OAAO,CAAC,KAAR,CAAc,QAF+B;IAGpE,yBAAyB,EAAE,OAAO,CAAC,KAAR,CAAc;EAH2B,CAAtE;AAKD","sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nconst disableScrollElementProp = '__fluentDisableScrollElement' as const;\n\ntype FluentDisableScrollElement = HTMLElement & {\n [disableScrollElementProp]: {\n count: number;\n previousOverflowStyle: string;\n previousPaddingRightStyle: string;\n };\n};\n\n/**\n * hook that disables body scrolling through `overflow: hidden` CSS property\n */\nexport function useDisableBodyScroll() {\n const { targetDocument } = useFluent_unstable();\n return useCallback(() => {\n if (targetDocument) {\n return disableScroll(targetDocument.body);\n }\n }, [targetDocument]);\n}\n\n/**\n * disables scrolling from a given element through `overflow: hidden` CSS property\n * @param target - element to disable scrolling from\n * @returns a method for enabling scrolling again\n */\nexport function disableScroll(target: HTMLElement) {\n const { clientWidth } = target.ownerDocument.documentElement;\n const innerWidth = target.ownerDocument.defaultView?.innerWidth ?? 0;\n assertIsDisableScrollElement(target);\n if (target[disableScrollElementProp].count === 0) {\n target.style.overflow = 'hidden';\n target.style.paddingRight = `${innerWidth - clientWidth}px`;\n }\n target[disableScrollElementProp].count++;\n return () => {\n target[disableScrollElementProp].count--;\n if (target[disableScrollElementProp].count === 0) {\n target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;\n target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;\n }\n };\n}\n\nfunction assertIsDisableScrollElement(element: HTMLElement): asserts element is FluentDisableScrollElement {\n (element as FluentDisableScrollElement)[disableScrollElementProp] ??= {\n count: 0,\n previousOverflowStyle: element.style.overflow,\n previousPaddingRightStyle: element.style.paddingRight,\n };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
3
|
+
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
4
|
+
import { isHTMLDialogElement } from './isHTMLDialogElement';
|
|
5
|
+
/**
|
|
6
|
+
* Focus first element on content when dialog is opened,
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export function useFocusFirstElement(open, modalType) {
|
|
10
|
+
const {
|
|
11
|
+
findFirstFocusable
|
|
12
|
+
} = useFocusFinders();
|
|
13
|
+
const {
|
|
14
|
+
targetDocument
|
|
15
|
+
} = useFluent_unstable();
|
|
16
|
+
const dialogRef = React.useRef(null);
|
|
17
|
+
const triggerRef = React.useRef();
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
var _a, _b;
|
|
20
|
+
|
|
21
|
+
if (!open) {
|
|
22
|
+
return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
triggerRef.current = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
|
|
26
|
+
const element = dialogRef.current && findFirstFocusable(dialogRef.current);
|
|
27
|
+
|
|
28
|
+
if (element) {
|
|
29
|
+
// this is only required for non native dialogs
|
|
30
|
+
if (!isHTMLDialogElement(dialogRef.current)) {
|
|
31
|
+
element.focus();
|
|
32
|
+
}
|
|
33
|
+
} else if (process.env.NODE_ENV !== 'production') {
|
|
34
|
+
(_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.blur(); // eslint-disable-next-line no-console
|
|
35
|
+
|
|
36
|
+
console.warn('A Dialog should have at least one focusable element inside DialogSurface');
|
|
37
|
+
}
|
|
38
|
+
}, [findFirstFocusable, open, modalType, targetDocument]);
|
|
39
|
+
return dialogRef;
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=useFocusFirstElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,kBAAT,QAAmC,iCAAnC;AAGA,SAAS,mBAAT,QAAoC,uBAApC;AAEA;;AAEG;;AACH,OAAM,SAAU,oBAAV,CAA+B,IAA/B,EAA8C,SAA9C,EAAwE;EAC5E,MAAM;IAAE;EAAF,IAAyB,eAAe,EAA9C;EACA,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAAmC,IAAnC,CAAlB;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,EAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;IACnB,IAAI,CAAC,IAAL,EAAW;MACT,OAAO,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAAF,EAAzB;IACD;;IACD,UAAU,CAAC,OAAX,GAAqB,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAArC;IACA,MAAM,OAAO,GAAG,SAAS,CAAC,OAAV,IAAqB,kBAAkB,CAAC,SAAS,CAAC,OAAX,CAAvD;;IACA,IAAI,OAAJ,EAAa;MACX;MACA,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,OAAX,CAAxB,EAA6C;QAC3C,OAAO,CAAC,KAAR;MACD;IACF,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;MAChD,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,IAAF,EAAlB,CADgD,CAEhD;;MACA,OAAO,CAAC,IAAR,CAAa,0EAAb;IACD;EACF,CAhBD,EAgBG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,SAA3B,EAAsC,cAAtC,CAhBH;EAkBA,OAAO,SAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n const { findFirstFocusable } = useFocusFinders();\n const { targetDocument } = useFluent_unstable();\n const dialogRef = React.useRef<DialogSurfaceElement>(null);\n const triggerRef = React.useRef<HTMLElement>();\n\n React.useEffect(() => {\n if (!open) {\n return triggerRef.current?.focus();\n }\n triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;\n const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n if (element) {\n // this is only required for non native dialogs\n if (!isHTMLDialogElement(dialogRef.current)) {\n element.focus();\n }\n } else if (process.env.NODE_ENV !== 'production') {\n triggerRef.current?.blur();\n // eslint-disable-next-line no-console\n console.warn('A Dialog should have at least one focusable element inside DialogSurface');\n }\n }, [findFirstFocusable, open, modalType, targetDocument]);\n\n return dialogRef;\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/Dialog.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dialog/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/DialogActions.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogActions/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/DialogBody.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogBody/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/DialogContent.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogContent/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/DialogSurface.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogSurface/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/DialogTitle.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogTitle/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/DialogTrigger.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogTrigger/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Dialog = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const useDialog_1 = /*#__PURE__*/require("./useDialog");
|
|
11
|
+
|
|
12
|
+
const renderDialog_1 = /*#__PURE__*/require("./renderDialog");
|
|
13
|
+
|
|
14
|
+
const useDialogContextValues_1 = /*#__PURE__*/require("./useDialogContextValues");
|
|
15
|
+
/**
|
|
16
|
+
* The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
|
|
17
|
+
* It provides context down the hierarchy to `children` compound components to allow functionality.
|
|
18
|
+
* This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`
|
|
19
|
+
* and a `DialogSurface` (or some component that will eventually render one of those compound components)
|
|
20
|
+
* in this specific order
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
exports.Dialog = /*#__PURE__*/React.memo(props => {
|
|
25
|
+
const state = useDialog_1.useDialog_unstable(props);
|
|
26
|
+
const contextValues = useDialogContextValues_1.useDialogContextValues_unstable(state);
|
|
27
|
+
return renderDialog_1.renderDialog_unstable(state, contextValues);
|
|
28
|
+
});
|
|
29
|
+
exports.Dialog.displayName = 'Dialog';
|
|
30
|
+
//# sourceMappingURL=Dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAEA;;;;;;AAMG;;;AACU,OAAA,CAAA,MAAA,gBAAgC,KAAK,CAAC,IAAN,CAAW,KAAK,IAAG;EAC9D,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAd;EACA,MAAM,aAAa,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,CAAtB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,aAA7B,CAAP;AACD,CAL4C,CAAhC;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n const state = useDialog_unstable(props);\n const contextValues = useDialogContextValues_unstable(state);\n\n return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
+
|
|
9
|
+
tslib_1.__exportStar(require("./Dialog"), exports);
|
|
10
|
+
|
|
11
|
+
tslib_1.__exportStar(require("./Dialog.types"), exports);
|
|
12
|
+
|
|
13
|
+
tslib_1.__exportStar(require("./renderDialog"), exports);
|
|
14
|
+
|
|
15
|
+
tslib_1.__exportStar(require("./useDialog"), exports);
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.renderDialog_unstable = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const contexts_1 = /*#__PURE__*/require("../../contexts");
|
|
11
|
+
/**
|
|
12
|
+
* Render the final JSX of Dialog
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
const renderDialog_unstable = (state, contextValues) => {
|
|
17
|
+
const {
|
|
18
|
+
content,
|
|
19
|
+
trigger
|
|
20
|
+
} = state;
|
|
21
|
+
return React.createElement(contexts_1.DialogProvider, {
|
|
22
|
+
value: contextValues.dialog
|
|
23
|
+
}, React.createElement(contexts_1.DialogSurfaceProvider, {
|
|
24
|
+
value: contextValues.dialogSurface
|
|
25
|
+
}, trigger, content));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
exports.renderDialog_unstable = renderDialog_unstable;
|
|
29
|
+
//# sourceMappingURL=renderDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,EACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n const { content, trigger } = state;\n\n return (\n <DialogProvider value={contextValues.dialog}>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n {trigger}\n {content}\n </DialogSurfaceProvider>\n </DialogProvider>\n );\n};\n"],"sourceRoot":"../src/"}
|