@fluentui/react-dialog 9.7.0 → 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.
Files changed (45) hide show
  1. package/CHANGELOG.json +210 -9
  2. package/CHANGELOG.md +55 -2
  3. package/dist/index.d.ts +1 -1
  4. package/lib/components/Dialog/Dialog.types.js.map +1 -1
  5. package/lib/components/Dialog/useDialog.js +1 -2
  6. package/lib/components/Dialog/useDialog.js.map +1 -1
  7. package/lib/components/DialogActions/useDialogActionsStyles.styles.js +12 -19
  8. package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
  9. package/lib/components/DialogBody/useDialogBodyStyles.styles.js +7 -25
  10. package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
  11. package/lib/components/DialogContent/useDialogContentStyles.styles.js +3 -27
  12. package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
  13. package/lib/components/DialogSurface/useDialogSurface.js +2 -2
  14. package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
  15. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +23 -94
  16. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  17. package/lib/components/DialogTitle/useDialogTitle.js +1 -1
  18. package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
  19. package/lib/components/DialogTitle/useDialogTitleStyles.styles.js +12 -83
  20. package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
  21. package/lib/components/DialogTrigger/useDialogTrigger.js +5 -6
  22. package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
  23. package/lib/contexts/dialogSurfaceContext.js +4 -2
  24. package/lib/contexts/dialogSurfaceContext.js.map +1 -1
  25. package/lib-commonjs/components/Dialog/useDialog.js +1 -2
  26. package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
  27. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js +12 -31
  28. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
  29. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +8 -42
  30. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
  31. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js +5 -58
  32. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
  33. package/lib-commonjs/components/DialogSurface/useDialogSurface.js +2 -2
  34. package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
  35. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +40 -273
  36. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  37. package/lib-commonjs/components/DialogTitle/useDialogTitle.js +1 -1
  38. package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
  39. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js +27 -211
  40. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
  41. package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +5 -6
  42. package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
  43. package/lib-commonjs/contexts/dialogSurfaceContext.js +4 -2
  44. package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -1
  45. package/package.json +11 -11
