@fluentui/react-dialog 9.0.0-beta.7
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 +328 -0
- package/CHANGELOG.md +152 -0
- package/LICENSE +15 -0
- package/README.md +5 -0
- package/Spec.md +518 -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 +406 -0
- package/dist/tsdoc-metadata.json +11 -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/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 +21 -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 +6 -0
- package/lib/components/Dialog/index.js.map +1 -0
- package/lib/components/Dialog/renderDialog.js +26 -0
- package/lib/components/Dialog/renderDialog.js.map +1 -0
- package/lib/components/Dialog/useDialog.js +197 -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/Dialog/useDialogStyles.js +41 -0
- package/lib/components/Dialog/useDialogStyles.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 +51 -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 +42 -0
- package/lib/components/DialogBody/useDialogBodyStyles.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 +18 -0
- package/lib/components/DialogSurface/renderDialogSurface.js.map +1 -0
- package/lib/components/DialogSurface/useDialogSurface.js +59 -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 +78 -0
- package/lib/components/DialogSurface/useDialogSurfaceStyles.js.map +1 -0
- package/lib/components/DialogTitle/DialogTitle.js +17 -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 +19 -0
- package/lib/components/DialogTitle/renderDialogTitle.js.map +1 -0
- package/lib/components/DialogTitle/useDialogTitle.js +42 -0
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -0
- package/lib/components/DialogTitle/useDialogTitleStyles.js +109 -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 +65 -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 +21 -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 +7 -0
- package/lib/index.js.map +1 -0
- package/lib/utils/index.js +5 -0
- package/lib/utils/index.js.map +1 -0
- package/lib/utils/isEscapeKeyDown.js +11 -0
- package/lib/utils/isEscapeKeyDown.js.map +1 -0
- package/lib/utils/isTargetDisabled.js +14 -0
- package/lib/utils/isTargetDisabled.js.map +1 -0
- package/lib/utils/localShorthands.js +9 -0
- package/lib/utils/localShorthands.js.map +1 -0
- package/lib/utils/normalizeDefaultPrevented.js +11 -0
- package/lib/utils/normalizeDefaultPrevented.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/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 +33 -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 +18 -0
- package/lib-commonjs/components/Dialog/index.js.map +1 -0
- package/lib-commonjs/components/Dialog/renderDialog.js +39 -0
- package/lib-commonjs/components/Dialog/renderDialog.js.map +1 -0
- package/lib-commonjs/components/Dialog/useDialog.js +211 -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/Dialog/useDialogStyles.js +53 -0
- package/lib-commonjs/components/Dialog/useDialogStyles.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 +63 -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 +36 -0
- package/lib-commonjs/components/DialogBody/useDialogBody.js.map +1 -0
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js +55 -0
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.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 +30 -0
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js.map +1 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +72 -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 +90 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/DialogTitle.js +28 -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 +31 -0
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js +56 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -0
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js +123 -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 +80 -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 +32 -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 +193 -0
- package/lib-commonjs/index.js.map +1 -0
- package/lib-commonjs/utils/index.js +16 -0
- package/lib-commonjs/utils/index.js.map +1 -0
- package/lib-commonjs/utils/isEscapeKeyDown.js +22 -0
- package/lib-commonjs/utils/isEscapeKeyDown.js.map +1 -0
- package/lib-commonjs/utils/isTargetDisabled.js +23 -0
- package/lib-commonjs/utils/isTargetDisabled.js.map +1 -0
- package/lib-commonjs/utils/localShorthands.js +18 -0
- package/lib-commonjs/utils/localShorthands.js.map +1 -0
- package/lib-commonjs/utils/normalizeDefaultPrevented.js +20 -0
- package/lib-commonjs/utils/normalizeDefaultPrevented.js.map +1 -0
- package/package.json +69 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogSurface/DialogSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAGA,SAAS,sCAAT,QAAuD,iCAAvD;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,MAAM,aAAa,GAAG,sCAAsC,CAAC,KAAD,CAA5D;EAEA,+BAA+B,CAAC,KAAD,CAA/B;EACA,OAAO,4BAA4B,CAAC,KAAD,EAAQ,aAAR,CAAnC;AACD,CANqE,CAA/D;AAQP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n const state = useDialogSurface_unstable(props, ref);\n const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n useDialogSurfaceStyles_unstable(state);\n return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogSurface.types.js","sourceRoot":"../src/","sources":["components/DialogSurface/DialogSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n root: Slot<'div', 'main'>;\n};\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & {};\n\nexport type DialogSurfaceContextValues = {\n dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogSurface/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles';\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
|
3
|
+
import { DialogSurfaceProvider } from '../../contexts';
|
|
4
|
+
/**
|
|
5
|
+
* Render the final JSX of DialogSurface
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const renderDialogSurface_unstable = (state, contextValues) => {
|
|
9
|
+
const {
|
|
10
|
+
slots,
|
|
11
|
+
slotProps
|
|
12
|
+
} = getSlots(state);
|
|
13
|
+
return /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
|
|
14
|
+
value: contextValues.dialogSurface
|
|
15
|
+
}, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
16
|
+
}));
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=renderDialogSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogSurface/renderDialogSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,qBAAT,QAAsC,gBAAtC;AAEA;;AAEG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;EACnH,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAqB,KAArB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n const { slots, slotProps } = getSlots<DialogSurfaceSlots>(state);\n\n return (\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n <slots.root {...slotProps.root} />\n </DialogSurfaceProvider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
2
|
+
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
3
|
+
import { useDialogContext_unstable } from '../../contexts';
|
|
4
|
+
import { isEscapeKeyDismiss } from '../../utils';
|
|
5
|
+
/**
|
|
6
|
+
* Create the state required to render DialogSurface.
|
|
7
|
+
*
|
|
8
|
+
* The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,
|
|
9
|
+
* before being passed to renderDialogSurface_unstable.
|
|
10
|
+
*
|
|
11
|
+
* @param props - props from this instance of DialogSurface
|
|
12
|
+
* @param ref - reference to root HTMLElement of DialogSurface
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
export const useDialogSurface_unstable = (props, ref) => {
|
|
16
|
+
const modalType = useDialogContext_unstable(ctx => ctx.modalType);
|
|
17
|
+
const {
|
|
18
|
+
as = 'div'
|
|
19
|
+
} = props;
|
|
20
|
+
const contentRef = useDialogContext_unstable(ctx => ctx.contentRef);
|
|
21
|
+
const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleID);
|
|
22
|
+
const dialogBodyID = useDialogContext_unstable(ctx => ctx.dialogBodyID);
|
|
23
|
+
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
24
|
+
const {
|
|
25
|
+
modalAttributes
|
|
26
|
+
} = useModalAttributes({
|
|
27
|
+
trapFocus: modalType !== 'non-modal'
|
|
28
|
+
});
|
|
29
|
+
const handleRootKeyDown = useEventCallback(event => {
|
|
30
|
+
var _a;
|
|
31
|
+
|
|
32
|
+
(_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
33
|
+
|
|
34
|
+
if (isEscapeKeyDismiss(event, modalType)) {
|
|
35
|
+
requestOpenChange({
|
|
36
|
+
event,
|
|
37
|
+
open: false,
|
|
38
|
+
type: 'escapeKeyDown'
|
|
39
|
+
});
|
|
40
|
+
event.preventDefault();
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
return {
|
|
44
|
+
components: {
|
|
45
|
+
root: 'div'
|
|
46
|
+
},
|
|
47
|
+
root: getNativeElementProps(as, {
|
|
48
|
+
ref: useMergedRefs(ref, contentRef),
|
|
49
|
+
'aria-modal': modalType !== 'non-modal',
|
|
50
|
+
'aria-describedby': dialogBodyID,
|
|
51
|
+
'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
|
|
52
|
+
role: modalType === 'alert' ? 'alertdialog' : 'dialog',
|
|
53
|
+
...props,
|
|
54
|
+
...modalAttributes,
|
|
55
|
+
onKeyDown: handleRootKeyDown
|
|
56
|
+
})
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=useDialogSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogSurface/useDialogSurface.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AACA,SAAS,kBAAT,QAAmC,yBAAnC;AAEA,SAAS,yBAAT,QAA0C,gBAA1C;AACA,SAAS,kBAAT,QAAmC,aAAnC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EACA,MAAM;IAAE,EAAE,GAAG;EAAP,IAAiB,KAAvB;EAEA,MAAM,UAAU,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,UAAZ,CAA5C;EACA,MAAM,aAAa,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,aAAZ,CAA/C;EACA,MAAM,YAAY,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,YAAZ,CAA9C;EACA,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAZ,CAAnD;EAEA,MAAM;IAAE;EAAF,IAAsB,kBAAkB,CAAC;IAAE,SAAS,EAAE,SAAS,KAAK;EAA3B,CAAD,CAA9C;EAEA,MAAM,iBAAiB,GAAG,gBAAgB,CAAE,KAAD,IAA+C;;;IACxF,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAA,IAAA,CAAf,KAAe,EAAG,KAAH,CAAf;;IACA,IAAI,kBAAkB,CAAC,KAAD,EAAQ,SAAR,CAAtB,EAA0C;MACxC,iBAAiB,CAAC;QAAE,KAAF;QAAS,IAAI,EAAE,KAAf;QAAsB,IAAI,EAAE;MAA5B,CAAD,CAAjB;MACA,KAAK,CAAC,cAAN;IACD;EACF,CANyC,CAA1C;EAQA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;MAC9B,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,UAAN,CADY;MAE9B,cAAc,SAAS,KAAK,WAFE;MAG9B,oBAAoB,YAHU;MAI9B,mBAAmB,KAAK,CAAC,YAAD,CAAL,GAAsB,SAAtB,GAAkC,aAJvB;MAK9B,IAAI,EAAE,SAAS,KAAK,OAAd,GAAwB,aAAxB,GAAwC,QALhB;MAM9B,GAAG,KAN2B;MAO9B,GAAG,eAP2B;MAQ9B,SAAS,EAAE;IARmB,CAAL;EAJtB,CAAP;AAeD,CArCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport type { DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss } from '../../utils';\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<HTMLElement>,\n): DialogSurfaceState => {\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const { as = 'div' } = props;\n\n const contentRef = useDialogContext_unstable(ctx => ctx.contentRef);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleID);\n const dialogBodyID = useDialogContext_unstable(ctx => ctx.dialogBodyID);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n const { modalAttributes } = useModalAttributes({ trapFocus: modalType !== 'non-modal' });\n\n const handleRootKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n if (isEscapeKeyDismiss(event, modalType)) {\n requestOpenChange({ event, open: false, type: 'escapeKeyDown' });\n event.preventDefault();\n }\n });\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps(as, {\n ref: useMergedRefs(ref, contentRef),\n 'aria-modal': modalType !== 'non-modal',\n 'aria-describedby': dialogBodyID,\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n ...props,\n ...modalAttributes,\n onKeyDown: handleRootKeyDown,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogSurface/useDialogSurfaceContextValues.ts"],"names":[],"mappings":"AAGA,OAAM,SAAU,sCAAV,CAAiD,KAAjD,EAA0E;EAC9E,MAAM,aAAa,GAA8B,IAAjD;EAEA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n const dialogSurface: DialogSurfaceContextValue = true;\n\n return { dialogSurface };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
import { TITLE_GRID_AREA, ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, SURFACE_BORDER_RADIUS, SURFACE_BORDER_WIDTH, SURFACE_PADDING, DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, BODY_GRID_AREA, CLOSE_BUTTON_GRID_AREA } from '../../contexts/constants';
|
|
4
|
+
export const dialogSurfaceClassNames = {
|
|
5
|
+
root: 'fui-DialogSurface'
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Styles for the root slot
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
const useStyles = /*#__PURE__*/__styles({
|
|
12
|
+
"root": {
|
|
13
|
+
"qhf8xq": "f19dog8a",
|
|
14
|
+
"Bhzewxz": "f1i1t8d1",
|
|
15
|
+
"oyh7mz": ["f1ktbn1t", "ffenbu1"],
|
|
16
|
+
"Bz10aip": ["foouk8k", "fd9rb4b"],
|
|
17
|
+
"a9b677": "fly5x3f",
|
|
18
|
+
"Bqenvij": "f3052tw",
|
|
19
|
+
"B2u0y6b": "fvgz9i8",
|
|
20
|
+
"Bxyxcbc": "f6a9g1z",
|
|
21
|
+
"B7ck84d": "f1ewtqcl",
|
|
22
|
+
"E5pizo": "f10nrhrw",
|
|
23
|
+
"De3pzq": "fxugw4r",
|
|
24
|
+
"i8kkvl": "f4px1ci",
|
|
25
|
+
"Belr9w4": "fn67r4l",
|
|
26
|
+
"B4j52fo": "f5ogflp",
|
|
27
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
28
|
+
"Bn0qgzm": "f1f09k3d",
|
|
29
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
30
|
+
"icvyot": "fzkkow9",
|
|
31
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
32
|
+
"oivjwe": "fg706s2",
|
|
33
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
34
|
+
"g2u3we": "fghlq4f",
|
|
35
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
36
|
+
"B9xav0g": "fb073pr",
|
|
37
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
38
|
+
"Bbmb7ep": ["f1erghxr", "f1ehz9de"],
|
|
39
|
+
"Beyfa6y": ["f1ehz9de", "f1erghxr"],
|
|
40
|
+
"B7oj6ja": ["f1spoy8", "fmb70yw"],
|
|
41
|
+
"Btl43ni": ["fmb70yw", "f1spoy8"],
|
|
42
|
+
"B6of3ja": "fgr6219",
|
|
43
|
+
"t21cq0": ["f1ujusj6", "fcgxt0o"],
|
|
44
|
+
"jrapky": "f10jk5vf",
|
|
45
|
+
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
46
|
+
"mc9l5x": "f13qh94s",
|
|
47
|
+
"wkccdc": "f874eam",
|
|
48
|
+
"Budl1dq": "fjj47a5",
|
|
49
|
+
"zoa1oz": "f16o7v7l",
|
|
50
|
+
"z8tnut": "fuq56rw",
|
|
51
|
+
"z189sj": ["f15kemlc", "fdgang7"],
|
|
52
|
+
"Byoj8tv": "fl2zwns",
|
|
53
|
+
"uwmqm3": ["fdgang7", "f15kemlc"],
|
|
54
|
+
"B5xtmjs": "ff54dml",
|
|
55
|
+
"Bqu9lor": "f52bj20",
|
|
56
|
+
"B06wobe": "f1dangjo"
|
|
57
|
+
}
|
|
58
|
+
}, {
|
|
59
|
+
"d": [".f19dog8a{position:fixed;}", ".f1i1t8d1{top:50%;}", ".f1ktbn1t{left:50%;}", ".ffenbu1{right:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".f6a9g1z{max-height:100vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1erghxr{border-bottom-right-radius:8px;}", ".f1ehz9de{border-bottom-left-radius:8px;}", ".f1spoy8{border-top-right-radius:8px;}", ".fmb70yw{border-top-left-radius:8px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".f13qh94s{display:grid;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".f16o7v7l{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}"],
|
|
60
|
+
"m": [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
|
|
61
|
+
"m": "screen and (max-width: 480px)"
|
|
62
|
+
}], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
|
|
63
|
+
"m": "screen and (max-width: 480px)"
|
|
64
|
+
}], ["@media screen and (max-width: 480px){.f1dangjo{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-start actions-start\" \"actions-end actions-end actions-end\";}}", {
|
|
65
|
+
"m": "screen and (max-width: 480px)"
|
|
66
|
+
}]]
|
|
67
|
+
});
|
|
68
|
+
/**
|
|
69
|
+
* Apply styling to the DialogSurface slots based on the state
|
|
70
|
+
*/
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
export const useDialogSurfaceStyles_unstable = state => {
|
|
74
|
+
const styles = useStyles();
|
|
75
|
+
state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.root, state.root.className);
|
|
76
|
+
return state;
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=useDialogSurfaceStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SACE,eADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,qBAJF,EAKE,oBALF,EAME,eANF,EAOE,UAPF,EAQE,+BARF,EASE,cATF,EAUE,sBAVF,QAWO,0BAXP;AAaA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE;AADmE,CAApE;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAuCA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,MAAM,CAAC,IAAtC,EAA4C,KAAK,CAAC,IAAN,CAAW,SAAvD,CAAnC;EACA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n TITLE_GRID_AREA,\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n SURFACE_BORDER_RADIUS,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n DIALOG_GAP,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n BODY_GRID_AREA,\n CLOSE_BUTTON_GRID_AREA,\n} from '../../contexts/constants';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n root: 'fui-DialogSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '100%',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n boxShadow: tokens.shadow64,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.gap(DIALOG_GAP),\n ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n ...shorthands.borderRadius(SURFACE_BORDER_RADIUS),\n ...shorthands.margin('auto'),\n display: 'grid',\n gridTemplateRows: 'auto 1fr auto',\n gridTemplateColumns: '1fr 1fr auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${CLOSE_BUTTON_GRID_AREA}\"\n \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n ...shorthands.padding(SURFACE_PADDING),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${CLOSE_BUTTON_GRID_AREA}\"\n \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n },\n },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useDialogTitle_unstable } from './useDialogTitle';
|
|
3
|
+
import { renderDialogTitle_unstable } from './renderDialogTitle';
|
|
4
|
+
import { useDialogTitleStyles_unstable } from './useDialogTitleStyles';
|
|
5
|
+
/**
|
|
6
|
+
* The `DialogTitle` component will expect to have a dialog title/header
|
|
7
|
+
* and will show the close (X icon) button if specified so.
|
|
8
|
+
* Apart from styling and presenting `closeButton`, this component does not have other behavior.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
export const DialogTitle = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
12
|
+
const state = useDialogTitle_unstable(props, ref);
|
|
13
|
+
useDialogTitleStyles_unstable(state);
|
|
14
|
+
return renderDialogTitle_unstable(state);
|
|
15
|
+
});
|
|
16
|
+
DialogTitle.displayName = 'DialogTitle';
|
|
17
|
+
//# sourceMappingURL=DialogTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTitle/DialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;;AAIG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogTitle` component will expect to have a dialog title/header\n * and will show the close (X icon) button if specified so.\n * Apart from styling and presenting `closeButton`, this component does not have other behavior.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n const state = useDialogTitle_unstable(props, ref);\n\n useDialogTitleStyles_unstable(state);\n return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogTitle.types.js","sourceRoot":"../src/","sources":["components/DialogTitle/DialogTitle.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n /**\n * By default this is a div, but can be a heading.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n closeButton?: Slot<ARIAButtonSlotProps>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots> & {};\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './DialogTitle';\nexport * from './DialogTitle.types';\nexport * from './renderDialogTitle';\nexport * from './useDialogTitle';\nexport * from './useDialogTitleStyles';\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
|
3
|
+
import { DialogTrigger } from '../DialogTrigger';
|
|
4
|
+
/**
|
|
5
|
+
* Render the final JSX of DialogTitle
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const renderDialogTitle_unstable = state => {
|
|
9
|
+
const {
|
|
10
|
+
slots,
|
|
11
|
+
slotProps
|
|
12
|
+
} = getSlots(state);
|
|
13
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
14
|
+
}, slotProps.root.children), slots.closeButton && /*#__PURE__*/React.createElement(DialogTrigger, {
|
|
15
|
+
action: "close"
|
|
16
|
+
}, /*#__PURE__*/React.createElement(slots.closeButton, { ...slotProps.closeButton
|
|
17
|
+
})));
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=renderDialogTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTitle/renderDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,aAAT,QAA8B,kBAA9B;AAEA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,EAEG,KAAK,CAAC,WAAN,iBACC,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;IAAC,MAAM,EAAC;EAAR,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CADF,CAHJ,CADF;AAUD,CAbM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\nimport { DialogTrigger } from '../DialogTrigger';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n const { slots, slotProps } = getSlots<DialogTitleSlots>(state);\n\n return (\n <>\n <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n {slots.closeButton && (\n <DialogTrigger action=\"close\">\n <slots.closeButton {...slotProps.closeButton} />\n </DialogTrigger>\n )}\n </>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
3
|
+
import { useARIAButtonShorthand } from '@fluentui/react-aria';
|
|
4
|
+
import { useDialogContext_unstable } from '../../contexts/dialogContext';
|
|
5
|
+
import { Dismiss24Regular } from '@fluentui/react-icons';
|
|
6
|
+
/**
|
|
7
|
+
* Create the state required to render DialogTitle.
|
|
8
|
+
*
|
|
9
|
+
* The returned state can be modified with hooks such as useDialogTitleStyles_unstable,
|
|
10
|
+
* before being passed to renderDialogTitle_unstable.
|
|
11
|
+
*
|
|
12
|
+
* @param props - props from this instance of DialogTitle
|
|
13
|
+
* @param ref - reference to root HTMLElement of DialogTitle
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
export const useDialogTitle_unstable = (props, ref) => {
|
|
17
|
+
const {
|
|
18
|
+
as = 'div',
|
|
19
|
+
closeButton
|
|
20
|
+
} = props;
|
|
21
|
+
const modalType = useDialogContext_unstable(ctx => ctx.modalType);
|
|
22
|
+
return {
|
|
23
|
+
components: {
|
|
24
|
+
root: 'div',
|
|
25
|
+
closeButton: 'button'
|
|
26
|
+
},
|
|
27
|
+
root: getNativeElementProps(as, {
|
|
28
|
+
ref,
|
|
29
|
+
id: useDialogContext_unstable(ctx => ctx.dialogTitleID),
|
|
30
|
+
...props
|
|
31
|
+
}),
|
|
32
|
+
closeButton: useARIAButtonShorthand(closeButton, {
|
|
33
|
+
required: modalType === 'non-modal',
|
|
34
|
+
defaultProps: {
|
|
35
|
+
type: 'button',
|
|
36
|
+
'aria-label': 'close',
|
|
37
|
+
children: /*#__PURE__*/React.createElement(Dismiss24Regular, null)
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=useDialogTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,sBAAT,QAAuC,sBAAvC;AACA,SAAS,yBAAT,QAA0C,8BAA1C;AACA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAE,GAAG,KAAP;IAAc;EAAd,IAA8B,KAApC;EACA,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,WAAW,EAAE;IAFH,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;MAC9B,GAD8B;MAE9B,EAAE,EAAE,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,aAAZ,CAFC;MAG9B,GAAG;IAH2B,CAAL,CALtB;IAUL,WAAW,EAAE,sBAAsB,CAAC,WAAD,EAAc;MAC/C,QAAQ,EAAE,SAAS,KAAK,WADuB;MAE/C,YAAY,EAAE;QACZ,IAAI,EAAE,QADM;QAEZ,cAAc,OAFF;QAGZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB;MAHE;IAFiC,CAAd;EAV9B,CAAP;AAmBD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\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<HTMLElement>): DialogTitleState => {\n const { as = 'div', closeButton } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n\n return {\n components: {\n root: 'div',\n closeButton: 'button',\n },\n root: getNativeElementProps(as, {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleID),\n ...props,\n }),\n closeButton: useARIAButtonShorthand(closeButton, {\n required: modalType === 'non-modal',\n defaultProps: {\n type: 'button', // This is added because the default for type is 'submit'\n 'aria-label': 'close', // TODO: find a better way to add internal labels\n children: <Dismiss24Regular />,\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
|
+
import { typographyStyles } from '@fluentui/react-theme';
|
|
4
|
+
import { gridArea } from '../../utils/localShorthands';
|
|
5
|
+
import { CLOSE_BUTTON_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';
|
|
6
|
+
export const dialogTitleClassNames = {
|
|
7
|
+
root: 'fui-DialogTitle',
|
|
8
|
+
closeButton: 'fui-DialogTitle__closeButton'
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Styles for the root slot
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
const useStyles = /*#__PURE__*/__styles({
|
|
15
|
+
"root": {
|
|
16
|
+
"Bahqtrf": "fk6fouc",
|
|
17
|
+
"Be2twd7": "f1pp30po",
|
|
18
|
+
"Bhrd7zp": "fl43uef",
|
|
19
|
+
"Bg96gwp": "f106mvju",
|
|
20
|
+
"Ijaq50": "faq1aip",
|
|
21
|
+
"nk6f5a": "fv2srd9",
|
|
22
|
+
"Br312pm": "f1m489tg",
|
|
23
|
+
"Bw0ie65": "f1tz6hh8"
|
|
24
|
+
},
|
|
25
|
+
"rootWithoutCloseButton": {},
|
|
26
|
+
"rootWithCloseButton": {},
|
|
27
|
+
"closeButton": {
|
|
28
|
+
"qhf8xq": "f10pi13n",
|
|
29
|
+
"Bg96gwp": "fez10in",
|
|
30
|
+
"Bceei9c": "f1k6fduh",
|
|
31
|
+
"qb2dma": "f9h729m",
|
|
32
|
+
"Ijaq50": "f1hysmiz",
|
|
33
|
+
"nk6f5a": "f11nczdl",
|
|
34
|
+
"Br312pm": "f1379kmu",
|
|
35
|
+
"Bw0ie65": "f98d4vj"
|
|
36
|
+
},
|
|
37
|
+
"closeButtonFocusIndicator": {
|
|
38
|
+
"Brovlpu": "ftqa4ok",
|
|
39
|
+
"B486eqv": "f2hkw1w",
|
|
40
|
+
"Bvjrn4i": "fvvvjju",
|
|
41
|
+
"Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
|
|
42
|
+
"vkx7if": "f3za06g",
|
|
43
|
+
"Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
|
|
44
|
+
"Bpou26a": "f1l3yytu",
|
|
45
|
+
"Bxui8rh": "fnfm6nw",
|
|
46
|
+
"v96tid": "f19m7vnf",
|
|
47
|
+
"cyjxpb": "f8p7r4r",
|
|
48
|
+
"Bn0no95": "f1iilt6f",
|
|
49
|
+
"B573luj": ["f2keu4t", "f14fcfgr"],
|
|
50
|
+
"B639bv6": "faptqjd",
|
|
51
|
+
"shdfye": ["f14fcfgr", "f2keu4t"],
|
|
52
|
+
"gekwd": "fhcdesm",
|
|
53
|
+
"Du8lva": ["f17qorvy", "f1s68zmt"],
|
|
54
|
+
"Bxo5kf0": "f1kaw87x",
|
|
55
|
+
"G4c1lw": ["f1s68zmt", "f17qorvy"],
|
|
56
|
+
"B7295ny": ["fcxw5no", "f1klxzyg"],
|
|
57
|
+
"Bfl2641": ["f1klxzyg", "fcxw5no"],
|
|
58
|
+
"Bc850wg": ["f8h35c5", "f41fp59"],
|
|
59
|
+
"Bwbif6r": ["f41fp59", "f8h35c5"],
|
|
60
|
+
"Bc7x9ep": "f89yr8c",
|
|
61
|
+
"Btolfwl": ["f3vokhu", "fgoym2l"],
|
|
62
|
+
"nuwgkz": "f1b662q1",
|
|
63
|
+
"iduwum": ["fgoym2l", "f3vokhu"],
|
|
64
|
+
"zp4aim": "fn1y60j",
|
|
65
|
+
"Br8g1vq": "f197ac7e",
|
|
66
|
+
"s8cxrh": ["f1yd45vn", "f1w8wcpf"],
|
|
67
|
+
"dw1usy": ["f1w8wcpf", "f1yd45vn"]
|
|
68
|
+
},
|
|
69
|
+
"resetButton": {
|
|
70
|
+
"B7ck84d": "f1e4lqlz",
|
|
71
|
+
"De3pzq": "f1u2r49w",
|
|
72
|
+
"sj55zd": "f1ym3bx4",
|
|
73
|
+
"Bahqtrf": "f1mo0ibp",
|
|
74
|
+
"Be2twd7": "fjoy568",
|
|
75
|
+
"Bg96gwp": "fytdu2e",
|
|
76
|
+
"B68tc82": "f1mtd64y",
|
|
77
|
+
"Bmxbyg5": "f1y7q3j9",
|
|
78
|
+
"z8tnut": "f1g0x7ka",
|
|
79
|
+
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
80
|
+
"Byoj8tv": "f1qch9an",
|
|
81
|
+
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
82
|
+
"icvyot": "f1ern45e",
|
|
83
|
+
"vrafjx": ["f1n71otn", "f1deefiw"],
|
|
84
|
+
"oivjwe": "f1h8hb77",
|
|
85
|
+
"wvpqe5": ["f1deefiw", "f1n71otn"],
|
|
86
|
+
"Bv0vk6g": "f37px4s",
|
|
87
|
+
"fsow6f": "fgusgyc"
|
|
88
|
+
}
|
|
89
|
+
}, {
|
|
90
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".faq1aip{grid-row-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1m489tg{grid-column-start:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f10pi13n{position:relative;}", ".fez10in{line-height:0;}", ".f1k6fduh{cursor:pointer;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1hysmiz{grid-row-start:close-button;}", ".f11nczdl{grid-row-end:close-button;}", ".f1379kmu{grid-column-start:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .f1l3yytu.fui-focus-visible::after{content:\"\";}", ".fui-FluentProvider .fnfm6nw.fui-focus-visible::after{position:absolute;}", ".fui-FluentProvider .f19m7vnf.fui-focus-visible::after{pointer-events:none;}", ".fui-FluentProvider .f8p7r4r.fui-focus-visible::after{z-index:1;}", ".fui-FluentProvider .f1iilt6f.fui-focus-visible::after{border-top-style:solid;}", ".fui-FluentProvider .f2keu4t.fui-focus-visible::after{border-right-style:solid;}", ".fui-FluentProvider .f14fcfgr.fui-focus-visible::after{border-left-style:solid;}", ".fui-FluentProvider .faptqjd.fui-focus-visible::after{border-bottom-style:solid;}", ".fui-FluentProvider .fhcdesm.fui-focus-visible::after{border-top-width:2px;}", ".fui-FluentProvider .f17qorvy.fui-focus-visible::after{border-right-width:2px;}", ".fui-FluentProvider .f1s68zmt.fui-focus-visible::after{border-left-width:2px;}", ".fui-FluentProvider .f1kaw87x.fui-focus-visible::after{border-bottom-width:2px;}", ".fui-FluentProvider .fcxw5no.fui-focus-visible::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1klxzyg.fui-focus-visible::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f8h35c5.fui-focus-visible::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f41fp59.fui-focus-visible::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f89yr8c.fui-focus-visible::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f3vokhu.fui-focus-visible::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fgoym2l.fui-focus-visible::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1b662q1.fui-focus-visible::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fn1y60j.fui-focus-visible::after{top:-2px;}", ".fui-FluentProvider .f197ac7e.fui-focus-visible::after{bottom:-2px;}", ".fui-FluentProvider .f1yd45vn.fui-focus-visible::after{left:-2px;}", ".fui-FluentProvider .f1w8wcpf.fui-focus-visible::after{right:-2px;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}"],
|
|
91
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
92
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
93
|
+
});
|
|
94
|
+
/**
|
|
95
|
+
* Apply styling to the DialogTitle slots based on the state
|
|
96
|
+
*/
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
export const useDialogTitleStyles_unstable = state => {
|
|
100
|
+
const styles = useStyles();
|
|
101
|
+
state.root.className = mergeClasses(dialogTitleClassNames.root, styles.root, state.closeButton && styles.rootWithCloseButton, !state.closeButton && styles.rootWithoutCloseButton, state.root.className);
|
|
102
|
+
|
|
103
|
+
if (state.closeButton) {
|
|
104
|
+
state.closeButton.className = mergeClasses(dialogTitleClassNames.closeButton, styles.resetButton, styles.closeButton, styles.closeButtonFocusIndicator, state.closeButton.className);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
return state;
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=useDialogTitleStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTitle/useDialogTitleStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,QAAT,QAAyB,6BAAzB;AACA,SAAS,sBAAT,EAAiC,eAAjC,QAAwD,0BAAxD;AAEA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,WAAW,EAAE;AAFwD,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAmCA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,mBAHK,EAIjC,CAAC,KAAK,CAAC,WAAP,IAAsB,MAAM,CAAC,sBAJI,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CACxC,qBAAqB,CAAC,WADkB,EAExC,MAAM,CAAC,WAFiC,EAGxC,MAAM,CAAC,WAHiC,EAIxC,MAAM,CAAC,yBAJiC,EAKxC,KAAK,CAAC,WAAN,CAAkB,SALsB,CAA1C;EAOD;;EACD,OAAO,KAAP;AACD,CAnBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { gridArea } from '../../utils/localShorthands';\nimport { CLOSE_BUTTON_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n root: 'fui-DialogTitle',\n closeButton: 'fui-DialogTitle__closeButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n ...typographyStyles.subtitle1,\n ...gridArea(TITLE_GRID_AREA),\n },\n rootWithoutCloseButton: {\n // ...shorthands.padding(DIALOG_CONTENT_PADDING, DIALOG_CONTENT_PADDING, '8px', DIALOG_CONTENT_PADDING),\n },\n rootWithCloseButton: {\n // ...shorthands.padding(DIALOG_CONTENT_PADDING, '20px', '8px', DIALOG_CONTENT_PADDING),\n },\n closeButton: {\n position: 'relative',\n lineHeight: '0',\n cursor: 'pointer',\n alignSelf: 'start',\n ...gridArea(CLOSE_BUTTON_GRID_AREA),\n },\n closeButtonFocusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogTitleClassNames.root,\n styles.root,\n state.closeButton && styles.rootWithCloseButton,\n !state.closeButton && styles.rootWithoutCloseButton,\n state.root.className,\n );\n if (state.closeButton) {\n state.closeButton.className = mergeClasses(\n dialogTitleClassNames.closeButton,\n styles.resetButton,\n styles.closeButton,\n styles.closeButtonFocusIndicator,\n state.closeButton.className,\n );\n }\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useDialogTrigger_unstable } from './useDialogTrigger';
|
|
2
|
+
import { renderDialogTrigger_unstable } from './renderDialogTrigger';
|
|
3
|
+
/**
|
|
4
|
+
* A non-visual component that wraps its child
|
|
5
|
+
* and configures them to be the trigger that will open or close a `Dialog`.
|
|
6
|
+
* This component should only accept one child.
|
|
7
|
+
*
|
|
8
|
+
* In case the trigger is used outside `Dialog` component
|
|
9
|
+
* it'll still provide basic ARIA related attributes
|
|
10
|
+
* to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,
|
|
11
|
+
* in that case the user must provide a `controlled state`
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export const DialogTrigger = props => {
|
|
15
|
+
const state = useDialogTrigger_unstable(props);
|
|
16
|
+
return renderDialogTrigger_unstable(state);
|
|
17
|
+
};
|
|
18
|
+
DialogTrigger.displayName = 'DialogTrigger';
|
|
19
|
+
DialogTrigger.isFluentTriggerComponent = true;
|
|
20
|
+
//# sourceMappingURL=DialogTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTrigger/DialogTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;;;;;;;;AASG;;AACH,OAAO,MAAM,aAAa,GAA0D,KAAK,IAAG;EAC1F,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,CAAvC;EAEA,OAAO,4BAA4B,CAAC,KAAD,CAAnC;AACD,CAJM;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B;AACA,aAAa,CAAC,wBAAd,GAAyC,IAAzC","sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * In case the trigger is used outside `Dialog` component\n * it'll still provide basic ARIA related attributes\n * to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,\n * in that case the user must provide a `controlled state`\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> & FluentTriggerComponent = props => {\n const state = useDialogTrigger_unstable(props);\n\n return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogTrigger.types.js","sourceRoot":"../src/","sources":["components/DialogTrigger/DialogTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = {\n /**\n * Explicitly declare if the trigger is responsible for opening or\n * closing a Dialog visibility state.\n * @default 'open' // if it's outside DialogSurface\n * @default 'close' // if it's inside DialogSurface\n */\n action?: DialogTriggerAction;\n /**\n * Explicitly require single child or render function\n * to inject properties\n */\n children:\n | (React.ReactElement & { ref?: React.Ref<unknown> })\n | ((props: DialogTriggerChildProps) => React.ReactElement | null);\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'onClick' | 'onKeyDown' | 'aria-haspopup'\n> & {\n ref?: React.Ref<never>;\n};\n\nexport type DialogTriggerState = {\n children: React.ReactElement | null;\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogTrigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTrigger/renderDialogTrigger.tsx"],"names":[],"mappings":"AAEA;;;;AAIG;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA+B,KAAK,CAAC,QAA1E","sourcesContent":["import type { DialogTriggerState } from './DialogTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderDialogTrigger_unstable = (state: DialogTriggerState) => state.children;\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
3
|
+
import { Enter, Space } from '@fluentui/keyboard-keys';
|
|
4
|
+
import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
|
|
5
|
+
import { isTargetDisabled } from '../../utils';
|
|
6
|
+
import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
|
|
7
|
+
/**
|
|
8
|
+
* Create the state required to render DialogTrigger.
|
|
9
|
+
* Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
|
|
10
|
+
*
|
|
11
|
+
* @param props - props from this instance of DialogTrigger
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export const useDialogTrigger_unstable = props => {
|
|
15
|
+
const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();
|
|
16
|
+
const {
|
|
17
|
+
children,
|
|
18
|
+
action = isInsideSurfaceDialog ? 'close' : 'open'
|
|
19
|
+
} = props;
|
|
20
|
+
const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
|
|
21
|
+
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
22
|
+
const {
|
|
23
|
+
triggerAttributes
|
|
24
|
+
} = useModalAttributes();
|
|
25
|
+
const handleClick = useEventCallback(event => {
|
|
26
|
+
var _a, _b;
|
|
27
|
+
|
|
28
|
+
if (isTargetDisabled(event)) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
(_b = child === null || child === void 0 ? void 0 : (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
33
|
+
|
|
34
|
+
if (!event.isDefaultPrevented()) {
|
|
35
|
+
requestOpenChange({
|
|
36
|
+
event,
|
|
37
|
+
type: 'triggerClick',
|
|
38
|
+
open: action === 'open'
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
const handleKeyDown = useEventCallback(event => {
|
|
43
|
+
var _a, _b;
|
|
44
|
+
|
|
45
|
+
if (isTargetDisabled(event)) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
(_b = child === null || child === void 0 ? void 0 : (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
50
|
+
|
|
51
|
+
if (!event.isDefaultPrevented() && (event.key === Enter || event.key === Space)) {
|
|
52
|
+
event.currentTarget.click();
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
return {
|
|
56
|
+
children: applyTriggerPropsToChildren(children, {
|
|
57
|
+
'aria-haspopup': action === 'close' ? undefined : 'dialog',
|
|
58
|
+
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
59
|
+
onClick: handleClick,
|
|
60
|
+
onKeyDown: handleKeyDown,
|
|
61
|
+
...triggerAttributes
|
|
62
|
+
})
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=useDialogTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,KAAT,EAAgB,KAAhB,QAA6B,yBAA7B;AACA,SAAS,2BAAT,EAAsC,eAAtC,EAAuD,gBAAvD,QAA+E,2BAA/E;AAEA,SAAS,gBAAT,QAAiC,aAAjC;AACA,SAAS,yBAAT,EAAoC,gCAApC,QAA4E,gBAA5E;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,CAAE,KAAD,IAAyC;;;IAC5E,IAAI,gBAAgB,CAAC,KAAD,CAApB,EAA6B;MAC3B;IACD;;IACD,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,CAZmC,CAApC;EAcA,MAAM,aAAa,GAAG,gBAAgB,CAAE,KAAD,IAA4C;;;IACjF,IAAI,gBAAgB,CAAC,KAAD,CAApB,EAA6B;MAC3B;IACD;;IACD,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,SAAb,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAAtB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAD,KAAgC,KAAK,CAAC,GAAN,KAAc,KAAd,IAAuB,KAAK,CAAC,GAAN,KAAc,KAArE,CAAJ,EAAiF;MAC/E,KAAK,CAAC,aAAN,CAAoB,KAApB;IACD;EACF,CARqC,CAAtC;EAUA,OAAO;IACL,QAAQ,EAAE,2BAA2B,CAA0B,QAA1B,EAAoC;MACvE,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,QADqB;MAEvE,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAF2D;MAGvE,OAAO,EAAE,WAH8D;MAIvE,SAAS,EAAE,aAJ4D;MAKvE,GAAG;IALoE,CAApC;EADhC,CAAP;AASD,CA5CM","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { DialogTriggerChildProps, DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { isTargetDisabled } from '../../utils';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\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((event: React.MouseEvent<HTMLElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\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 const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n child?.props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Enter || event.key === Space)) {\n event.currentTarget.click();\n }\n });\n\n return {\n children: applyTriggerPropsToChildren<DialogTriggerChildProps>(children, {\n 'aria-haspopup': action === 'close' ? undefined : 'dialog',\n ref: child?.ref as React.Ref<never>,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n ...triggerAttributes,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|