@fluentui/react-dialog 9.8.1 → 9.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +55 -1
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +4 -0
- package/lib/components/Dialog/renderDialog.js +4 -1
- package/lib/components/Dialog/renderDialog.js.map +1 -1
- package/lib/components/DialogSurface/DialogSurface.types.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +15 -7
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/contexts/dialogTransitionContext.js +1 -1
- package/lib/contexts/dialogTransitionContext.js.map +1 -1
- package/lib-commonjs/components/Dialog/renderDialog.js +4 -1
- package/lib-commonjs/components/Dialog/renderDialog.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +30 -16
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/dialogTransitionContext.js +1 -1
- package/lib-commonjs/contexts/dialogTransitionContext.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 06 Nov 2023 13:15:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-dialog_v9.8.3",
|
|
7
|
+
"version": "9.8.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-dialog",
|
|
13
|
+
"commit": "bcd30395b61cb18b5a42a8c0a4f91ccc2b88377d",
|
|
14
|
+
"comment": "chore: set default DialogTransitionProvider value to `undefined` to remove animation styles from test environment."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 01 Nov 2023 12:55:58 GMT",
|
|
21
|
+
"tag": "@fluentui/react-dialog_v9.8.2",
|
|
22
|
+
"version": "9.8.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
27
|
+
"package": "@fluentui/react-dialog",
|
|
28
|
+
"commit": "c4d00c3c471ba73ebd940edbf9cd1dff0969a71d",
|
|
29
|
+
"comment": "chore: remove animation from test environments"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-dialog",
|
|
34
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.11.1",
|
|
35
|
+
"commit": "838b05367dbdddb17732b9e0c807090e0a4445d5"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-dialog",
|
|
40
|
+
"comment": "Bump @fluentui/react-tabster to v9.14.3",
|
|
41
|
+
"commit": "838b05367dbdddb17732b9e0c807090e0a4445d5"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-dialog",
|
|
46
|
+
"comment": "Bump @fluentui/react-theme to v9.1.15",
|
|
47
|
+
"commit": "838b05367dbdddb17732b9e0c807090e0a4445d5"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-dialog",
|
|
52
|
+
"comment": "Bump @fluentui/react-portal to v9.3.27",
|
|
53
|
+
"commit": "838b05367dbdddb17732b9e0c807090e0a4445d5"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Sat, 28 Oct 2023 23:35:59 GMT",
|
|
6
60
|
"tag": "@fluentui/react-dialog_v9.8.1",
|
|
7
61
|
"version": "9.8.1",
|
|
8
62
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 06 Nov 2023 13:15:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.8.3)
|
|
8
|
+
|
|
9
|
+
Mon, 06 Nov 2023 13:15:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.8.2..@fluentui/react-dialog_v9.8.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: set default DialogTransitionProvider value to `undefined` to remove animation styles from test environment. ([PR #29755](https://github.com/microsoft/fluentui/pull/29755) by yuanboxue@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.8.2)
|
|
17
|
+
|
|
18
|
+
Wed, 01 Nov 2023 12:55:58 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.8.1..@fluentui/react-dialog_v9.8.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: remove animation from test environments ([PR #29692](https://github.com/microsoft/fluentui/pull/29692) by bernardo.sunderhus@gmail.com)
|
|
24
|
+
- Bump @fluentui/react-shared-contexts to v9.11.1 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
|
|
25
|
+
- Bump @fluentui/react-tabster to v9.14.3 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
|
|
26
|
+
- Bump @fluentui/react-theme to v9.1.15 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
|
|
27
|
+
- Bump @fluentui/react-portal to v9.3.27 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.8.1)
|
|
8
30
|
|
|
9
|
-
Sat, 28 Oct 2023 23:
|
|
31
|
+
Sat, 28 Oct 2023 23:35:59 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.8.0..@fluentui/react-dialog_v9.8.1)
|
|
11
33
|
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -256,6 +256,10 @@ export declare type DialogSurfaceSlots = {
|
|
|
256
256
|
* State used in rendering DialogSurface
|
|
257
257
|
*/
|
|
258
258
|
export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<DialogContextValue, 'isNestedDialog'> & Pick<PortalProps, 'mountNode'> & {
|
|
259
|
+
/**
|
|
260
|
+
* Transition status for animation.
|
|
261
|
+
* In test environment, this is always `undefined`.
|
|
262
|
+
*/
|
|
259
263
|
transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
|
|
260
264
|
};
|
|
261
265
|
|
|
@@ -12,7 +12,10 @@ import { DialogTransitionProvider } from '../../contexts/dialogTransitionContext
|
|
|
12
12
|
value: contextValues.dialogSurface,
|
|
13
13
|
children: [
|
|
14
14
|
trigger,
|
|
15
|
-
/*#__PURE__*/ _jsx(
|
|
15
|
+
process.env.NODE_ENV === 'test' ? state.open && /*#__PURE__*/ _jsx(DialogTransitionProvider, {
|
|
16
|
+
value: undefined,
|
|
17
|
+
children: content
|
|
18
|
+
}) : /*#__PURE__*/ _jsx(Transition, {
|
|
16
19
|
mountOnEnter: true,
|
|
17
20
|
unmountOnExit: true,
|
|
18
21
|
in: state.open,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Transition } from 'react-transition-group';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\nimport { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';\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 <Transition\n
|
|
1
|
+
{"version":3,"sources":["renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Transition } from 'react-transition-group';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\nimport { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';\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 {process.env.NODE_ENV === 'test' ? (\n state.open && <DialogTransitionProvider value={undefined}>{content}</DialogTransitionProvider>\n ) : (\n <Transition\n mountOnEnter\n unmountOnExit\n in={state.open}\n nodeRef={state.dialogRef}\n // FIXME: this should not be hardcoded tokens.durationGentle\n timeout={250}\n >\n {status => <DialogTransitionProvider value={status}>{content}</DialogTransitionProvider>}\n </Transition>\n )}\n </DialogSurfaceProvider>\n </DialogProvider>\n );\n};\n"],"names":["Transition","DialogProvider","DialogSurfaceProvider","DialogTransitionProvider","renderDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface","process","env","NODE_ENV","open","undefined","mountOnEnter","unmountOnExit","in","nodeRef","dialogRef","timeout","status"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,UAAU,QAAQ,yBAAyB;AACpD,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AAEvE,SAASC,wBAAwB,QAAQ,yCAAyC;AAElF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxD,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,qBACE,KAACJ;QAAeQ,OAAOH,cAAcI,MAAM;kBACzC,cAAA,MAACR;YAAsBO,OAAOH,cAAcK,aAAa;;gBACtDH;gBACAI,QAAQC,GAAG,CAACC,QAAQ,KAAK,SACxBT,MAAMU,IAAI,kBAAI,KAACZ;oBAAyBM,OAAOO;8BAAYT;mCAE3D,KAACP;oBACCiB,YAAY;oBACZC,aAAa;oBACbC,IAAId,MAAMU,IAAI;oBACdK,SAASf,MAAMgB,SAAS;oBACxB,4DAA4D;oBAC5DC,SAAS;8BAERC,CAAAA,uBAAU,KAACpB;4BAAyBM,OAAOc;sCAAShB;;;;;;AAMjE,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n /**\n * Dimmed background of dialog.\n * The default backdrop is rendered as a `<div>` with styling.\n * This slot expects a `<div>` element which will replace the default backdrop.\n * The backdrop should have `aria-hidden=\"true\"`.\n *\n */\n backdrop?: Slot<'div'>;\n root: Slot<'div'>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n Pick<DialogContextValue, 'isNestedDialog'> &\n Pick<PortalProps, 'mountNode'> & {\n
|
|
1
|
+
{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n /**\n * Dimmed background of dialog.\n * The default backdrop is rendered as a `<div>` with styling.\n * This slot expects a `<div>` element which will replace the default backdrop.\n * The backdrop should have `aria-hidden=\"true\"`.\n *\n */\n backdrop?: Slot<'div'>;\n root: Slot<'div'>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n Pick<DialogContextValue, 'isNestedDialog'> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Transition status for animation.\n * In test environment, this is always `undefined`.\n */\n transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n };\n"],"names":[],"mappings":"AAAA,WA0CI"}
|
|
@@ -9,11 +9,19 @@ export const dialogSurfaceClassNames = {
|
|
|
9
9
|
/**
|
|
10
10
|
* Styles for the root slot
|
|
11
11
|
*/
|
|
12
|
-
const useRootBaseStyle = /*#__PURE__*/__resetStyles("
|
|
13
|
-
r: [".
|
|
14
|
-
s: ["@media screen and (max-width: 480px){.
|
|
12
|
+
const useRootBaseStyle = /*#__PURE__*/__resetStyles("r1lfl7hp", "r1s42hiy", {
|
|
13
|
+
r: [".r1lfl7hp{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1lfl7hp:focus{outline-style:none;}", ".r1lfl7hp:focus-visible{outline-style:none;}", ".r1lfl7hp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1lfl7hp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1s42hiy{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1s42hiy:focus{outline-style:none;}", ".r1s42hiy:focus-visible{outline-style:none;}", ".r1s42hiy[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1s42hiy[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
14
|
+
s: ["@media screen and (max-width: 480px){.r1lfl7hp{max-width:100vw;}}", "@media screen and (max-width: 480px){.r1s42hiy{max-width:100vw;}}"]
|
|
15
15
|
});
|
|
16
16
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
17
|
+
animated: {
|
|
18
|
+
abs64n: "fk73vx1",
|
|
19
|
+
B3o57yi: "fc397y7",
|
|
20
|
+
Bmy1vo4: "f1b86uth",
|
|
21
|
+
Bkqvd7p: "f18ad807",
|
|
22
|
+
E5pizo: "f1yzz98r",
|
|
23
|
+
Bz10aip: "f15ofi6c"
|
|
24
|
+
},
|
|
17
25
|
unmounted: {},
|
|
18
26
|
entering: {},
|
|
19
27
|
entered: {
|
|
@@ -27,7 +35,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
27
35
|
},
|
|
28
36
|
exited: {}
|
|
29
37
|
}, {
|
|
30
|
-
d: [".f10nrhrw{box-shadow:var(--shadow64);}", ".f186d0ee{transform:scale(1) translateZ(0);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
|
|
38
|
+
d: [".fk73vx1{opacity:0;}", ".fc397y7{transition-duration:var(--durationGentle);}", ".f1b86uth{transition-property:opacity,transform,box-shadow;}", ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}", ".f15ofi6c{transform:scale(0.85) translateZ(0);}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".f186d0ee{transform:scale(1) translateZ(0);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
|
|
31
39
|
});
|
|
32
40
|
/**
|
|
33
41
|
* Styles for the backdrop slot
|
|
@@ -58,15 +66,15 @@ export const useDialogSurfaceStyles_unstable = state => {
|
|
|
58
66
|
isNestedDialog,
|
|
59
67
|
root,
|
|
60
68
|
backdrop,
|
|
61
|
-
transitionStatus
|
|
69
|
+
transitionStatus
|
|
62
70
|
} = state;
|
|
63
71
|
const rootBaseStyle = useRootBaseStyle();
|
|
64
72
|
const rootStyles = useRootStyles();
|
|
65
73
|
const backdropBaseStyle = useBackdropBaseStyle();
|
|
66
74
|
const backdropStyles = useBackdropStyles();
|
|
67
|
-
root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);
|
|
75
|
+
root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus && rootStyles.animated, transitionStatus && rootStyles[transitionStatus], root.className);
|
|
68
76
|
if (backdrop) {
|
|
69
|
-
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);
|
|
77
|
+
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);
|
|
70
78
|
}
|
|
71
79
|
return state;
|
|
72
80
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useRootStyles","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useRootStyles","animated","abs64n","B3o57yi","Bmy1vo4","Bkqvd7p","E5pizo","Bz10aip","unmounted","entering","entered","idle","exiting","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...shorthands.inset(0),\n ...shorthands.padding(0),\n ...shorthands.padding(SURFACE_PADDING),\n ...shorthands.margin('auto'),\n ...shorthands.borderStyle('none'),\n ...shorthands.overflow('unset'),\n ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n contain: 'content',\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n }\n});\nconst useRootStyles = makeStyles({\n animated: {\n // initial style before animation:\n opacity: 0,\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid,\n boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n transform: 'scale(0.85) translateZ(0)'\n },\n unmounted: {},\n entering: {},\n entered: {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n },\n idle: {},\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropBaseStyle = makeResetStyles({\n ...shorthands.inset('0px'),\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n position: 'fixed',\n // initial style before animation:\n transitionDuration: tokens.durationGentle,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'opacity',\n willChange: 'opacity',\n opacity: 0\n});\nconst useBackdropStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n unmounted: {},\n entering: {},\n entered: {\n opacity: 1\n },\n idle: {},\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const { isNestedDialog, root, backdrop, transitionStatus } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus && rootStyles.animated, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACvG,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAwB5B,CAAC;AACF,MAAMC,aAAa,gBAAGd,QAAA;EAAAe,QAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;EAAAC,QAAA;EAAAC,OAAA;IAAAJ,MAAA;IAAAC,OAAA;IAAAL,MAAA;EAAA;EAAAS,IAAA;EAAAC,OAAA;IAAAP,OAAA;EAAA;EAAAQ,MAAA;AAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAG9B,aAAA,2gBAUhC,CAAC;AACF,MAAM+B,iBAAiB,gBAAG9B,QAAA;EAAA+B,oBAAA;IAAAC,MAAA;EAAA;EAAAV,SAAA;EAAAC,QAAA;EAAAC,OAAA;IAAAR,MAAA;EAAA;EAAAS,IAAA;EAAAC,OAAA;IAAAP,OAAA;EAAA;EAAAQ,MAAA;AAAA;EAAAC,CAAA;AAAA,CAczB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAE1B,IAAI;IAAEC,QAAQ;IAAE0B;EAAiB,CAAC,GAAGF,KAAK;EAClE,MAAMG,aAAa,GAAG1B,gBAAgB,CAAC,CAAC;EACxC,MAAM2B,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1CrB,IAAI,CAACgC,SAAS,GAAGxC,YAAY,CAACO,uBAAuB,CAACC,IAAI,EAAE4B,aAAa,EAAED,gBAAgB,IAAIE,UAAU,CAACvB,QAAQ,EAAEqB,gBAAgB,IAAIE,UAAU,CAACF,gBAAgB,CAAC,EAAE3B,IAAI,CAACgC,SAAS,CAAC;EACrL,IAAI/B,QAAQ,EAAE;IACVA,QAAQ,CAAC+B,SAAS,GAAGxC,YAAY,CAACO,uBAAuB,CAACE,QAAQ,EAAE6B,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAEK,gBAAgB,IAAII,cAAc,CAACJ,gBAAgB,CAAC,EAAE1B,QAAQ,CAAC+B,SAAS,CAAC;EAC3N;EACA,OAAOP,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dialogTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\n/**\n * @internal\n */\nexport type DialogTransitionContextValue = TransitionStatus;\n\n/**\n * @internal\n */\nconst defaultContextValue: DialogTransitionContextValue =
|
|
1
|
+
{"version":3,"sources":["dialogTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\n/**\n * @internal\n */\nexport type DialogTransitionContextValue = TransitionStatus | undefined;\n\n/**\n * @internal\n */\nconst defaultContextValue: DialogTransitionContextValue = undefined;\n\n// Contexts should default to undefined\n/**\n * @internal\n */\nexport const DialogTransitionContext: React.Context<DialogTransitionContextValue | undefined> = React.createContext<\n DialogTransitionContextValue | undefined\n>(undefined);\n\n/**\n * @internal\n */\nexport const DialogTransitionProvider = DialogTransitionContext.Provider;\n\n/**\n * @internal\n */\nexport const useDialogTransitionContext_unstable = (): DialogTransitionContextValue => {\n return React.useContext(DialogTransitionContext) ?? defaultContextValue;\n};\n"],"names":["React","defaultContextValue","undefined","DialogTransitionContext","createContext","DialogTransitionProvider","Provider","useDialogTransitionContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAQ/B;;CAEC,GACD,MAAMC,sBAAoDC;AAE1D,uCAAuC;AACvC;;CAEC,GACD,OAAO,MAAMC,0BAAmFH,MAAMI,aAAa,CAEjHF,WAAW;AAEb;;CAEC,GACD,OAAO,MAAMG,2BAA2BF,wBAAwBG,QAAQ,CAAC;AAEzE;;CAEC,GACD,OAAO,MAAMC,sCAAsC;QAC1CP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACL,sCAAjBH,+BAAAA,oBAA6CC;AACtD,EAAE"}
|
|
@@ -20,7 +20,10 @@ const renderDialog_unstable = (state, contextValues)=>{
|
|
|
20
20
|
value: contextValues.dialogSurface,
|
|
21
21
|
children: [
|
|
22
22
|
trigger,
|
|
23
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
23
|
+
process.env.NODE_ENV === 'test' ? state.open && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialogTransitionContext.DialogTransitionProvider, {
|
|
24
|
+
value: undefined,
|
|
25
|
+
children: content
|
|
26
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
|
|
24
27
|
mountOnEnter: true,
|
|
25
28
|
unmountOnExit: true,
|
|
26
29
|
in: state.open,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDialog.js"],"sourcesContent":[" import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Transition } from 'react-transition-group';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';\n/**\n * Render the final JSX of Dialog\n */ export const renderDialog_unstable = (state, contextValues)=>{\n const { content, trigger } = state;\n return /*#__PURE__*/ _jsx(DialogProvider, {\n value: contextValues.dialog,\n children: /*#__PURE__*/ _jsxs(DialogSurfaceProvider, {\n value: contextValues.dialogSurface,\n children: [\n trigger,\n /*#__PURE__*/ _jsx(Transition, {\n mountOnEnter: true,\n unmountOnExit: true,\n in: state.open,\n nodeRef: state.dialogRef,\n // FIXME: this should not be hardcoded tokens.durationGentle\n timeout: 250,\n children: (status)=>/*#__PURE__*/ _jsx(DialogTransitionProvider, {\n value: status,\n children: content\n })\n })\n ]\n })\n });\n};\n"],"names":["renderDialog_unstable","state","contextValues","content","trigger","_jsx","DialogProvider","value","dialog","children","_jsxs","DialogSurfaceProvider","dialogSurface","Transition","mountOnEnter","unmountOnExit","in","
|
|
1
|
+
{"version":3,"sources":["renderDialog.js"],"sourcesContent":[" import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Transition } from 'react-transition-group';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';\n/**\n * Render the final JSX of Dialog\n */ export const renderDialog_unstable = (state, contextValues)=>{\n const { content, trigger } = state;\n return /*#__PURE__*/ _jsx(DialogProvider, {\n value: contextValues.dialog,\n children: /*#__PURE__*/ _jsxs(DialogSurfaceProvider, {\n value: contextValues.dialogSurface,\n children: [\n trigger,\n process.env.NODE_ENV === 'test' ? state.open && /*#__PURE__*/ _jsx(DialogTransitionProvider, {\n value: undefined,\n children: content\n }) : /*#__PURE__*/ _jsx(Transition, {\n mountOnEnter: true,\n unmountOnExit: true,\n in: state.open,\n nodeRef: state.dialogRef,\n // FIXME: this should not be hardcoded tokens.durationGentle\n timeout: 250,\n children: (status)=>/*#__PURE__*/ _jsx(DialogTransitionProvider, {\n value: status,\n children: content\n })\n })\n ]\n })\n });\n};\n"],"names":["renderDialog_unstable","state","contextValues","content","trigger","_jsx","DialogProvider","value","dialog","children","_jsxs","DialogSurfaceProvider","dialogSurface","process","env","NODE_ENV","open","DialogTransitionProvider","undefined","Transition","mountOnEnter","unmountOnExit","in","nodeRef","dialogRef","timeout","status"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;sCAClB;0BAC2B;yCACb;AAG9B,MAAMA,wBAAwB,CAACC,OAAOC;IAC7C,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAC7B,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACC,wBAAc,EAAE;QACtCC,OAAOL,cAAcM,MAAM;QAC3BC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,+BAAqB,EAAE;YACjDJ,OAAOL,cAAcU,aAAa;YAClCH,UAAU;gBACNL;gBACAS,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAASd,MAAMe,IAAI,IAAI,WAAW,GAAGX,IAAAA,eAAI,EAACY,iDAAwB,EAAE;oBACzFV,OAAOW;oBACPT,UAAUN;gBACd,KAAK,WAAW,GAAGE,IAAAA,eAAI,EAACc,gCAAU,EAAE;oBAChCC,cAAc;oBACdC,eAAe;oBACfC,IAAIrB,MAAMe,IAAI;oBACdO,SAAStB,MAAMuB,SAAS;oBACxB,4DAA4D;oBAC5DC,SAAS;oBACThB,UAAU,CAACiB,SAAS,WAAW,GAAGrB,IAAAA,eAAI,EAACY,iDAAwB,EAAE;4BACzDV,OAAOmB;4BACPjB,UAAUN;wBACd;gBACR;aACH;QACL;IACJ;AACJ"}
|
|
@@ -23,25 +23,33 @@ const dialogSurfaceClassNames = {
|
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* Styles for the root slot
|
|
26
|
-
*/ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
+
*/ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1lfl7hp", "r1s42hiy", {
|
|
27
27
|
r: [
|
|
28
|
-
".
|
|
29
|
-
".
|
|
30
|
-
".
|
|
31
|
-
".
|
|
32
|
-
".
|
|
33
|
-
".
|
|
34
|
-
".
|
|
35
|
-
".
|
|
36
|
-
".
|
|
37
|
-
".
|
|
28
|
+
".r1lfl7hp{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
|
|
29
|
+
".r1lfl7hp:focus{outline-style:none;}",
|
|
30
|
+
".r1lfl7hp:focus-visible{outline-style:none;}",
|
|
31
|
+
".r1lfl7hp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
32
|
+
".r1lfl7hp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
33
|
+
".r1s42hiy{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
|
|
34
|
+
".r1s42hiy:focus{outline-style:none;}",
|
|
35
|
+
".r1s42hiy:focus-visible{outline-style:none;}",
|
|
36
|
+
".r1s42hiy[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
37
|
+
".r1s42hiy[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
38
38
|
],
|
|
39
39
|
s: [
|
|
40
|
-
"@media screen and (max-width: 480px){.
|
|
41
|
-
"@media screen and (max-width: 480px){.
|
|
40
|
+
"@media screen and (max-width: 480px){.r1lfl7hp{max-width:100vw;}}",
|
|
41
|
+
"@media screen and (max-width: 480px){.r1s42hiy{max-width:100vw;}}"
|
|
42
42
|
]
|
|
43
43
|
});
|
|
44
44
|
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
45
|
+
animated: {
|
|
46
|
+
abs64n: "fk73vx1",
|
|
47
|
+
B3o57yi: "fc397y7",
|
|
48
|
+
Bmy1vo4: "f1b86uth",
|
|
49
|
+
Bkqvd7p: "f18ad807",
|
|
50
|
+
E5pizo: "f1yzz98r",
|
|
51
|
+
Bz10aip: "f15ofi6c"
|
|
52
|
+
},
|
|
45
53
|
unmounted: {},
|
|
46
54
|
entering: {},
|
|
47
55
|
entered: {
|
|
@@ -56,6 +64,12 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
56
64
|
exited: {}
|
|
57
65
|
}, {
|
|
58
66
|
d: [
|
|
67
|
+
".fk73vx1{opacity:0;}",
|
|
68
|
+
".fc397y7{transition-duration:var(--durationGentle);}",
|
|
69
|
+
".f1b86uth{transition-property:opacity,transform,box-shadow;}",
|
|
70
|
+
".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
|
|
71
|
+
".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}",
|
|
72
|
+
".f15ofi6c{transform:scale(0.85) translateZ(0);}",
|
|
59
73
|
".f10nrhrw{box-shadow:var(--shadow64);}",
|
|
60
74
|
".f186d0ee{transform:scale(1) translateZ(0);}",
|
|
61
75
|
".f5p0z4x{opacity:1;}",
|
|
@@ -90,14 +104,14 @@ const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
90
104
|
]
|
|
91
105
|
});
|
|
92
106
|
const useDialogSurfaceStyles_unstable = (state)=>{
|
|
93
|
-
const { isNestedDialog, root, backdrop, transitionStatus
|
|
107
|
+
const { isNestedDialog, root, backdrop, transitionStatus } = state;
|
|
94
108
|
const rootBaseStyle = useRootBaseStyle();
|
|
95
109
|
const rootStyles = useRootStyles();
|
|
96
110
|
const backdropBaseStyle = useBackdropBaseStyle();
|
|
97
111
|
const backdropStyles = useBackdropStyles();
|
|
98
|
-
root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);
|
|
112
|
+
root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus && rootStyles.animated, transitionStatus && rootStyles[transitionStatus], root.className);
|
|
99
113
|
if (backdrop) {
|
|
100
|
-
backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);
|
|
114
|
+
backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);
|
|
101
115
|
}
|
|
102
116
|
return state;
|
|
103
117
|
}; //# sourceMappingURL=useDialogSurfaceStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = /*#__PURE__*/__resetStyles(\"r1xd7yeh\", \"r93c6rw\", {\n r: [\".r1xd7yeh{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}\", \".r1xd7yeh:focus{outline-style:none;}\", \".r1xd7yeh:focus-visible{outline-style:none;}\", \".r1xd7yeh[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1xd7yeh[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r93c6rw{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}\", \".r93c6rw:focus{outline-style:none;}\", \".r93c6rw:focus-visible{outline-style:none;}\", \".r93c6rw[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r93c6rw[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media screen and (max-width: 480px){.r1xd7yeh{max-width:100vw;}}\", \"@media screen and (max-width: 480px){.r93c6rw{max-width:100vw;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n unmounted: {},\n entering: {},\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {},\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f10nrhrw{box-shadow:var(--shadow64);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropBaseStyle = /*#__PURE__*/__resetStyles(\"raidwwn\", \"r17vltcu\", [\".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\", \".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n },\n unmounted: {},\n entering: {},\n entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {},\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const {\n isNestedDialog,\n root,\n backdrop,\n transitionStatus = 'unmounted'\n } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","useRootStyles","__styles","unmounted","entering","entered","E5pizo","Bz10aip","abs64n","idle","exiting","Bkqvd7p","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAmDAC,+BAA+B;eAA/BA;;;uBAvDqD;AAI3D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IACzEC,GAAG;QAAC;QAA20C;QAAwC;QAAgD;QAAiK;QAAmvB;QAA00C;QAAuC;QAA+C;QAAgK;KAAivB;IAC5mJC,GAAG;QAAC;QAAqE;KAAmE;AAC9I;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,MAAM,CAAC;IACPC,SAAS;QACPC,SAAS;IACX;IACAC,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAA0C;QAAgD;QAAwB;KAAmE;AAC3L;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEhB,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAyP;CAAyP;AAClkB,MAAMiB,oBAAoB,WAAW,GAAEb,IAAAA,eAAQ,EAAC;IAC9Cc,sBAAsB;QACpBC,QAAQ;IACV;IACAd,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPG,QAAQ;IACV;IACAC,MAAM,CAAC;IACPC,SAAS;QACPC,SAAS;IACX;IACAC,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMnB,kCAAkCwB,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACdxB,IAAI,EACJC,QAAQ,EACRwB,mBAAmB,WAAW,EAC/B,GAAGF;IACJ,MAAMG,gBAAgBxB;IACtB,MAAMyB,aAAarB;IACnB,MAAMsB,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBpB,KAAK8B,SAAS,GAAGC,IAAAA,mBAAY,EAACjC,wBAAwBE,IAAI,EAAE0B,eAAeC,UAAU,CAACF,iBAAiB,EAAEzB,KAAK8B,SAAS;IACvH,IAAI7B,UAAU;QACZA,SAAS6B,SAAS,GAAGC,IAAAA,mBAAY,EAACjC,wBAAwBG,QAAQ,EAAE2B,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEQ,cAAc,CAACJ,iBAAiB,EAAExB,SAAS6B,SAAS;IACpM;IACA,OAAOP;AACT,GACA,yDAAyD"}
|
|
1
|
+
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = /*#__PURE__*/__resetStyles(\"r1lfl7hp\", \"r1s42hiy\", {\n r: [\".r1lfl7hp{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1lfl7hp:focus{outline-style:none;}\", \".r1lfl7hp:focus-visible{outline-style:none;}\", \".r1lfl7hp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1lfl7hp[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1s42hiy{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1s42hiy:focus{outline-style:none;}\", \".r1s42hiy:focus-visible{outline-style:none;}\", \".r1s42hiy[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1s42hiy[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media screen and (max-width: 480px){.r1lfl7hp{max-width:100vw;}}\", \"@media screen and (max-width: 480px){.r1s42hiy{max-width:100vw;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n animated: {\n abs64n: \"fk73vx1\",\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f18ad807\",\n E5pizo: \"f1yzz98r\",\n Bz10aip: \"f15ofi6c\"\n },\n unmounted: {},\n entering: {},\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {},\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".fc397y7{transition-duration:var(--durationGentle);}\", \".f1b86uth{transition-property:opacity,transform,box-shadow;}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}\", \".f15ofi6c{transform:scale(0.85) translateZ(0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropBaseStyle = /*#__PURE__*/__resetStyles(\"raidwwn\", \"r17vltcu\", [\".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\", \".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n },\n unmounted: {},\n entering: {},\n entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {},\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const {\n isNestedDialog,\n root,\n backdrop,\n transitionStatus\n } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus && rootStyles.animated, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","useRootStyles","__styles","animated","abs64n","B3o57yi","Bmy1vo4","Bkqvd7p","E5pizo","Bz10aip","unmounted","entering","entered","idle","exiting","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA2DAC,+BAA+B;eAA/BA;;;uBA/DqD;AAI3D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAC1EC,GAAG;QAAC;QAA+lC;QAAwC;QAAgD;QAAiK;QAAmvB;QAA+lC;QAAwC;QAAgD;QAAiK;KAAkvB;IACzpIC,GAAG;QAAC;QAAqE;KAAoE;AAC/I;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPJ,QAAQ;QACRC,SAAS;QACTL,QAAQ;IACV;IACAS,MAAM,CAAC;IACPC,SAAS;QACPP,SAAS;IACX;IACAQ,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAwB;QAAwD;QAAgE;QAAoE;QAA6D;QAAmD;QAA0C;QAAgD;QAAwB;KAAmE;AAC/f;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEnB,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAyP;CAAyP;AAClkB,MAAMoB,oBAAoB,WAAW,GAAEhB,IAAAA,eAAQ,EAAC;IAC9CiB,sBAAsB;QACpBC,QAAQ;IACV;IACAV,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPR,QAAQ;IACV;IACAS,MAAM,CAAC;IACPC,SAAS;QACPP,SAAS;IACX;IACAQ,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMtB,kCAAkC2B,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACd3B,IAAI,EACJC,QAAQ,EACR2B,gBAAgB,EACjB,GAAGF;IACJ,MAAMG,gBAAgB3B;IACtB,MAAM4B,aAAaxB;IACnB,MAAMyB,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBvB,KAAKiC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,wBAAwBE,IAAI,EAAE6B,eAAeD,oBAAoBE,WAAWtB,QAAQ,EAAEoB,oBAAoBE,UAAU,CAACF,iBAAiB,EAAE5B,KAAKiC,SAAS;IACpL,IAAIhC,UAAU;QACZA,SAASgC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,wBAAwBG,QAAQ,EAAE8B,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEI,oBAAoBI,cAAc,CAACJ,iBAAiB,EAAE3B,SAASgC,SAAS;IACxN;IACA,OAAOP;AACT,GACA,yDAAyD"}
|
|
@@ -23,7 +23,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
23
23
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
24
24
|
/**
|
|
25
25
|
* @internal
|
|
26
|
-
*/ const defaultContextValue =
|
|
26
|
+
*/ const defaultContextValue = undefined;
|
|
27
27
|
const DialogTransitionContext = /*#__PURE__*/ _react.createContext(undefined);
|
|
28
28
|
const DialogTransitionProvider = DialogTransitionContext.Provider;
|
|
29
29
|
const useDialogTransitionContext_unstable = ()=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dialogTransitionContext.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n */ const defaultContextValue =
|
|
1
|
+
{"version":3,"sources":["dialogTransitionContext.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n */ const defaultContextValue = undefined;\n// Contexts should default to undefined\n/**\n * @internal\n */ export const DialogTransitionContext = React.createContext(undefined);\n/**\n * @internal\n */ export const DialogTransitionProvider = DialogTransitionContext.Provider;\n/**\n * @internal\n */ export const useDialogTransitionContext_unstable = ()=>{\n var _React_useContext;\n return (_React_useContext = React.useContext(DialogTransitionContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultContextValue;\n};\n"],"names":["DialogTransitionContext","DialogTransitionProvider","useDialogTransitionContext_unstable","defaultContextValue","undefined","React","createContext","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAOiBA,uBAAuB;eAAvBA;;IAGAC,wBAAwB;eAAxBA;;IAGAC,mCAAmC;eAAnCA;;;;iEAbM;AACvB;;CAEC,GAAG,MAAMC,sBAAsBC;AAIrB,MAAMJ,wCAA0BK,OAAMC,aAAa,CAACF;AAGpD,MAAMH,2BAA2BD,wBAAwBO,QAAQ;AAGjE,MAAML,sCAAsC;IACnD,IAAIM;IACJ,OAAO,AAACA,CAAAA,oBAAoBH,OAAMI,UAAU,CAACT,wBAAuB,MAAO,QAAQQ,sBAAsB,KAAK,IAAIA,oBAAoBL;AAC1I"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.8.
|
|
3
|
+
"version": "9.8.3",
|
|
4
4
|
"description": "Dialog component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
"react-transition-group": "^4.4.1",
|
|
42
42
|
"@fluentui/keyboard-keys": "^9.0.6",
|
|
43
43
|
"@fluentui/react-context-selector": "^9.1.41",
|
|
44
|
-
"@fluentui/react-shared-contexts": "^9.11.
|
|
44
|
+
"@fluentui/react-shared-contexts": "^9.11.1",
|
|
45
45
|
"@fluentui/react-aria": "^9.3.43",
|
|
46
46
|
"@fluentui/react-icons": "^2.0.217",
|
|
47
|
-
"@fluentui/react-tabster": "^9.14.
|
|
48
|
-
"@fluentui/react-theme": "^9.1.
|
|
49
|
-
"@fluentui/react-portal": "^9.3.
|
|
47
|
+
"@fluentui/react-tabster": "^9.14.3",
|
|
48
|
+
"@fluentui/react-theme": "^9.1.15",
|
|
49
|
+
"@fluentui/react-portal": "^9.3.27",
|
|
50
50
|
"@griffel/react": "^1.5.14",
|
|
51
51
|
"@swc/helpers": "^0.5.1"
|
|
52
52
|
},
|