package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js CHANGED
@@ -12,6 +12,9 @@ _export(exports, {
12
12
  dialogSurfaceClassNames: function() {
13
13
  return dialogSurfaceClassNames;
14
14
  },
15
+ backdropStyles: function() {
16
+ return backdropStyles;
17
+ },
15
18
  useDialogSurfaceStyles_unstable: function() {
16
19
  return useDialogSurfaceStyles_unstable;
17
20
  }
@@ -22,190 +25,35 @@ const dialogSurfaceClassNames = {
22
25
  root: 'fui-DialogSurface',
23
26
  backdrop: 'fui-DialogSurface__backdrop'
24
27
  };
28
+ const backdropStyles = {
29
+ backgroundColor: 'rgba(0, 0, 0, 0.4)'
30
+ };
31
+ const nestedDialogBackdropStyles = {
32
+ backgroundColor: 'transparent'
33
+ };
25
34
  /**
26
35
  * Styles for the root slot
27
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
28
- focusOutline: {
29
- Brovlpu: "ftqa4ok",
30
- B486eqv: "f2hkw1w",
31
- B8q5s1w: "f8hki3x",
32
- Bci5o5g: [
33
- "f1d2448m",
34
- "ffh67wi"
35
- ],
36
- n8qw10: "f1bjia2o",
37
- Bdrgwmp: [
38
- "ffh67wi",
39
- "f1d2448m"
40
- ],
41
- Bm4h7ae: "f15bsgw9",
42
- B7ys5i9: "f14e48fq",
43
- Busjfv9: "f18yb2kv",
44
- Bhk32uz: "fd6o370",
45
- Bf4ptjt: "fh1cnn4",
46
- kclons: [
47
- "fy7oxxb",
48
- "f184ne2d"
49
- ],
50
- Bhdgwq3: "fpukqih",
51
- Blkhhs4: [
52
- "f184ne2d",
53
- "fy7oxxb"
54
- ],
55
- Bqtpl0w: "frrh606",
56
- clg4pj: [
57
- "f1v5zibi",
58
- "fo2hd23"
59
- ],
60
- hgwjuy: "ful5kiu",
61
- Bonggc9: [
62
- "fo2hd23",
63
- "f1v5zibi"
64
- ],
65
- B1tsrr9: [
66
- "f1jqcqds",
67
- "ftffrms"
68
- ],
69
- Dah5zi: [
70
- "ftffrms",
71
- "f1jqcqds"
72
- ],
73
- Bkh64rk: [
74
- "f2e7qr6",
75
- "fsr1zz6"
76
- ],
77
- qqdqy8: [
78
- "fsr1zz6",
79
- "f2e7qr6"
80
- ],
81
- B6dhp37: "f1dvezut",
82
- i03rao: [
83
- "fd0oaoj",
84
- "f1cwg4i8"
85
- ],
86
- Boxcth7: "fjvm52t",
87
- Bsom6fd: [
88
- "f1cwg4i8",
89
- "fd0oaoj"
90
- ],
91
- J0r882: "f57olzd",
92
- Bule8hv: [
93
- "f4stah7",
94
- "fs1por5"
95
- ],
96
- Bjwuhne: "f480a47",
97
- Ghsupd: [
98
- "fs1por5",
99
- "f4stah7"
100
- ]
101
- },
102
- root: {
103
- mc9l5x: "ftgm304",
104
- famaaq: "f1c515w",
105
- Bcdw1i0: "f1bitti",
106
- Bhzewxz: "f15twtuk",
107
- j35jbq: [
108
- "f1e31b4d",
109
- "f1vgc2s3"
110
- ],
111
- B5kzvoi: "f1yab3r1",
112
- oyh7mz: [
113
- "f1vgc2s3",
114
- "f1e31b4d"
115
- ],
116
- z8tnut: "fuq56rw",
117
- z189sj: [
118
- "f15kemlc",
119
- "fdgang7"
120
- ],
121
- Byoj8tv: "fl2zwns",
122
- uwmqm3: [
123
- "fdgang7",
124
- "f15kemlc"
125
- ],
126
- B6of3ja: "fgr6219",
127
- t21cq0: [
128
- "f1ujusj6",
129
- "fcgxt0o"
130
- ],
131
- jrapky: "f10jk5vf",
132
- Frg6f3: [
133
- "fcgxt0o",
134
- "f1ujusj6"
135
- ],
136
- icvyot: "fzkkow9",
137
- vrafjx: [
138
- "fcdblym",
139
- "fjik90z"
140
- ],
141
- oivjwe: "fg706s2",
142
- wvpqe5: [
143
- "fjik90z",
144
- "fcdblym"
145
- ],
146
- B68tc82: "f1ln0qer",
147
- Bmxbyg5: "fa2wlxz",
148
- fshzfu: "f120kxnn",
149
- qhf8xq: "f19dog8a",
150
- Bqenvij: "f3052tw",
151
- B2u0y6b: "fvgz9i8",
152
- Bxyxcbc: "f6a9g1z",
153
- B7ck84d: "f1ewtqcl",
154
- E5pizo: "f10nrhrw",
155
- De3pzq: "fxugw4r",
156
- sj55zd: "f19n0e5",
157
- B4j52fo: "f5ogflp",
158
- Bekrc4i: [
159
- "f1hqa2wf",
160
- "finvdd3"
161
- ],
162
- Bn0qgzm: "f1f09k3d",
163
- ibv6hh: [
164
- "finvdd3",
165
- "f1hqa2wf"
166
- ],
167
- g2u3we: "fghlq4f",
168
- h3c5rm: [
169
- "f1gn591s",
170
- "fjscplz"
171
- ],
172
- B9xav0g: "fb073pr",
173
- zhjwy3: [
174
- "fjscplz",
175
- "f1gn591s"
176
- ],
177
- Bbmb7ep: [
178
- "fnivh3a",
179
- "fc7yr5o"
180
- ],
181
- Beyfa6y: [
182
- "fc7yr5o",
183
- "fnivh3a"
184
- ],
185
- B7oj6ja: [
186
- "f1el4m67",
187
- "f8yange"
188
- ],
189
- Btl43ni: [
190
- "f8yange",
191
- "f1el4m67"
192
- ],
193
- B5xtmjs: "ff54dml"
194
- },
195
- backdrop: {
196
- qhf8xq: "f19dog8a",
197
- De3pzq: "fju19wo",
198
- Bhzewxz: "f113wtx2",
199
- j35jbq: [
200
- "f10k790i",
201
- "f1xynx9j"
202
- ],
203
- B5kzvoi: "f5gq2j6",
204
- oyh7mz: [
205
- "f1xynx9j",
206
- "f10k790i"
207
- ]
208
- },
36
+ */ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r3ej8vj", "r7xp5xy", {
37
+ r: [
38
+ ".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);}",
39
+ ".r3ej8vj:focus{outline-style:none;}",
40
+ ".r3ej8vj:focus-visible{outline-style:none;}",
41
+ ".r3ej8vj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
42
+ ".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);}",
43
+ ".r3ej8vj::backdrop{background-color:rgba(0, 0, 0, 0.4);}",
44
+ ".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);}",
45
+ ".r7xp5xy:focus{outline-style:none;}",
46
+ ".r7xp5xy:focus-visible{outline-style:none;}",
47
+ ".r7xp5xy[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
48
+ ".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);}",
49
+ ".r7xp5xy::backdrop{background-color:rgba(0, 0, 0, 0.4);}"
50
+ ],
51
+ s: [
52
+ "@media screen and (max-width: 480px){.r3ej8vj{max-width:100vw;}}",
53
+ "@media screen and (max-width: 480px){.r7xp5xy{max-width:100vw;}}"
54
+ ]
55
+ });
56
+ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
209
57
  nestedDialogBackdrop: {
210
58
  De3pzq: "f3rmtva"
211
59
  },
