@fluentui/react-dialog 9.7.1 → 9.7.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 +163 -1
- package/CHANGELOG.md +42 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/Dialog/Dialog.types.js.map +1 -1
- package/lib/components/Dialog/useDialog.js +1 -2
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js +12 -19
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js +7 -25
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.js +3 -27
- package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +2 -2
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +23 -94
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js +12 -83
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +5 -6
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib/contexts/dialogSurfaceContext.js +4 -2
- package/lib/contexts/dialogSurfaceContext.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialog.js +1 -2
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js +12 -31
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +8 -42
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js +5 -58
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +2 -2
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +40 -273
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js +27 -211
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +5 -6
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib-commonjs/contexts/dialogSurfaceContext.js +4 -2
- package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -1
- package/package.json +11 -11
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
4
4
|
import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING, useDialogContext_unstable } from '../../contexts';
|
|
@@ -6,95 +6,23 @@ export const dialogSurfaceClassNames = {
|
|
|
6
6
|
root: 'fui-DialogSurface',
|
|
7
7
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
8
8
|
};
|
|
9
|
+
/**
|
|
10
|
+
* Generic reusable backdrop styles
|
|
11
|
+
*/
|
|
12
|
+
export const backdropStyles = {
|
|
13
|
+
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
|
14
|
+
};
|
|
15
|
+
const nestedDialogBackdropStyles = {
|
|
16
|
+
backgroundColor: 'transparent'
|
|
17
|
+
};
|
|
9
18
|
/**
|
|
10
19
|
* Styles for the root slot
|
|
11
20
|
*/
|
|
21
|
+
const useRootResetStyles = /*#__PURE__*/__resetStyles("r3ej8vj", "r7xp5xy", {
|
|
22
|
+
r: [".r3ej8vj{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;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r3ej8vj:focus{outline-style:none;}", ".r3ej8vj:focus-visible{outline-style:none;}", ".r3ej8vj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r3ej8vj[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);}", ".r3ej8vj::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".r7xp5xy{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;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r7xp5xy:focus{outline-style:none;}", ".r7xp5xy:focus-visible{outline-style:none;}", ".r7xp5xy[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r7xp5xy[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);}", ".r7xp5xy::backdrop{background-color:rgba(0, 0, 0, 0.4);}"],
|
|
23
|
+
s: ["@media screen and (max-width: 480px){.r3ej8vj{max-width:100vw;}}", "@media screen and (max-width: 480px){.r7xp5xy{max-width:100vw;}}"]
|
|
24
|
+
});
|
|
12
25
|
const useStyles = /*#__PURE__*/__styles({
|
|
13
|
-
focusOutline: {
|
|
14
|
-
Brovlpu: "ftqa4ok",
|
|
15
|
-
B486eqv: "f2hkw1w",
|
|
16
|
-
B8q5s1w: "f8hki3x",
|
|
17
|
-
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
18
|
-
n8qw10: "f1bjia2o",
|
|
19
|
-
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
20
|
-
Bm4h7ae: "f15bsgw9",
|
|
21
|
-
B7ys5i9: "f14e48fq",
|
|
22
|
-
Busjfv9: "f18yb2kv",
|
|
23
|
-
Bhk32uz: "fd6o370",
|
|
24
|
-
Bf4ptjt: "fh1cnn4",
|
|
25
|
-
kclons: ["fy7oxxb", "f184ne2d"],
|
|
26
|
-
Bhdgwq3: "fpukqih",
|
|
27
|
-
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
28
|
-
Bqtpl0w: "frrh606",
|
|
29
|
-
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
30
|
-
hgwjuy: "ful5kiu",
|
|
31
|
-
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
32
|
-
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
33
|
-
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
34
|
-
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
35
|
-
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
36
|
-
B6dhp37: "f1dvezut",
|
|
37
|
-
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
38
|
-
Boxcth7: "fjvm52t",
|
|
39
|
-
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
40
|
-
J0r882: "f57olzd",
|
|
41
|
-
Bule8hv: ["f4stah7", "fs1por5"],
|
|
42
|
-
Bjwuhne: "f480a47",
|
|
43
|
-
Ghsupd: ["fs1por5", "f4stah7"]
|
|
44
|
-
},
|
|
45
|
-
root: {
|
|
46
|
-
mc9l5x: "ftgm304",
|
|
47
|
-
famaaq: "f1c515w",
|
|
48
|
-
Bcdw1i0: "f1bitti",
|
|
49
|
-
Bhzewxz: "f15twtuk",
|
|
50
|
-
j35jbq: ["f1e31b4d", "f1vgc2s3"],
|
|
51
|
-
B5kzvoi: "f1yab3r1",
|
|
52
|
-
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
|
|
53
|
-
z8tnut: "fuq56rw",
|
|
54
|
-
z189sj: ["f15kemlc", "fdgang7"],
|
|
55
|
-
Byoj8tv: "fl2zwns",
|
|
56
|
-
uwmqm3: ["fdgang7", "f15kemlc"],
|
|
57
|
-
B6of3ja: "fgr6219",
|
|
58
|
-
t21cq0: ["f1ujusj6", "fcgxt0o"],
|
|
59
|
-
jrapky: "f10jk5vf",
|
|
60
|
-
Frg6f3: ["fcgxt0o", "f1ujusj6"],
|
|
61
|
-
icvyot: "fzkkow9",
|
|
62
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
63
|
-
oivjwe: "fg706s2",
|
|
64
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
65
|
-
B68tc82: "f1ln0qer",
|
|
66
|
-
Bmxbyg5: "fa2wlxz",
|
|
67
|
-
fshzfu: "f120kxnn",
|
|
68
|
-
qhf8xq: "f19dog8a",
|
|
69
|
-
Bqenvij: "f3052tw",
|
|
70
|
-
B2u0y6b: "fvgz9i8",
|
|
71
|
-
Bxyxcbc: "f6a9g1z",
|
|
72
|
-
B7ck84d: "f1ewtqcl",
|
|
73
|
-
E5pizo: "f10nrhrw",
|
|
74
|
-
De3pzq: "fxugw4r",
|
|
75
|
-
sj55zd: "f19n0e5",
|
|
76
|
-
B4j52fo: "f5ogflp",
|
|
77
|
-
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
78
|
-
Bn0qgzm: "f1f09k3d",
|
|
79
|
-
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
80
|
-
g2u3we: "fghlq4f",
|
|
81
|
-
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
82
|
-
B9xav0g: "fb073pr",
|
|
83
|
-
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
84
|
-
Bbmb7ep: ["fnivh3a", "fc7yr5o"],
|
|
85
|
-
Beyfa6y: ["fc7yr5o", "fnivh3a"],
|
|
86
|
-
B7oj6ja: ["f1el4m67", "f8yange"],
|
|
87
|
-
Btl43ni: ["f8yange", "f1el4m67"],
|
|
88
|
-
B5xtmjs: "ff54dml"
|
|
89
|
-
},
|
|
90
|
-
backdrop: {
|
|
91
|
-
qhf8xq: "f19dog8a",
|
|
92
|
-
De3pzq: "fju19wo",
|
|
93
|
-
Bhzewxz: "f113wtx2",
|
|
94
|
-
j35jbq: ["f10k790i", "f1xynx9j"],
|
|
95
|
-
B5kzvoi: "f5gq2j6",
|
|
96
|
-
oyh7mz: ["f1xynx9j", "f10k790i"]
|
|
97
|
-
},
|
|
98
26
|
nestedDialogBackdrop: {
|
|
99
27
|
De3pzq: "f3rmtva"
|
|
100
28
|
},
|
|
@@ -102,22 +30,23 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
102
30
|
fshzfu: "foe20jx"
|
|
103
31
|
}
|
|
104
32
|
}, {
|
|
105
|
-
|
|
106
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
107
|
-
d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".ftgm304{display:block;}", ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}", ".f1bitti{visibility:unset;}", ".f15twtuk{top:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1yab3r1{bottom:0;}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".f19dog8a{position:fixed;}", ".f3052tw{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);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}", ".f113wtx2{top:0px;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f5gq2j6{bottom:0px;}", ".f3rmtva{background-color:transparent;}", ".foe20jx::backdrop{background-color:transparent;}"],
|
|
108
|
-
m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
|
|
109
|
-
m: "screen and (max-width: 480px)"
|
|
110
|
-
}]]
|
|
33
|
+
d: [".f3rmtva{background-color:transparent;}", ".foe20jx::backdrop{background-color:transparent;}"]
|
|
111
34
|
});
|
|
35
|
+
/**
|
|
36
|
+
* Styles for the backdrop slot
|
|
37
|
+
*/
|
|
38
|
+
const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rvs8970", "r1uj6nuu", [".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}", ".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"]);
|
|
112
39
|
/**
|
|
113
40
|
* Apply styling to the DialogSurface slots based on the state
|
|
114
41
|
*/
|
|
115
42
|
export const useDialogSurfaceStyles_unstable = state => {
|
|
43
|
+
const surfaceResetStyles = useRootResetStyles();
|
|
116
44
|
const styles = useStyles();
|
|
45
|
+
const backdropResetStyles = useBackdropResetStyles();
|
|
117
46
|
const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);
|
|
118
|
-
state.root.className = mergeClasses(dialogSurfaceClassNames.root,
|
|
47
|
+
state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
|
|
119
48
|
if (state.backdrop) {
|
|
120
|
-
state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop,
|
|
49
|
+
state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
|
|
121
50
|
}
|
|
122
51
|
return state;
|
|
123
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","useDialogContext_unstable","dialogSurfaceClassNames","root","backdrop","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","useDialogContext_unstable","dialogSurfaceClassNames","root","backdrop","backdropStyles","backgroundColor","nestedDialogBackdropStyles","useRootResetStyles","r","s","useStyles","nestedDialogBackdrop","De3pzq","nestedNativeDialogBackdrop","fshzfu","d","useBackdropResetStyles","useDialogSurfaceStyles_unstable","state","surfaceResetStyles","styles","backdropResetStyles","isNestedDialog","ctx","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, useDialogContext_unstable } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Generic reusable backdrop styles\n */ export const backdropStyles = {\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n};\nconst nestedDialogBackdropStyles = {\n backgroundColor: 'transparent'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = 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 boxShadow: tokens.shadow64,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n '&::backdrop': backdropStyles,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n }\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: nestedDialogBackdropStyles,\n nestedNativeDialogBackdrop: {\n '&::backdrop': nestedDialogBackdropStyles\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n ...shorthands.inset('0px'),\n ...backdropStyles,\n position: 'fixed'\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const surfaceResetStyles = useRootResetStyles();\n const styles = useStyles();\n const backdropResetStyles = useBackdropResetStyles();\n const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);\n state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.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,EAAEC,yBAAyB,QAAQ,gBAAgB;AAClI,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,cAAc,GAAG;EAC9BC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,0BAA0B,GAAG;EAC/BD,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAME,kBAAkB,gBAAGhB,aAAA;EAAAiB,CAAA;EAAAC,CAAA;AAAA,CA0B9B,CAAC;AACF,MAAMC,SAAS,gBAAGlB,QAAA;EAAAmB,oBAAA;IAAAC,MAAA;EAAA;EAAAC,0BAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGzB,aAAA,uOAIlC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM0B,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,kBAAkB,GAAGZ,kBAAkB,CAAC,CAAC;EAC/C,MAAMa,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1B,MAAMW,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EACpD,MAAMM,cAAc,GAAGtB,yBAAyB,CAAEuB,GAAG,IAAGA,GAAG,CAACD,cAAc,CAAC;EAC3EJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAG/B,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEiB,kBAAkB,EAAEG,cAAc,IAAIF,MAAM,CAACP,0BAA0B,EAAEK,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;EAChK,IAAIN,KAAK,CAACf,QAAQ,EAAE;IAChBe,KAAK,CAACf,QAAQ,CAACqB,SAAS,GAAG/B,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,mBAAmB,EAAEC,cAAc,IAAIF,MAAM,CAACT,oBAAoB,EAAEO,KAAK,CAACf,QAAQ,CAACqB,SAAS,CAAC;EAC3K;EACA,OAAON,KAAK;AAChB,CAAC"}
|
|
@@ -36,7 +36,7 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
|
|
|
36
36
|
action: "close"
|
|
37
37
|
}, /*#__PURE__*/ React.createElement("button", {
|
|
38
38
|
type: "button",
|
|
39
|
-
className: internalStyles
|
|
39
|
+
className: internalStyles,
|
|
40
40
|
// TODO: find a better way to add internal labels
|
|
41
41
|
"aria-label": "close"
|
|
42
42
|
}, /*#__PURE__*/ React.createElement(Dismiss20Regular, null)))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n const { as, action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'h2',\n action: 'div',\n },\n root: slot.always(\n getNativeElementProps(as ?? 'h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n { elementType: 'h2' },\n ),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles
|
|
1
|
+
{"version":3,"sources":["useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n const { as, action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'h2',\n action: 'div',\n },\n root: slot.always(\n getNativeElementProps(as ?? 'h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n { elementType: 'h2' },\n ),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss20Regular />\n </button>\n </DialogTrigger>\n ),\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,yBAAyB,QAAQ,+BAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,gCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,EAAE,EAAEC,MAAM,EAAE,GAAGH;IACvB,MAAMI,YAAYT,0BAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBR;IAEvB,OAAO;QACLS,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMd,KAAKe,MAAM,CACfhB,sBAAsBS,eAAAA,gBAAAA,KAAM,MAAM;YAChCD;YACAS,IAAIf,0BAA0BU,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAK;QAEtBT,QAAQT,KAAKmB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAACnB;oBAAcoB,0BAAAA;oBAAyBd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,oBAACzB;YAIT;YACAgB,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { typographyStyles } from '@fluentui/react-theme';
|
|
3
3
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
4
4
|
export const dialogTitleClassNames = {
|
|
@@ -8,104 +8,33 @@ export const dialogTitleClassNames = {
|
|
|
8
8
|
/**
|
|
9
9
|
* Styles for the root slot
|
|
10
10
|
*/
|
|
11
|
+
const useRootResetStyles = /*#__PURE__*/__resetStyles("rztv7rx", "rt0yqbx", [".rztv7rx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}", ".rt0yqbx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-left:0;margin-bottom:0;margin-right:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}"]);
|
|
11
12
|
const useStyles = /*#__PURE__*/__styles({
|
|
12
|
-
root: {
|
|
13
|
-
Ijaq50: "f16hsg94",
|
|
14
|
-
nk6f5a: "f1amvztq",
|
|
15
|
-
Br312pm: "fwpfdsa",
|
|
16
|
-
Bw0ie65: "fz1yyy6",
|
|
17
|
-
Bahqtrf: "fk6fouc",
|
|
18
|
-
Be2twd7: "f1pp30po",
|
|
19
|
-
Bhrd7zp: "fl43uef",
|
|
20
|
-
Bg96gwp: "f106mvju",
|
|
21
|
-
B6of3ja: "f1hu3pq6",
|
|
22
|
-
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
23
|
-
jrapky: "f19f4twv",
|
|
24
|
-
Frg6f3: ["f1tyq0we", "f11qmguv"]
|
|
25
|
-
},
|
|
26
13
|
rootWithoutAction: {
|
|
27
14
|
Bw0ie65: "fsyjsko"
|
|
28
|
-
},
|
|
29
|
-
action: {
|
|
30
|
-
Ijaq50: "f16hsg94",
|
|
31
|
-
nk6f5a: "f1amvztq",
|
|
32
|
-
Br312pm: "fis13di",
|
|
33
|
-
Bdqf98w: "f1a7i8kp",
|
|
34
|
-
qb2dma: "f9h729m"
|
|
35
15
|
}
|
|
36
16
|
}, {
|
|
37
|
-
d: [".
|
|
17
|
+
d: [".fsyjsko{grid-column-end:4;}"]
|
|
38
18
|
});
|
|
19
|
+
/**
|
|
20
|
+
* Styles for the action slot
|
|
21
|
+
*/
|
|
22
|
+
const useActionResetStyles = /*#__PURE__*/__resetStyles("r13kcrze", null, [".r13kcrze{grid-row-start:1;grid-row-end:1;grid-column-start:3;justify-self:end;align-self:start;}"]);
|
|
39
23
|
/**
|
|
40
24
|
* Styles to be applied on internal elements used by default action on non-modal Dialog
|
|
41
25
|
* @internal
|
|
42
26
|
*/
|
|
43
|
-
export const useDialogTitleInternalStyles = /*#__PURE__*/
|
|
44
|
-
button: {
|
|
45
|
-
qhf8xq: "f10pi13n",
|
|
46
|
-
B7ck84d: "f1e4lqlz",
|
|
47
|
-
De3pzq: "f1u2r49w",
|
|
48
|
-
sj55zd: "f1ym3bx4",
|
|
49
|
-
Bahqtrf: "f1mo0ibp",
|
|
50
|
-
Be2twd7: "fjoy568",
|
|
51
|
-
Bceei9c: "f1k6fduh",
|
|
52
|
-
Bg96gwp: "fez10in",
|
|
53
|
-
B68tc82: "f1mtd64y",
|
|
54
|
-
Bmxbyg5: "f1y7q3j9",
|
|
55
|
-
z8tnut: "f1g0x7ka",
|
|
56
|
-
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
57
|
-
Byoj8tv: "f1qch9an",
|
|
58
|
-
uwmqm3: ["f1cnd47f", "fhxju0i"],
|
|
59
|
-
icvyot: "f1ern45e",
|
|
60
|
-
vrafjx: ["f1n71otn", "f1deefiw"],
|
|
61
|
-
oivjwe: "f1h8hb77",
|
|
62
|
-
wvpqe5: ["f1deefiw", "f1n71otn"],
|
|
63
|
-
Bv0vk6g: "f37px4s",
|
|
64
|
-
fsow6f: "fgusgyc",
|
|
65
|
-
Brovlpu: "ftqa4ok",
|
|
66
|
-
B486eqv: "f2hkw1w",
|
|
67
|
-
B8q5s1w: "f8hki3x",
|
|
68
|
-
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
69
|
-
n8qw10: "f1bjia2o",
|
|
70
|
-
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
71
|
-
Bm4h7ae: "f15bsgw9",
|
|
72
|
-
B7ys5i9: "f14e48fq",
|
|
73
|
-
Busjfv9: "f18yb2kv",
|
|
74
|
-
Bhk32uz: "fd6o370",
|
|
75
|
-
Bf4ptjt: "fh1cnn4",
|
|
76
|
-
kclons: ["fy7oxxb", "f184ne2d"],
|
|
77
|
-
Bhdgwq3: "fpukqih",
|
|
78
|
-
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
79
|
-
Bqtpl0w: "frrh606",
|
|
80
|
-
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
81
|
-
hgwjuy: "ful5kiu",
|
|
82
|
-
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
83
|
-
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
84
|
-
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
85
|
-
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
86
|
-
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
87
|
-
B6dhp37: "f1dvezut",
|
|
88
|
-
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
89
|
-
Boxcth7: "fjvm52t",
|
|
90
|
-
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
91
|
-
J0r882: "f57olzd",
|
|
92
|
-
Bule8hv: ["f4stah7", "fs1por5"],
|
|
93
|
-
Bjwuhne: "f480a47",
|
|
94
|
-
Ghsupd: ["fs1por5", "f4stah7"]
|
|
95
|
-
}
|
|
96
|
-
}, {
|
|
97
|
-
d: [".f10pi13n{position:relative;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".f1k6fduh{cursor:pointer;}", ".fez10in{line-height:0;}", ".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;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}"],
|
|
98
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
99
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
100
|
-
});
|
|
27
|
+
export const useDialogTitleInternalStyles = /*#__PURE__*/__resetStyles("r1rmtaxz", "rk1fn6x", [".r1rmtaxz{overflow-x:visible;overflow-y:visible;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r1rmtaxz:focus{outline-style:none;}", ".r1rmtaxz:focus-visible{outline-style:none;}", ".r1rmtaxz[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1rmtaxz[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);}", ".rk1fn6x{overflow-x:visible;overflow-y:visible;padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".rk1fn6x:focus{outline-style:none;}", ".rk1fn6x:focus-visible{outline-style:none;}", ".rk1fn6x[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rk1fn6x[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);}"]);
|
|
101
28
|
/**
|
|
102
29
|
* Apply styling to the DialogTitle slots based on the state
|
|
103
30
|
*/
|
|
104
31
|
export const useDialogTitleStyles_unstable = state => {
|
|
32
|
+
const rootResetStyles = useRootResetStyles();
|
|
33
|
+
const actionResetStyles = useActionResetStyles();
|
|
105
34
|
const styles = useStyles();
|
|
106
|
-
state.root.className = mergeClasses(dialogTitleClassNames.root,
|
|
35
|
+
state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
|
|
107
36
|
if (state.action) {
|
|
108
|
-
state.action.className = mergeClasses(dialogTitleClassNames.action,
|
|
37
|
+
state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);
|
|
109
38
|
}
|
|
110
39
|
return state;
|
|
111
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n ...shorthands.margin(0),\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/**\n * Styles for the action slot\n */ const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */ export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGT,aAAA,+kBAO9B,CAAC;AACF,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGd,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMe,4BAA4B,gBAAGf,aAAA,ywFAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgB,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,eAAe,GAAGT,kBAAkB,CAAC,CAAC;EAC5C,MAAMU,iBAAiB,GAAGL,oBAAoB,CAAC,CAAC;EAChD,MAAMM,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACV,IAAI,CAACc,SAAS,GAAGnB,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEW,eAAe,EAAE,CAACD,KAAK,CAACT,MAAM,IAAIY,MAAM,CAACT,iBAAiB,EAAEM,KAAK,CAACV,IAAI,CAACc,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACa,SAAS,GAAGnB,YAAY,CAACI,qBAAqB,CAACE,MAAM,EAAEW,iBAAiB,EAAEF,KAAK,CAACT,MAAM,CAACa,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -9,15 +9,14 @@ import { useModalAttributes } from '@fluentui/react-tabster';
|
|
|
9
9
|
*
|
|
10
10
|
* @param props - props from this instance of DialogTrigger
|
|
11
11
|
*/ export const useDialogTrigger_unstable = (props)=>{
|
|
12
|
-
var _child, _child1, _child2, _child3;
|
|
13
12
|
const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();
|
|
14
13
|
const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;
|
|
15
14
|
const child = getTriggerChild(children);
|
|
16
15
|
const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
|
|
17
16
|
const { triggerAttributes } = useModalAttributes();
|
|
18
17
|
const handleClick = useEventCallback((event)=>{
|
|
19
|
-
var _child_props_onClick,
|
|
20
|
-
|
|
18
|
+
var _child_props_onClick, _child_props;
|
|
19
|
+
child === null || child === void 0 ? void 0 : (_child_props_onClick = (_child_props = child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);
|
|
21
20
|
if (!event.isDefaultPrevented()) {
|
|
22
21
|
requestOpenChange({
|
|
23
22
|
event,
|
|
@@ -27,12 +26,12 @@ import { useModalAttributes } from '@fluentui/react-tabster';
|
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
const triggerChildProps = {
|
|
30
|
-
...
|
|
31
|
-
ref:
|
|
29
|
+
...child === null || child === void 0 ? void 0 : child.props,
|
|
30
|
+
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
32
31
|
onClick: handleClick,
|
|
33
32
|
...triggerAttributes
|
|
34
33
|
};
|
|
35
|
-
const ariaButtonTriggerChildProps = useARIAButtonProps((
|
|
34
|
+
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
|
|
36
35
|
...triggerChildProps,
|
|
37
36
|
type: 'button'
|
|
38
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n const triggerChildProps = {\n ...child?.props,\n ref: child?.ref,\n onClick: handleClick,\n ...triggerAttributes,\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerChildProps,\n type: 'button',\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useModalAttributes","useDialogTrigger_unstable","props","
|
|
1
|
+
{"version":3,"sources":["useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n const triggerChildProps = {\n ...child?.props,\n ref: child?.ref,\n onClick: handleClick,\n ...triggerAttributes,\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerChildProps,\n type: 'button',\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useModalAttributes","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","onClick","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE3G,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,iBAAiB;AAC7F,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,wBAAwBL;IAE9B,MAAM,EAAEM,QAAQ,EAAEC,2BAA2B,KAAK,EAAEC,SAASH,wBAAwB,UAAU,MAAM,EAAE,GAAGD;IAE1G,MAAMK,QAAQZ,gBAAgBS;IAE9B,MAAMI,oBAAoBX,0BAA0BY,CAAAA,MAAOA,IAAID,iBAAiB;IAChF,MAAM,EAAEE,iBAAiB,EAAE,GAAGV;IAE9B,MAAMW,cAAcf,iBAClB,CAACgB;YACCL,sBAAAA;QAAAA,kBAAAA,6BAAAA,uBAAAA,CAAAA,eAAAA,MAAOL,KAAK,EAACW,OAAO,cAApBN,2CAAAA,0BAAAA,cAAuBK;QACvB,IAAI,CAACA,MAAME,kBAAkB,IAAI;YAC/BN,kBAAkB;gBAChBI;gBACAG,MAAM;gBACNC,MAAMV,WAAW;YACnB;QACF;IACF;IAGF,MAAMW,oBAAoB;WACrBV,kBAAAA,4BAAAA,MAAOL,KAAK,AAAf;QACAgB,GAAG,EAAEX,kBAAAA,4BAAAA,MAAOW,GAAG;QACfL,SAASF;QACT,GAAGD,iBAAiB;IACtB;IAEA,MAAMS,8BAA8BpB,mBAClCQ,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,YAAYR,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,MAAMR,MAAMQ,IAAI,GAAG,OAC/D;QACE,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IAGF,OAAO;QACLX,UAAUV,4BACRU,UACAC,2BAA2BY,oBAAoBE;IAEnD;AACF,EAAE"}
|
|
@@ -2,5 +2,7 @@ import { createContext, useContext } from 'react';
|
|
|
2
2
|
const defaultContextValue = false;
|
|
3
3
|
export const DialogSurfaceContext = createContext(undefined);
|
|
4
4
|
export const DialogSurfaceProvider = DialogSurfaceContext.Provider;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
export const useDialogSurfaceContext_unstable = ()=>{
|
|
6
|
+
var _useContext;
|
|
7
|
+
return (_useContext = useContext(DialogSurfaceContext)) !== null && _useContext !== void 0 ? _useContext : defaultContextValue;
|
|
8
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dialogSurfaceContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"names":["createContext","useContext","defaultContextValue","DialogSurfaceContext","undefined","DialogSurfaceProvider","Provider","useDialogSurfaceContext_unstable"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAIlD,MAAMC,sBAAiD;AAEvD,OAAO,MAAMC,uBAAuBH,cAAqDI,WAAW;AAEpG,OAAO,MAAMC,wBAAwBF,qBAAqBG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"sources":["dialogSurfaceContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"names":["createContext","useContext","defaultContextValue","DialogSurfaceContext","undefined","DialogSurfaceProvider","Provider","useDialogSurfaceContext_unstable"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAIlD,MAAMC,sBAAiD;AAEvD,OAAO,MAAMC,uBAAuBH,cAAqDI,WAAW;AAEpG,OAAO,MAAMC,wBAAwBF,qBAAqBG,QAAQ,CAAC;AAEnE,OAAO,MAAMC,mCAAmC;QAAMN;WAAAA,CAAAA,cAAAA,WAAWE,mCAAXF,yBAAAA,cAAoCC;AAAkB,EAAE"}
|
|
@@ -24,8 +24,7 @@ const useDialog_unstable = (props)=>{
|
|
|
24
24
|
initialState: false
|
|
25
25
|
});
|
|
26
26
|
const requestOpenChange = (0, _reactutilities.useEventCallback)((data)=>{
|
|
27
|
-
|
|
28
|
-
(_onOpenChange = onOpenChange) === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(data.event, data);
|
|
27
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);
|
|
29
28
|
// if user prevents default then do not change state value
|
|
30
29
|
// otherwise updates state value and trigger reference to the element that caused the opening
|
|
31
30
|
if (!data.event.isDefaultPrevented()) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */ export const useDialog_unstable = (props)=>{\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n const [trigger, content] = childrenToTriggerAndContent(children);\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const requestOpenChange = useEventCallback((data)=>{\n
|
|
1
|
+
{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */ export const useDialog_unstable = (props)=>{\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n const [trigger, content] = childrenToTriggerAndContent(children);\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const requestOpenChange = useEventCallback((data)=>{\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n const focusRef = useFocusFirstElement(open, modalType);\n const disableBodyScroll = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n useIsomorphicLayoutEffect(()=>{\n if (isBodyScrollLocked) {\n return disableBodyScroll();\n }\n }, [\n disableBodyScroll,\n isBodyScrollLocked\n ]);\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus\n });\n return {\n components: {\n backdrop: 'div'\n },\n inertTrapFocus,\n open,\n modalType,\n content: open ? content : null,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog: useHasParentContext(DialogContext),\n dialogRef: focusRef,\n modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n triggerAttributes\n };\n};\n/**\n * Extracts trigger and content from children\n */ function childrenToTriggerAndContent(children) {\n const childrenArray = React.Children.toArray(children);\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-dialog [useDialog]:\nDialog must contain at least one child <DialogSurface/>,\nand at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);\n }\n }\n switch(childrenArray.length){\n // case where there's a trigger followed by content\n case 2:\n return childrenArray;\n // case where there's only content\n case 1:\n return [\n undefined,\n childrenArray[0]\n ];\n // unknown case\n default:\n return [\n undefined,\n undefined\n ];\n }\n}\n"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","undefined","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACkE;sCACrD;uBACuB;0BAC7B;8BACK;AAQxB,MAAMA,qBAAqB,CAACC;IACnC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAChF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QACzCC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc;IAClB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAAC,CAACC;QACxCd,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED;QACrF,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YAClCV,QAAQQ,KAAKT,IAAI;QACrB;IACJ;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC;QACtB,IAAIF,oBAAoB;YACpB,OAAOF;QACX;IACJ,GAAG;QACCA;QACAE;KACH;IACD,MAAM,EAAEG,eAAe,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,gCAAkB,EAAC;QAC9DC,WAAW5B,cAAc;QACzB6B,iBAAiB,CAAC3B;IACtB;IACA,OAAO;QACH4B,YAAY;YACRC,UAAU;QACd;QACA7B;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU;QAC1BD;QACAU;QACAmB,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWnB;QACXO,iBAAiBzB,cAAc,cAAcyB,kBAAkBa;QAC/DZ;IACJ;AACJ;AACA;;CAEC,GAAG,SAASrB,4BAA4BN,QAAQ;IAC7C,MAAMwC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAAC3C;IAC7C,IAAI4C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC1D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;2EAEiD,CAAC;QACpE;IACJ;IACA,OAAOT,cAAcO,MAAM;QACvB,mDAAmD;QACnD,KAAK;YACD,OAAOP;QACX,kCAAkC;QAClC,KAAK;YACD,OAAO;gBACHD;gBACAC,aAAa,CAAC,EAAE;aACnB;QACL,eAAe;QACf;YACI,OAAO;gBACHD;gBACAA;aACH;IACT;AACJ"}
|
|
@@ -20,18 +20,17 @@ const _react = require("@griffel/react");
|
|
|
20
20
|
const dialogActionsClassNames = {
|
|
21
21
|
root: 'fui-DialogActions'
|
|
22
22
|
};
|
|
23
|
+
/**
|
|
24
|
+
* Styles for the root slot
|
|
25
|
+
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r78gbj", null, {
|
|
26
|
+
r: [
|
|
27
|
+
".r78gbj{column-gap:8px;row-gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"
|
|
28
|
+
],
|
|
29
|
+
s: [
|
|
30
|
+
"@media screen and (max-width: 480px){.r78gbj{flex-direction:column;justify-self:stretch;}}"
|
|
31
|
+
]
|
|
32
|
+
});
|
|
23
33
|
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
24
|
-
root: {
|
|
25
|
-
Bqenvij: "f3052tw",
|
|
26
|
-
B7ck84d: "f1ewtqcl",
|
|
27
|
-
mc9l5x: "f22iagw",
|
|
28
|
-
Ijaq50: "f1cztu7b",
|
|
29
|
-
nk6f5a: "fcu02xx",
|
|
30
|
-
i8kkvl: "f4px1ci",
|
|
31
|
-
Belr9w4: "fn67r4l",
|
|
32
|
-
Bmdcpmo: "f6glcwc",
|
|
33
|
-
th9wkt: "f1e3st1r"
|
|
34
|
-
},
|
|
35
34
|
gridPositionEnd: {
|
|
36
35
|
Bdqf98w: "f1a7i8kp",
|
|
37
36
|
Br312pm: "fd46tj4",
|
|
@@ -56,13 +55,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
56
55
|
}
|
|
57
56
|
}, {
|
|
58
57
|
d: [
|
|
59
|
-
".f3052tw{height:fit-content;}",
|
|
60
|
-
".f1ewtqcl{box-sizing:border-box;}",
|
|
61
|
-
".f22iagw{display:flex;}",
|
|
62
|
-
".f1cztu7b{grid-row-start:3;}",
|
|
63
|
-
".fcu02xx{grid-row-end:3;}",
|
|
64
|
-
".f4px1ci{column-gap:8px;}",
|
|
65
|
-
".fn67r4l{row-gap:8px;}",
|
|
66
58
|
".f1a7i8kp{justify-self:end;}",
|
|
67
59
|
".fd46tj4{grid-column-start:2;}",
|
|
68
60
|
".fsyjsko{grid-column-end:4;}",
|
|
@@ -71,18 +63,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
71
63
|
".f1e2fz10{grid-column-end:2;}"
|
|
72
64
|
],
|
|
73
65
|
m: [
|
|
74
|
-
[
|
|
75
|
-
"@media screen and (max-width: 480px){.f6glcwc{flex-direction:column;}}",
|
|
76
|
-
{
|
|
77
|
-
m: "screen and (max-width: 480px)"
|
|
78
|
-
}
|
|
79
|
-
],
|
|
80
|
-
[
|
|
81
|
-
"@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}",
|
|
82
|
-
{
|
|
83
|
-
m: "screen and (max-width: 480px)"
|
|
84
|
-
}
|
|
85
|
-
],
|
|
86
66
|
[
|
|
87
67
|
"@media screen and (max-width: 480px){.f1f41i0t{grid-column-start:1;}}",
|
|
88
68
|
{
|
|
@@ -116,7 +96,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
116
96
|
]
|
|
117
97
|
});
|
|
118
98
|
const useDialogActionsStyles_unstable = (state)=>{
|
|
99
|
+
const resetStyles = useResetStyles();
|
|
119
100
|
const styles = useStyles();
|
|
120
|
-
state.root.className = (0, _react.mergeClasses)(dialogActionsClassNames.root,
|
|
101
|
+
state.root.className = (0, _react.mergeClasses)(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
|
|
121
102
|
return state;
|
|
122
103
|
}; //# sourceMappingURL=useDialogActionsStyles.styles.js.map
|