@@ -213,106 +61,25 @@ const dialogSurfaceClassNames = {
213
61
  fshzfu: "foe20jx"
214
62
  }
215
63
  }, {
216
- f: [
217
- ".ftqa4ok:focus{outline-style:none;}"
218
- ],
219
- i: [
220
- ".f2hkw1w:focus-visible{outline-style:none;}"
221
- ],
222
64
  d: [
223
- ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
224
- ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
225
- ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
226
- ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
227
- ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
228
- ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
229
- ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
230
- ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
231
- ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}",
232
- ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}",
233
- ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}",
234
- ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}",
235
- ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}",
236
- ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}",
237
- ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}",
238
- ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}",
239
- ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
240
- ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
241
- ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}",
242
- ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}",
243
- ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}",
244
- ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}",
245
- ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}",
246
- ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
247
- ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}",
248
- ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}",
249
- ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}",
250
- ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}",
251
- ".ftgm304{display:block;}",
252
- ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}",
253
- ".f1bitti{visibility:unset;}",
254
- ".f15twtuk{top:0;}",
255
- ".f1e31b4d{right:0;}",
256
- ".f1vgc2s3{left:0;}",
257
- ".f1yab3r1{bottom:0;}",
258
- ".fuq56rw{padding-top:24px;}",
259
- ".f15kemlc{padding-right:24px;}",
260
- ".fdgang7{padding-left:24px;}",
261
- ".fl2zwns{padding-bottom:24px;}",
262
- ".fgr6219{margin-top:auto;}",
263
- ".f1ujusj6{margin-right:auto;}",
264
- ".fcgxt0o{margin-left:auto;}",
265
- ".f10jk5vf{margin-bottom:auto;}",
266
- ".fzkkow9{border-top-style:solid;}",
267
- ".fcdblym{border-right-style:solid;}",
268
- ".fjik90z{border-left-style:solid;}",
269
- ".fg706s2{border-bottom-style:solid;}",
270
- ".f1ln0qer{overflow-x:unset;}",
271
- ".fa2wlxz{overflow-y:unset;}",
272
- ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}",
273
- ".f19dog8a{position:fixed;}",
274
- ".f3052tw{height:fit-content;}",
275
- ".fvgz9i8{max-width:600px;}",
276
- ".f6a9g1z{max-height:100vh;}",
277
- ".f1ewtqcl{box-sizing:border-box;}",
278
- ".f10nrhrw{box-shadow:var(--shadow64);}",
279
- ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
280
- ".f19n0e5{color:var(--colorNeutralForeground1);}",
281
- ".f5ogflp{border-top-width:1px;}",
282
- ".f1hqa2wf{border-right-width:1px;}",
283
- ".finvdd3{border-left-width:1px;}",
284
- ".f1f09k3d{border-bottom-width:1px;}",
285
- ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
286
- ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
287
- ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
288
- ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
289
- ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
290
- ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
291
- ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}",
292
- ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}",
293
- ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}",
294
- ".f113wtx2{top:0px;}",
295
- ".f10k790i{right:0px;}",
296
- ".f1xynx9j{left:0px;}",
297
- ".f5gq2j6{bottom:0px;}",
298
65
  ".f3rmtva{background-color:transparent;}",
299
66
  ".foe20jx::backdrop{background-color:transparent;}"
300
- ],
301
- m: [
302
- [
303
- "@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}",
304
- {
305
- m: "screen and (max-width: 480px)"
306
- }
307
- ]
308
67
  ]
309
68
  });
69
+ /**
70
+ * Styles for the backdrop slot
71
+ */ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rvs8970", "r1uj6nuu", [
72
+ ".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}",
73
+ ".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"
74
+ ]);
310
75
  const useDialogSurfaceStyles_unstable = (state)=>{
76
+ const surfaceResetStyles = useRootResetStyles();
311
77
  const styles = useStyles();
78
+ const backdropResetStyles = useBackdropResetStyles();
312
79
  const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
313
- state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, styles.root, styles.focusOutline, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
80
+ state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
314
81
  if (state.backdrop) {
315
- state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, styles.backdrop, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
82
+ state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
316
83
  }
317
84
  return state;
318
85
  }; //# sourceMappingURL=useDialogSurfaceStyles.styles.js.map
package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __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, useDialogContext_unstable } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n focusOutline: {\n Brovlpu: \"ftqa4ok\",\n B486eqv: \"f2hkw1w\",\n B8q5s1w: \"f8hki3x\",\n Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n n8qw10: \"f1bjia2o\",\n Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n Bm4h7ae: \"f15bsgw9\",\n B7ys5i9: \"f14e48fq\",\n Busjfv9: \"f18yb2kv\",\n Bhk32uz: \"fd6o370\",\n Bf4ptjt: \"fh1cnn4\",\n kclons: [\"fy7oxxb\", \"f184ne2d\"],\n Bhdgwq3: \"fpukqih\",\n Blkhhs4: [\"f184ne2d\", \"fy7oxxb\"],\n Bqtpl0w: \"frrh606\",\n clg4pj: [\"f1v5zibi\", \"fo2hd23\"],\n hgwjuy: \"ful5kiu\",\n Bonggc9: [\"fo2hd23\", \"f1v5zibi\"],\n B1tsrr9: [\"f1jqcqds\", \"ftffrms\"],\n Dah5zi: [\"ftffrms\", \"f1jqcqds\"],\n Bkh64rk: [\"f2e7qr6\", \"fsr1zz6\"],\n qqdqy8: [\"fsr1zz6\", \"f2e7qr6\"],\n B6dhp37: \"f1dvezut\",\n i03rao: [\"fd0oaoj\", \"f1cwg4i8\"],\n Boxcth7: \"fjvm52t\",\n Bsom6fd: [\"f1cwg4i8\", \"fd0oaoj\"],\n J0r882: \"f57olzd\",\n Bule8hv: [\"f4stah7\", \"fs1por5\"],\n Bjwuhne: \"f480a47\",\n Ghsupd: [\"fs1por5\", \"f4stah7\"]\n },\n root: {\n mc9l5x: \"ftgm304\",\n famaaq: \"f1c515w\",\n Bcdw1i0: \"f1bitti\",\n Bhzewxz: \"f15twtuk\",\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n B5kzvoi: \"f1yab3r1\",\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n z8tnut: \"fuq56rw\",\n z189sj: [\"f15kemlc\", \"fdgang7\"],\n Byoj8tv: \"fl2zwns\",\n uwmqm3: [\"fdgang7\", \"f15kemlc\"],\n B6of3ja: \"fgr6219\",\n t21cq0: [\"f1ujusj6\", \"fcgxt0o\"],\n jrapky: \"f10jk5vf\",\n Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n B68tc82: \"f1ln0qer\",\n Bmxbyg5: \"fa2wlxz\",\n fshzfu: \"f120kxnn\",\n qhf8xq: \"f19dog8a\",\n Bqenvij: \"f3052tw\",\n B2u0y6b: \"fvgz9i8\",\n Bxyxcbc: \"f6a9g1z\",\n B7ck84d: \"f1ewtqcl\",\n E5pizo: \"f10nrhrw\",\n De3pzq: \"fxugw4r\",\n sj55zd: \"f19n0e5\",\n B4j52fo: \"f5ogflp\",\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n Bn0qgzm: \"f1f09k3d\",\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"],\n Bbmb7ep: [\"fnivh3a\", \"fc7yr5o\"],\n Beyfa6y: [\"fc7yr5o\", \"fnivh3a\"],\n B7oj6ja: [\"f1el4m67\", \"f8yange\"],\n Btl43ni: [\"f8yange\", \"f1el4m67\"],\n B5xtmjs: \"ff54dml\"\n },\n backdrop: {\n qhf8xq: \"f19dog8a\",\n De3pzq: \"fju19wo\",\n Bhzewxz: \"f113wtx2\",\n j35jbq: [\"f10k790i\", \"f1xynx9j\"],\n B5kzvoi: \"f5gq2j6\",\n oyh7mz: [\"f1xynx9j\", \"f10k790i\"]\n },\n nestedDialogBackdrop: {\n De3pzq: \"f3rmtva\"\n },\n nestedNativeDialogBackdrop: {\n fshzfu: \"foe20jx\"\n }\n}, {\n f: [\".ftqa4ok:focus{outline-style:none;}\"],\n i: [\".f2hkw1w:focus-visible{outline-style:none;}\"],\n 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;}\"],\n m: [[\"@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}\", {\n m: \"screen and (max-width: 480px)\"\n }]]\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const styles = useStyles();\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.root, styles.focusOutline, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, styles.backdrop, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useStyles","__styles","focusOutline","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","mc9l5x","famaaq","Bcdw1i0","Bhzewxz","j35jbq","B5kzvoi","oyh7mz","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","icvyot","vrafjx","oivjwe","wvpqe5","B68tc82","Bmxbyg5","fshzfu","qhf8xq","Bqenvij","B2u0y6b","Bxyxcbc","B7ck84d","E5pizo","De3pzq","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B5xtmjs","nestedDialogBackdrop","nestedNativeDialogBackdrop","f","i","d","m","state","styles","isNestedDialog","useDialogContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}
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, useDialogContext_unstable } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Generic reusable backdrop styles\n */\nexport 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 */\nconst useRootResetStyles = /*#__PURE__*/__resetStyles(\"r3ej8vj\", \"r7xp5xy\", {\n 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);}\"],\n s: [\"@media screen and (max-width: 480px){.r3ej8vj{max-width:100vw;}}\", \"@media screen and (max-width: 480px){.r7xp5xy{max-width:100vw;}}\"]\n});\nconst useStyles = /*#__PURE__*/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f3rmtva\"\n },\n nestedNativeDialogBackdrop: {\n fshzfu: \"foe20jx\"\n }\n}, {\n d: [\".f3rmtva{background-color:transparent;}\", \".foe20jx::backdrop{background-color:transparent;}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst 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;}\"]);\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport 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//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","backdropStyles","useDialogSurfaceStyles_unstable","root","backdrop","backgroundColor","nestedDialogBackdropStyles","useRootResetStyles","__resetStyles","r","s","useStyles","__styles","nestedDialogBackdrop","De3pzq","nestedNativeDialogBackdrop","fshzfu","d","useBackdropResetStyles","state","surfaceResetStyles","styles","backdropResetStyles","isNestedDialog","useDialogContext_unstable","ctx","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAOAC,cAAc;eAAdA;;IA8BAC,+BAA+B;eAA/BA;;;uBAzCqD;0BAGgD;AAC3G,MAAMF,0BAA0B;IACrCG,MAAM;IACNC,UAAU;AACZ;AAIO,MAAMH,iBAAiB;IAC5BI,iBAAiB;AACnB;AACA,MAAMC,6BAA6B;IACjCD,iBAAiB;AACnB;AACA;;CAEC,GACD,MAAME,qBAAqB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,WAAW;IAC1EC,GAAG;QAAC;QAAynC;QAAuC;QAA+C;QAAgK;QAAkvB;QAA4D;QAAynC;QAAuC;QAA+C;QAAgK;QAAkvB;KAA2D;IAC7zIC,GAAG;QAAC;QAAoE;KAAmE;AAC7I;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,sBAAsB;QACpBC,QAAQ;IACV;IACAC,4BAA4B;QAC1BC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA2C;KAAoD;AACrG;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAEV,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAuG;CAAuG;AAIzR,MAAMN,kCAAkCiB,CAAAA;IAC7C,MAAMC,qBAAqBb;IAC3B,MAAMc,SAASV;IACf,MAAMW,sBAAsBJ;IAC5B,MAAMK,iBAAiBC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,cAAc;IAC1EJ,MAAMhB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC3B,wBAAwBG,IAAI,EAAEiB,oBAAoBG,kBAAkBF,OAAON,0BAA0B,EAAEI,MAAMhB,IAAI,CAACuB,SAAS;IAC/J,IAAIP,MAAMf,QAAQ,EAAE;QAClBe,MAAMf,QAAQ,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAAC3B,wBAAwBI,QAAQ,EAAEkB,qBAAqBC,kBAAkBF,OAAOR,oBAAoB,EAAEM,MAAMf,QAAQ,CAACsB,SAAS;IACxK;IACA,OAAOP;AACT,GACA,yDAAyD"}
package/lib-commonjs/components/DialogTitle/useDialogTitle.js CHANGED
@@ -39,7 +39,7 @@ const useDialogTitle_unstable = (props, ref)=>{
39
39
  action: "close"
40
40
  }, /*#__PURE__*/ _react.createElement("button", {
41
41
  type: "button",
42
- className: internalStyles.button,
42
+ className: internalStyles,
43
43
  // TODO: find a better way to add internal labels
44
44
  "aria-label": "close"
45
45
  }, /*#__PURE__*/ _react.createElement(_reacticons.Dismiss20Regular, null)))
package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\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 */ export const useDialogTitle_unstable = (props, ref)=>{\n const { as, action } = props;\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n return {\n components: {\n root: 'h2',\n action: 'div'\n },\n root: slot.always(getNativeElementProps(as !== null && as !== void 0 ? 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: /*#__PURE__*/ React.createElement(DialogTrigger, {\n disableButtonEnhancement: true,\n action: \"close\"\n }, /*#__PURE__*/ React.createElement(\"button\", {\n type: \"button\",\n className: internalStyles.button,\n // TODO: find a better way to add internal labels\n \"aria-label\": \"close\"\n }, /*#__PURE__*/ React.createElement(Dismiss20Regular, null)))\n },\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogTitle_unstable","props","ref","as","action","modalType","useDialogContext_unstable","ctx","internalStyles","useDialogTitleInternalStyles","components","root","slot","always","getNativeElementProps","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","React","createElement","DialogTrigger","disableButtonEnhancement","type","className","button","Dismiss20Regular"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACqB;+BACF;4BACT;+BACH;4CACe;AASlC,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAM,EAAEC,EAAE,EAAEC,MAAM,EAAE,GAAGH;IACvB,MAAMI,YAAYC,IAAAA,wCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBC,IAAAA,wDAA4B;IACnD,OAAO;QACHC,YAAY;YACRC,MAAM;YACNP,QAAQ;QACZ;QACAO,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAACX,OAAO,QAAQA,OAAO,KAAK,IAAIA,KAAK,MAAM;YAC9ED;YACAa,IAAIT,IAAAA,wCAAyB,EAAC,CAACC,MAAMA,IAAIS,aAAa;YACtD,GAAGf,KAAK;QACZ,IAAI;YACAgB,aAAa;QACjB;QACAb,QAAQQ,oBAAI,CAACM,QAAQ,CAACd,QAAQ;YAC1Be,iBAAiBd,cAAc;YAC/Be,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,4BAAa,EAAE;oBACvDC,0BAA0B;oBAC1BrB,QAAQ;gBACZ,GAAG,WAAW,GAAGkB,OAAMC,aAAa,CAAC,UAAU;oBAC3CG,MAAM;oBACNC,WAAWnB,eAAeoB,MAAM;oBAChC,iDAAiD;oBACjD,cAAc;gBAClB,GAAG,WAAW,GAAGN,OAAMC,aAAa,CAACM,4BAAgB,EAAE;YAC3D;YACAZ,aAAa;QACjB;IACJ;AACJ"}
1
+ {"version":3,"sources":["useDialogTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\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 */ export const useDialogTitle_unstable = (props, ref)=>{\n const { as, action } = props;\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n return {\n components: {\n root: 'h2',\n action: 'div'\n },\n root: slot.always(getNativeElementProps(as !== null && as !== void 0 ? 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: /*#__PURE__*/ React.createElement(DialogTrigger, {\n disableButtonEnhancement: true,\n action: \"close\"\n }, /*#__PURE__*/ React.createElement(\"button\", {\n type: \"button\",\n className: internalStyles,\n // TODO: find a better way to add internal labels\n \"aria-label\": \"close\"\n }, /*#__PURE__*/ React.createElement(Dismiss20Regular, null)))\n },\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogTitle_unstable","props","ref","as","action","modalType","useDialogContext_unstable","ctx","internalStyles","useDialogTitleInternalStyles","components","root","slot","always","getNativeElementProps","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","React","createElement","DialogTrigger","disableButtonEnhancement","type","className","Dismiss20Regular"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACqB;+BACF;4BACT;+BACH;4CACe;AASlC,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAM,EAAEC,EAAE,EAAEC,MAAM,EAAE,GAAGH;IACvB,MAAMI,YAAYC,IAAAA,wCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBC,IAAAA,wDAA4B;IACnD,OAAO;QACHC,YAAY;YACRC,MAAM;YACNP,QAAQ;QACZ;QACAO,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAACX,OAAO,QAAQA,OAAO,KAAK,IAAIA,KAAK,MAAM;YAC9ED;YACAa,IAAIT,IAAAA,wCAAyB,EAAC,CAACC,MAAMA,IAAIS,aAAa;YACtD,GAAGf,KAAK;QACZ,IAAI;YACAgB,aAAa;QACjB;QACAb,QAAQQ,oBAAI,CAACM,QAAQ,CAACd,QAAQ;YAC1Be,iBAAiBd,cAAc;YAC/Be,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,4BAAa,EAAE;oBACvDC,0BAA0B;oBAC1BrB,QAAQ;gBACZ,GAAG,WAAW,GAAGkB,OAAMC,aAAa,CAAC,UAAU;oBAC3CG,MAAM;oBACNC,WAAWnB;oBACX,iDAAiD;oBACjD,cAAc;gBAClB,GAAG,WAAW,GAAGc,OAAMC,aAAa,CAACK,4BAAgB,EAAE;YAC3D;YACAX,aAAa;QACjB;IACJ;AACJ"}