@justeattakeaway/pie-modal 0.36.2 → 0.38.0
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/custom-elements.json +721 -0
- package/dist/index.d.ts +14 -15
- package/dist/index.js +2 -2
- package/dist/react.d.ts +26 -24
- package/dist/react.js +11 -11
- package/package.json +16 -9
- package/src/defs-react.ts +3 -0
- package/src/defs.ts +12 -12
- package/src/index.ts +2 -2
- package/src/react.ts +32 -0
|
@@ -0,0 +1,721 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/defs-react.js",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": []
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"kind": "javascript-module",
|
|
13
|
+
"path": "src/defs.js",
|
|
14
|
+
"declarations": [
|
|
15
|
+
{
|
|
16
|
+
"kind": "variable",
|
|
17
|
+
"name": "headingLevels",
|
|
18
|
+
"type": {
|
|
19
|
+
"text": "['h1', 'h2', 'h3', 'h4', 'h5', 'h6']"
|
|
20
|
+
},
|
|
21
|
+
"default": "['h1', 'h2', 'h3', 'h4', 'h5', 'h6']"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "variable",
|
|
25
|
+
"name": "sizes",
|
|
26
|
+
"type": {
|
|
27
|
+
"text": "['small', 'medium', 'large']"
|
|
28
|
+
},
|
|
29
|
+
"default": "['small', 'medium', 'large']"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"kind": "variable",
|
|
33
|
+
"name": "positions",
|
|
34
|
+
"type": {
|
|
35
|
+
"text": "['top', 'center']"
|
|
36
|
+
},
|
|
37
|
+
"default": "['top', 'center']"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"kind": "variable",
|
|
41
|
+
"name": "ON_MODAL_CLOSE_EVENT",
|
|
42
|
+
"type": {
|
|
43
|
+
"text": "string"
|
|
44
|
+
},
|
|
45
|
+
"default": "'pie-modal-close'",
|
|
46
|
+
"description": "Event name for when the modal is closed."
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"kind": "variable",
|
|
50
|
+
"name": "ON_MODAL_OPEN_EVENT",
|
|
51
|
+
"type": {
|
|
52
|
+
"text": "string"
|
|
53
|
+
},
|
|
54
|
+
"default": "'pie-modal-open'",
|
|
55
|
+
"description": "Event name for when the modal is opened."
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"kind": "variable",
|
|
59
|
+
"name": "ON_MODAL_BACK_EVENT",
|
|
60
|
+
"type": {
|
|
61
|
+
"text": "string"
|
|
62
|
+
},
|
|
63
|
+
"default": "'pie-modal-back'",
|
|
64
|
+
"description": "Event name for when the modal back button is clicked."
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"kind": "variable",
|
|
68
|
+
"name": "ON_MODAL_LEADING_ACTION_CLICK",
|
|
69
|
+
"type": {
|
|
70
|
+
"text": "string"
|
|
71
|
+
},
|
|
72
|
+
"default": "'pie-modal-leading-action-click'",
|
|
73
|
+
"description": "Event name for when the modal leading action is clicked."
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "variable",
|
|
77
|
+
"name": "ON_MODAL_SUPPORTING_ACTION_CLICK",
|
|
78
|
+
"type": {
|
|
79
|
+
"text": "string"
|
|
80
|
+
},
|
|
81
|
+
"default": "'pie-modal-supporting-action-click'",
|
|
82
|
+
"description": "Event name for when the modal supporting action is clicked."
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"exports": [
|
|
86
|
+
{
|
|
87
|
+
"kind": "js",
|
|
88
|
+
"name": "headingLevels",
|
|
89
|
+
"declaration": {
|
|
90
|
+
"name": "headingLevels",
|
|
91
|
+
"module": "src/defs.js"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"kind": "js",
|
|
96
|
+
"name": "sizes",
|
|
97
|
+
"declaration": {
|
|
98
|
+
"name": "sizes",
|
|
99
|
+
"module": "src/defs.js"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"kind": "js",
|
|
104
|
+
"name": "positions",
|
|
105
|
+
"declaration": {
|
|
106
|
+
"name": "positions",
|
|
107
|
+
"module": "src/defs.js"
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"kind": "js",
|
|
112
|
+
"name": "ON_MODAL_CLOSE_EVENT",
|
|
113
|
+
"declaration": {
|
|
114
|
+
"name": "ON_MODAL_CLOSE_EVENT",
|
|
115
|
+
"module": "src/defs.js"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"kind": "js",
|
|
120
|
+
"name": "ON_MODAL_OPEN_EVENT",
|
|
121
|
+
"declaration": {
|
|
122
|
+
"name": "ON_MODAL_OPEN_EVENT",
|
|
123
|
+
"module": "src/defs.js"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"kind": "js",
|
|
128
|
+
"name": "ON_MODAL_BACK_EVENT",
|
|
129
|
+
"declaration": {
|
|
130
|
+
"name": "ON_MODAL_BACK_EVENT",
|
|
131
|
+
"module": "src/defs.js"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"kind": "js",
|
|
136
|
+
"name": "ON_MODAL_LEADING_ACTION_CLICK",
|
|
137
|
+
"declaration": {
|
|
138
|
+
"name": "ON_MODAL_LEADING_ACTION_CLICK",
|
|
139
|
+
"module": "src/defs.js"
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "js",
|
|
144
|
+
"name": "ON_MODAL_SUPPORTING_ACTION_CLICK",
|
|
145
|
+
"declaration": {
|
|
146
|
+
"name": "ON_MODAL_SUPPORTING_ACTION_CLICK",
|
|
147
|
+
"module": "src/defs.js"
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"kind": "javascript-module",
|
|
154
|
+
"path": "src/index.js",
|
|
155
|
+
"declarations": [
|
|
156
|
+
{
|
|
157
|
+
"kind": "class",
|
|
158
|
+
"description": "",
|
|
159
|
+
"name": "PieModal",
|
|
160
|
+
"members": [
|
|
161
|
+
{
|
|
162
|
+
"kind": "field",
|
|
163
|
+
"name": "aria",
|
|
164
|
+
"type": {
|
|
165
|
+
"text": "AriaProps"
|
|
166
|
+
},
|
|
167
|
+
"privacy": "public",
|
|
168
|
+
"attribute": "aria"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"kind": "field",
|
|
172
|
+
"name": "heading",
|
|
173
|
+
"type": {
|
|
174
|
+
"text": "string"
|
|
175
|
+
},
|
|
176
|
+
"privacy": "public",
|
|
177
|
+
"attribute": "heading"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"kind": "field",
|
|
181
|
+
"name": "headingLevel",
|
|
182
|
+
"type": {
|
|
183
|
+
"text": "ModalProps['headingLevel']"
|
|
184
|
+
},
|
|
185
|
+
"privacy": "public",
|
|
186
|
+
"default": "'h2'",
|
|
187
|
+
"attribute": "headingLevel"
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"kind": "field",
|
|
191
|
+
"name": "hasBackButton",
|
|
192
|
+
"type": {
|
|
193
|
+
"text": "boolean"
|
|
194
|
+
},
|
|
195
|
+
"privacy": "public",
|
|
196
|
+
"default": "false",
|
|
197
|
+
"attribute": "hasBackButton"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"kind": "field",
|
|
201
|
+
"name": "hasStackedActions",
|
|
202
|
+
"type": {
|
|
203
|
+
"text": "boolean"
|
|
204
|
+
},
|
|
205
|
+
"privacy": "public",
|
|
206
|
+
"default": "false",
|
|
207
|
+
"attribute": "hasStackedActions"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "field",
|
|
211
|
+
"name": "isDismissible",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "boolean"
|
|
214
|
+
},
|
|
215
|
+
"privacy": "public",
|
|
216
|
+
"default": "false",
|
|
217
|
+
"attribute": "isDismissible",
|
|
218
|
+
"reflects": true
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"kind": "field",
|
|
222
|
+
"name": "isFooterPinned",
|
|
223
|
+
"type": {
|
|
224
|
+
"text": "boolean"
|
|
225
|
+
},
|
|
226
|
+
"privacy": "public",
|
|
227
|
+
"default": "true",
|
|
228
|
+
"attribute": "isFooterPinned"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"kind": "field",
|
|
232
|
+
"name": "isFullWidthBelowMid",
|
|
233
|
+
"type": {
|
|
234
|
+
"text": "boolean"
|
|
235
|
+
},
|
|
236
|
+
"privacy": "public",
|
|
237
|
+
"default": "false",
|
|
238
|
+
"attribute": "isFullWidthBelowMid"
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"kind": "field",
|
|
242
|
+
"name": "isLoading",
|
|
243
|
+
"type": {
|
|
244
|
+
"text": "boolean"
|
|
245
|
+
},
|
|
246
|
+
"privacy": "public",
|
|
247
|
+
"default": "false",
|
|
248
|
+
"attribute": "isLoading",
|
|
249
|
+
"reflects": true
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"kind": "field",
|
|
253
|
+
"name": "isOpen",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "boolean"
|
|
256
|
+
},
|
|
257
|
+
"privacy": "public",
|
|
258
|
+
"default": "false",
|
|
259
|
+
"attribute": "isOpen"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"kind": "field",
|
|
263
|
+
"name": "leadingAction",
|
|
264
|
+
"type": {
|
|
265
|
+
"text": "ActionProps"
|
|
266
|
+
},
|
|
267
|
+
"privacy": "public",
|
|
268
|
+
"attribute": "leadingAction"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"kind": "field",
|
|
272
|
+
"name": "position",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "ModalProps['position']"
|
|
275
|
+
},
|
|
276
|
+
"privacy": "public",
|
|
277
|
+
"default": "'center'",
|
|
278
|
+
"attribute": "position"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"kind": "field",
|
|
282
|
+
"name": "returnFocusAfterCloseSelector",
|
|
283
|
+
"type": {
|
|
284
|
+
"text": "string | undefined"
|
|
285
|
+
},
|
|
286
|
+
"privacy": "public",
|
|
287
|
+
"attribute": "returnFocusAfterCloseSelector"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"kind": "field",
|
|
291
|
+
"name": "size",
|
|
292
|
+
"type": {
|
|
293
|
+
"text": "ModalProps['size']"
|
|
294
|
+
},
|
|
295
|
+
"privacy": "public",
|
|
296
|
+
"default": "'medium'",
|
|
297
|
+
"attribute": "size"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"kind": "field",
|
|
301
|
+
"name": "supportingAction",
|
|
302
|
+
"type": {
|
|
303
|
+
"text": "ActionProps"
|
|
304
|
+
},
|
|
305
|
+
"privacy": "public",
|
|
306
|
+
"attribute": "supportingAction"
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"kind": "field",
|
|
310
|
+
"name": "_dialog",
|
|
311
|
+
"type": {
|
|
312
|
+
"text": "HTMLDialogElement | undefined"
|
|
313
|
+
},
|
|
314
|
+
"privacy": "private"
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"kind": "field",
|
|
318
|
+
"name": "_backButtonClicked",
|
|
319
|
+
"type": {
|
|
320
|
+
"text": "boolean"
|
|
321
|
+
},
|
|
322
|
+
"privacy": "private",
|
|
323
|
+
"default": "false"
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"kind": "method",
|
|
327
|
+
"name": "_handleModalOpened",
|
|
328
|
+
"privacy": "private",
|
|
329
|
+
"return": {
|
|
330
|
+
"type": {
|
|
331
|
+
"text": "void"
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
"parameters": [
|
|
335
|
+
{
|
|
336
|
+
"name": "event",
|
|
337
|
+
"type": {
|
|
338
|
+
"text": "CustomEvent"
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
],
|
|
342
|
+
"description": "Opens the dialog element and disables page scrolling"
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"kind": "method",
|
|
346
|
+
"name": "_handleModalClosed",
|
|
347
|
+
"privacy": "private",
|
|
348
|
+
"return": {
|
|
349
|
+
"type": {
|
|
350
|
+
"text": "void"
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
"parameters": [
|
|
354
|
+
{
|
|
355
|
+
"name": "event",
|
|
356
|
+
"type": {
|
|
357
|
+
"text": "CustomEvent"
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
],
|
|
361
|
+
"description": "Closes the dialog element and re-enables page scrolling"
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"kind": "field",
|
|
365
|
+
"name": "_handleDialogCancelEvent",
|
|
366
|
+
"privacy": "private",
|
|
367
|
+
"description": "Prevents the user from dismissing the dialog via the `cancel`\nevent (ESC key) when `isDismissible` is set to false.",
|
|
368
|
+
"parameters": [
|
|
369
|
+
{
|
|
370
|
+
"description": "The event object.",
|
|
371
|
+
"name": "event",
|
|
372
|
+
"type": {
|
|
373
|
+
"text": "Event"
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
]
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"kind": "method",
|
|
380
|
+
"name": "_handleModalOpenStateOnFirstRender",
|
|
381
|
+
"privacy": "private",
|
|
382
|
+
"return": {
|
|
383
|
+
"type": {
|
|
384
|
+
"text": "void"
|
|
385
|
+
}
|
|
386
|
+
},
|
|
387
|
+
"parameters": [
|
|
388
|
+
{
|
|
389
|
+
"name": "changedProperties",
|
|
390
|
+
"type": {
|
|
391
|
+
"text": "PropertyValues<this>"
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
]
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
"kind": "method",
|
|
398
|
+
"name": "_handleModalOpenStateChanged",
|
|
399
|
+
"privacy": "private",
|
|
400
|
+
"return": {
|
|
401
|
+
"type": {
|
|
402
|
+
"text": "void"
|
|
403
|
+
}
|
|
404
|
+
},
|
|
405
|
+
"parameters": [
|
|
406
|
+
{
|
|
407
|
+
"name": "changedProperties",
|
|
408
|
+
"type": {
|
|
409
|
+
"text": "PropertyValues<this>"
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
]
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"kind": "method",
|
|
416
|
+
"name": "_handleActionClick",
|
|
417
|
+
"privacy": "private",
|
|
418
|
+
"return": {
|
|
419
|
+
"type": {
|
|
420
|
+
"text": "void"
|
|
421
|
+
}
|
|
422
|
+
},
|
|
423
|
+
"parameters": [
|
|
424
|
+
{
|
|
425
|
+
"name": "actionType",
|
|
426
|
+
"type": {
|
|
427
|
+
"text": "ModalActionType"
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
]
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"kind": "method",
|
|
434
|
+
"name": "_returnFocus",
|
|
435
|
+
"privacy": "private",
|
|
436
|
+
"return": {
|
|
437
|
+
"type": {
|
|
438
|
+
"text": "void"
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
"description": "Return focus to the specified element, providing the selector is valid\nand the chosen element can be found."
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
"kind": "method",
|
|
445
|
+
"name": "renderCloseButton",
|
|
446
|
+
"privacy": "private",
|
|
447
|
+
"return": {
|
|
448
|
+
"type": {
|
|
449
|
+
"text": "TemplateResult"
|
|
450
|
+
}
|
|
451
|
+
},
|
|
452
|
+
"description": "Template for the close button element. Called within the\nmain render function."
|
|
453
|
+
},
|
|
454
|
+
{
|
|
455
|
+
"kind": "method",
|
|
456
|
+
"name": "renderBackButton",
|
|
457
|
+
"privacy": "private",
|
|
458
|
+
"return": {
|
|
459
|
+
"type": {
|
|
460
|
+
"text": "TemplateResult"
|
|
461
|
+
}
|
|
462
|
+
},
|
|
463
|
+
"description": "Template for the back button element. Called within the\nmain render function."
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"kind": "method",
|
|
467
|
+
"name": "renderLeadingAction",
|
|
468
|
+
"privacy": "private",
|
|
469
|
+
"return": {
|
|
470
|
+
"type": {
|
|
471
|
+
"text": "TemplateResult | typeof nothing"
|
|
472
|
+
}
|
|
473
|
+
},
|
|
474
|
+
"description": "Render leadingAction button depending on prop availability.\n\n1. If the prop `leadingAction` is not provided, the button is not rendered.\n2. If the prop `leadingAction` is provided but any of the optional properties\nare not provided, they fall back to their default values."
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
"kind": "method",
|
|
478
|
+
"name": "renderSupportingAction",
|
|
479
|
+
"privacy": "private",
|
|
480
|
+
"return": {
|
|
481
|
+
"type": {
|
|
482
|
+
"text": "TemplateResult | typeof nothing"
|
|
483
|
+
}
|
|
484
|
+
},
|
|
485
|
+
"description": "Render supportingAction button depending on prop availability.\n\n1. If the prop `supportingAction` is not provided, the button is not rendered.\n2. If the prop `supportingAction` is provided but any of the optional properties\nare not provided, they fall back to their default values.\n3. If `supportingAction` is provided but not `leadingAction`, log a warning and do\nnot render `supportingAction`."
|
|
486
|
+
},
|
|
487
|
+
{
|
|
488
|
+
"kind": "method",
|
|
489
|
+
"name": "renderModalContentAndFooter",
|
|
490
|
+
"privacy": "private",
|
|
491
|
+
"return": {
|
|
492
|
+
"type": {
|
|
493
|
+
"text": "TemplateResult"
|
|
494
|
+
}
|
|
495
|
+
},
|
|
496
|
+
"description": "Renders the modal inner content and footer of the modal."
|
|
497
|
+
},
|
|
498
|
+
{
|
|
499
|
+
"kind": "field",
|
|
500
|
+
"name": "_handleDialogLightDismiss",
|
|
501
|
+
"privacy": "private",
|
|
502
|
+
"description": "Dismisses the modal on backdrop click if `isDismissible` is `true`.",
|
|
503
|
+
"parameters": [
|
|
504
|
+
{
|
|
505
|
+
"description": "the click event targetting the modal/backdrop",
|
|
506
|
+
"name": "event",
|
|
507
|
+
"type": {
|
|
508
|
+
"text": "MouseEvent"
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
]
|
|
512
|
+
},
|
|
513
|
+
{
|
|
514
|
+
"kind": "method",
|
|
515
|
+
"name": "_dispatchModalCustomEvent",
|
|
516
|
+
"privacy": "private",
|
|
517
|
+
"return": {
|
|
518
|
+
"type": {
|
|
519
|
+
"text": "void"
|
|
520
|
+
}
|
|
521
|
+
},
|
|
522
|
+
"parameters": [
|
|
523
|
+
{
|
|
524
|
+
"name": "eventType",
|
|
525
|
+
"type": {
|
|
526
|
+
"text": "string"
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
],
|
|
530
|
+
"description": "Note: We should aim to have a shareable event helper system to allow\nus to share this across components in-future.\n\nDispatch a custom event.\n\nTo be used whenever we have behavioural events we want to\nbubble up through the modal."
|
|
531
|
+
}
|
|
532
|
+
],
|
|
533
|
+
"events": [
|
|
534
|
+
{
|
|
535
|
+
"type": {
|
|
536
|
+
"text": "CustomEvent"
|
|
537
|
+
},
|
|
538
|
+
"description": "when the modal is opened.",
|
|
539
|
+
"name": "pie-modal-open"
|
|
540
|
+
},
|
|
541
|
+
{
|
|
542
|
+
"type": {
|
|
543
|
+
"text": "CustomEvent"
|
|
544
|
+
},
|
|
545
|
+
"description": "when the modal is closed.",
|
|
546
|
+
"name": "pie-modal-close"
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"type": {
|
|
550
|
+
"text": "CustomEvent"
|
|
551
|
+
},
|
|
552
|
+
"description": "when the modal back button is clicked.",
|
|
553
|
+
"name": "pie-modal-back"
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"type": {
|
|
557
|
+
"text": "CustomEvent"
|
|
558
|
+
},
|
|
559
|
+
"description": "when the modal leading action is clicked.",
|
|
560
|
+
"name": "pie-modal-leading-action-click"
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"type": {
|
|
564
|
+
"text": "CustomEvent"
|
|
565
|
+
},
|
|
566
|
+
"description": "when the modal supporting action is clicked.",
|
|
567
|
+
"name": "pie-modal-supporting-action-click"
|
|
568
|
+
}
|
|
569
|
+
],
|
|
570
|
+
"attributes": [
|
|
571
|
+
{
|
|
572
|
+
"name": "aria",
|
|
573
|
+
"type": {
|
|
574
|
+
"text": "AriaProps"
|
|
575
|
+
},
|
|
576
|
+
"fieldName": "aria"
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"name": "heading",
|
|
580
|
+
"type": {
|
|
581
|
+
"text": "string"
|
|
582
|
+
},
|
|
583
|
+
"fieldName": "heading"
|
|
584
|
+
},
|
|
585
|
+
{
|
|
586
|
+
"name": "headingLevel",
|
|
587
|
+
"type": {
|
|
588
|
+
"text": "ModalProps['headingLevel']"
|
|
589
|
+
},
|
|
590
|
+
"default": "'h2'",
|
|
591
|
+
"fieldName": "headingLevel"
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"name": "hasBackButton",
|
|
595
|
+
"type": {
|
|
596
|
+
"text": "boolean"
|
|
597
|
+
},
|
|
598
|
+
"default": "false",
|
|
599
|
+
"fieldName": "hasBackButton"
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"name": "hasStackedActions",
|
|
603
|
+
"type": {
|
|
604
|
+
"text": "boolean"
|
|
605
|
+
},
|
|
606
|
+
"default": "false",
|
|
607
|
+
"fieldName": "hasStackedActions"
|
|
608
|
+
},
|
|
609
|
+
{
|
|
610
|
+
"name": "isDismissible",
|
|
611
|
+
"type": {
|
|
612
|
+
"text": "boolean"
|
|
613
|
+
},
|
|
614
|
+
"default": "false",
|
|
615
|
+
"fieldName": "isDismissible"
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "isFooterPinned",
|
|
619
|
+
"type": {
|
|
620
|
+
"text": "boolean"
|
|
621
|
+
},
|
|
622
|
+
"default": "true",
|
|
623
|
+
"fieldName": "isFooterPinned"
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"name": "isFullWidthBelowMid",
|
|
627
|
+
"type": {
|
|
628
|
+
"text": "boolean"
|
|
629
|
+
},
|
|
630
|
+
"default": "false",
|
|
631
|
+
"fieldName": "isFullWidthBelowMid"
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"name": "isLoading",
|
|
635
|
+
"type": {
|
|
636
|
+
"text": "boolean"
|
|
637
|
+
},
|
|
638
|
+
"default": "false",
|
|
639
|
+
"fieldName": "isLoading"
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"name": "isOpen",
|
|
643
|
+
"type": {
|
|
644
|
+
"text": "boolean"
|
|
645
|
+
},
|
|
646
|
+
"default": "false",
|
|
647
|
+
"fieldName": "isOpen"
|
|
648
|
+
},
|
|
649
|
+
{
|
|
650
|
+
"name": "leadingAction",
|
|
651
|
+
"type": {
|
|
652
|
+
"text": "ActionProps"
|
|
653
|
+
},
|
|
654
|
+
"fieldName": "leadingAction"
|
|
655
|
+
},
|
|
656
|
+
{
|
|
657
|
+
"name": "position",
|
|
658
|
+
"type": {
|
|
659
|
+
"text": "ModalProps['position']"
|
|
660
|
+
},
|
|
661
|
+
"default": "'center'",
|
|
662
|
+
"fieldName": "position"
|
|
663
|
+
},
|
|
664
|
+
{
|
|
665
|
+
"name": "returnFocusAfterCloseSelector",
|
|
666
|
+
"type": {
|
|
667
|
+
"text": "string | undefined"
|
|
668
|
+
},
|
|
669
|
+
"fieldName": "returnFocusAfterCloseSelector"
|
|
670
|
+
},
|
|
671
|
+
{
|
|
672
|
+
"name": "size",
|
|
673
|
+
"type": {
|
|
674
|
+
"text": "ModalProps['size']"
|
|
675
|
+
},
|
|
676
|
+
"default": "'medium'",
|
|
677
|
+
"fieldName": "size"
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
"name": "supportingAction",
|
|
681
|
+
"type": {
|
|
682
|
+
"text": "ActionProps"
|
|
683
|
+
},
|
|
684
|
+
"fieldName": "supportingAction"
|
|
685
|
+
}
|
|
686
|
+
],
|
|
687
|
+
"mixins": [
|
|
688
|
+
{
|
|
689
|
+
"name": "RtlMixin",
|
|
690
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
691
|
+
}
|
|
692
|
+
],
|
|
693
|
+
"superclass": {
|
|
694
|
+
"name": "LitElement",
|
|
695
|
+
"package": "lit"
|
|
696
|
+
},
|
|
697
|
+
"tagName": "pie-modal",
|
|
698
|
+
"customElement": true
|
|
699
|
+
}
|
|
700
|
+
],
|
|
701
|
+
"exports": [
|
|
702
|
+
{
|
|
703
|
+
"kind": "js",
|
|
704
|
+
"name": "*",
|
|
705
|
+
"declaration": {
|
|
706
|
+
"name": "*",
|
|
707
|
+
"package": "./defs"
|
|
708
|
+
}
|
|
709
|
+
},
|
|
710
|
+
{
|
|
711
|
+
"kind": "js",
|
|
712
|
+
"name": "PieModal",
|
|
713
|
+
"declaration": {
|
|
714
|
+
"name": "PieModal",
|
|
715
|
+
"module": "src/index.js"
|
|
716
|
+
}
|
|
717
|
+
}
|
|
718
|
+
]
|
|
719
|
+
}
|
|
720
|
+
]
|
|
721
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { CSSResult } from 'lit';
|
|
|
2
2
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
4
|
import type { PropertyValues } from 'lit';
|
|
5
|
+
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
5
6
|
import type { TemplateResult } from 'lit';
|
|
6
7
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
7
8
|
|
|
@@ -42,11 +43,11 @@ export declare type ModalProps = {
|
|
|
42
43
|
/**
|
|
43
44
|
* When true, the modal will have a back button. This currently behaves the same as the close button.
|
|
44
45
|
*/
|
|
45
|
-
hasBackButton
|
|
46
|
+
hasBackButton?: boolean;
|
|
46
47
|
/**
|
|
47
48
|
* When true, the modal will have a back button. This currently behaves the same as the close button.
|
|
48
49
|
*/
|
|
49
|
-
hasStackedActions
|
|
50
|
+
hasStackedActions?: boolean;
|
|
50
51
|
/**
|
|
51
52
|
* The text to display in the modal's heading.
|
|
52
53
|
*/
|
|
@@ -54,11 +55,11 @@ export declare type ModalProps = {
|
|
|
54
55
|
/**
|
|
55
56
|
* The HTML heading tag to use for the modal's heading. Can be h1-h6.
|
|
56
57
|
*/
|
|
57
|
-
headingLevel
|
|
58
|
+
headingLevel?: typeof headingLevels[number];
|
|
58
59
|
/**
|
|
59
60
|
* When true, the modal will be open.
|
|
60
61
|
*/
|
|
61
|
-
isOpen
|
|
62
|
+
isOpen?: boolean;
|
|
62
63
|
/**
|
|
63
64
|
* When set to `true`:
|
|
64
65
|
* 1. The close button within the modal will be visible.
|
|
@@ -70,24 +71,24 @@ export declare type ModalProps = {
|
|
|
70
71
|
* 2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
|
|
71
72
|
*
|
|
72
73
|
*/
|
|
73
|
-
isDismissible
|
|
74
|
+
isDismissible?: boolean;
|
|
74
75
|
/**
|
|
75
76
|
* When false, the modal footer will scroll with the content inside the modal body.
|
|
76
77
|
*/
|
|
77
|
-
isFooterPinned
|
|
78
|
+
isFooterPinned?: boolean;
|
|
78
79
|
/**
|
|
79
80
|
* This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
|
|
80
81
|
*/
|
|
81
|
-
isFullWidthBelowMid
|
|
82
|
+
isFullWidthBelowMid?: boolean;
|
|
82
83
|
/**
|
|
83
84
|
* When true, displays a loading spinner in the modal.
|
|
84
85
|
*/
|
|
85
|
-
isLoading
|
|
86
|
+
isLoading?: boolean;
|
|
86
87
|
/**
|
|
87
88
|
* The leading action configuration for the modal.
|
|
88
89
|
*/
|
|
89
|
-
leadingAction
|
|
90
|
-
position
|
|
90
|
+
leadingAction?: ActionProps;
|
|
91
|
+
position?: typeof positions[number];
|
|
91
92
|
/**
|
|
92
93
|
* The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
|
|
93
94
|
*/
|
|
@@ -95,11 +96,11 @@ export declare type ModalProps = {
|
|
|
95
96
|
/**
|
|
96
97
|
* The size of the modal; this controls how wide it will appear on the page.
|
|
97
98
|
*/
|
|
98
|
-
size
|
|
99
|
+
size?: typeof sizes[number];
|
|
99
100
|
/**
|
|
100
101
|
* The supporting action configuration for the modal.
|
|
101
102
|
*/
|
|
102
|
-
supportingAction
|
|
103
|
+
supportingAction?: ActionProps;
|
|
103
104
|
};
|
|
104
105
|
|
|
105
106
|
/**
|
|
@@ -252,9 +253,7 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
252
253
|
private _dispatchModalCustomEvent;
|
|
253
254
|
}
|
|
254
255
|
|
|
255
|
-
declare const PieModal_base: GenericConstructor<
|
|
256
|
-
isRTL: boolean;
|
|
257
|
-
}> & typeof LitElement;
|
|
256
|
+
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof LitElement;
|
|
258
257
|
|
|
259
258
|
export declare const positions: readonly ["top", "center"];
|
|
260
259
|
|
package/dist/index.js
CHANGED
package/dist/react.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
|
-
import type { EventName } from '@lit/react';
|
|
3
2
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import type { LitElement } from 'lit';
|
|
5
4
|
import type { PropertyValues } from 'lit';
|
|
6
|
-
import
|
|
5
|
+
import * as React_2 from 'react';
|
|
6
|
+
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
7
|
import type { TemplateResult } from 'lit';
|
|
8
8
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
9
9
|
|
|
@@ -40,11 +40,11 @@ export declare type ModalProps = {
|
|
|
40
40
|
/**
|
|
41
41
|
* When true, the modal will have a back button. This currently behaves the same as the close button.
|
|
42
42
|
*/
|
|
43
|
-
hasBackButton
|
|
43
|
+
hasBackButton?: boolean;
|
|
44
44
|
/**
|
|
45
45
|
* When true, the modal will have a back button. This currently behaves the same as the close button.
|
|
46
46
|
*/
|
|
47
|
-
hasStackedActions
|
|
47
|
+
hasStackedActions?: boolean;
|
|
48
48
|
/**
|
|
49
49
|
* The text to display in the modal's heading.
|
|
50
50
|
*/
|
|
@@ -52,11 +52,11 @@ export declare type ModalProps = {
|
|
|
52
52
|
/**
|
|
53
53
|
* The HTML heading tag to use for the modal's heading. Can be h1-h6.
|
|
54
54
|
*/
|
|
55
|
-
headingLevel
|
|
55
|
+
headingLevel?: typeof headingLevels[number];
|
|
56
56
|
/**
|
|
57
57
|
* When true, the modal will be open.
|
|
58
58
|
*/
|
|
59
|
-
isOpen
|
|
59
|
+
isOpen?: boolean;
|
|
60
60
|
/**
|
|
61
61
|
* When set to `true`:
|
|
62
62
|
* 1. The close button within the modal will be visible.
|
|
@@ -68,24 +68,24 @@ export declare type ModalProps = {
|
|
|
68
68
|
* 2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
|
|
69
69
|
*
|
|
70
70
|
*/
|
|
71
|
-
isDismissible
|
|
71
|
+
isDismissible?: boolean;
|
|
72
72
|
/**
|
|
73
73
|
* When false, the modal footer will scroll with the content inside the modal body.
|
|
74
74
|
*/
|
|
75
|
-
isFooterPinned
|
|
75
|
+
isFooterPinned?: boolean;
|
|
76
76
|
/**
|
|
77
77
|
* This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
|
|
78
78
|
*/
|
|
79
|
-
isFullWidthBelowMid
|
|
79
|
+
isFullWidthBelowMid?: boolean;
|
|
80
80
|
/**
|
|
81
81
|
* When true, displays a loading spinner in the modal.
|
|
82
82
|
*/
|
|
83
|
-
isLoading
|
|
83
|
+
isLoading?: boolean;
|
|
84
84
|
/**
|
|
85
85
|
* The leading action configuration for the modal.
|
|
86
86
|
*/
|
|
87
|
-
leadingAction
|
|
88
|
-
position
|
|
87
|
+
leadingAction?: ActionProps;
|
|
88
|
+
position?: typeof positions[number];
|
|
89
89
|
/**
|
|
90
90
|
* The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
|
|
91
91
|
*/
|
|
@@ -93,11 +93,11 @@ export declare type ModalProps = {
|
|
|
93
93
|
/**
|
|
94
94
|
* The size of the modal; this controls how wide it will appear on the page.
|
|
95
95
|
*/
|
|
96
|
-
size
|
|
96
|
+
size?: typeof sizes[number];
|
|
97
97
|
/**
|
|
98
98
|
* The supporting action configuration for the modal.
|
|
99
99
|
*/
|
|
100
|
-
supportingAction
|
|
100
|
+
supportingAction?: ActionProps;
|
|
101
101
|
};
|
|
102
102
|
|
|
103
103
|
/**
|
|
@@ -135,13 +135,7 @@ export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
|
|
|
135
135
|
*/
|
|
136
136
|
export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-action-click";
|
|
137
137
|
|
|
138
|
-
export declare const PieModal:
|
|
139
|
-
onPieModalOpen: EventName<CustomEvent<any>>;
|
|
140
|
-
onPieModalClose: EventName<CustomEvent<any>>;
|
|
141
|
-
onPieModalBack: EventName<CustomEvent<any>>;
|
|
142
|
-
onPieModalLeadingActionClick: EventName<CustomEvent<any>>;
|
|
143
|
-
onPieModalSupportingActionClick: EventName<CustomEvent<any>>;
|
|
144
|
-
}>;
|
|
138
|
+
export declare const PieModal: React_2.ForwardRefExoticComponent<ModalProps & React_2.RefAttributes<PieModal_2> & PieModalEvents & ReactBaseType>;
|
|
145
139
|
|
|
146
140
|
/**
|
|
147
141
|
* @tagname pie-modal
|
|
@@ -258,12 +252,20 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
258
252
|
private _dispatchModalCustomEvent;
|
|
259
253
|
}
|
|
260
254
|
|
|
261
|
-
declare const PieModal_base: GenericConstructor<
|
|
262
|
-
|
|
263
|
-
|
|
255
|
+
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof LitElement;
|
|
256
|
+
|
|
257
|
+
declare type PieModalEvents = {
|
|
258
|
+
onPieModalOpen?: (event: CustomEvent<any>) => void;
|
|
259
|
+
onPieModalClose?: (event: CustomEvent<any>) => void;
|
|
260
|
+
onPieModalBack?: (event: CustomEvent<any>) => void;
|
|
261
|
+
onPieModalLeadingActionClick?: (event: CustomEvent<any>) => void;
|
|
262
|
+
onPieModalSupportingActionClick?: (event: CustomEvent<any>) => void;
|
|
263
|
+
};
|
|
264
264
|
|
|
265
265
|
export declare const positions: readonly ["top", "center"];
|
|
266
266
|
|
|
267
|
+
declare type ReactBaseType = React_2.DialogHTMLAttributes<HTMLDialogElement>;
|
|
268
|
+
|
|
267
269
|
export declare const sizes: readonly ["small", "medium", "large"];
|
|
268
270
|
|
|
269
271
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as o from "react";
|
|
2
2
|
import { createComponent as i } from "@lit/react";
|
|
3
3
|
import { PieModal as e } from "./index.js";
|
|
4
|
-
import { ON_MODAL_BACK_EVENT as
|
|
4
|
+
import { ON_MODAL_BACK_EVENT as A, ON_MODAL_CLOSE_EVENT as L, ON_MODAL_LEADING_ACTION_CLICK as E, ON_MODAL_OPEN_EVENT as g, ON_MODAL_SUPPORTING_ACTION_CLICK as k, headingLevels as D, positions as I, sizes as T } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/static-html.js";
|
|
7
7
|
import "lit/decorators.js";
|
|
@@ -12,7 +12,7 @@ import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
|
12
12
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
13
13
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
14
14
|
import "@justeattakeaway/pie-spinner";
|
|
15
|
-
const
|
|
15
|
+
const a = i({
|
|
16
16
|
displayName: "PieModal",
|
|
17
17
|
elementClass: e,
|
|
18
18
|
react: o,
|
|
@@ -29,15 +29,15 @@ const N = i({
|
|
|
29
29
|
onPieModalSupportingActionClick: "pie-modal-supporting-action-click"
|
|
30
30
|
// when the modal supporting action is clicked.
|
|
31
31
|
}
|
|
32
|
-
});
|
|
32
|
+
}), N = a;
|
|
33
33
|
export {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
A as ON_MODAL_BACK_EVENT,
|
|
35
|
+
L as ON_MODAL_CLOSE_EVENT,
|
|
36
|
+
E as ON_MODAL_LEADING_ACTION_CLICK,
|
|
37
|
+
g as ON_MODAL_OPEN_EVENT,
|
|
38
|
+
k as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
39
39
|
N as PieModal,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
D as headingLevels,
|
|
41
|
+
I as positions,
|
|
42
|
+
T as sizes
|
|
43
43
|
};
|
package/package.json
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
+
"custom-elements.json",
|
|
10
11
|
"src",
|
|
11
12
|
"dist",
|
|
12
13
|
"**/*.d.ts"
|
|
13
14
|
],
|
|
14
15
|
"scripts": {
|
|
15
|
-
"build": "
|
|
16
|
+
"build": "run -T vite build",
|
|
17
|
+
"build:react-wrapper": "npx build-react-wrapper",
|
|
18
|
+
"create:manifest": "yarn cem analyze --litelement",
|
|
16
19
|
"lint:scripts": "run -T eslint .",
|
|
17
20
|
"lint:scripts:fix": "run -T eslint . --fix",
|
|
18
21
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
@@ -28,22 +31,26 @@
|
|
|
28
31
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
32
|
"license": "Apache-2.0",
|
|
30
33
|
"devDependencies": {
|
|
34
|
+
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
31
35
|
"@justeat/pie-design-tokens": "5.9.0",
|
|
32
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
33
|
-
"@
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.9.0",
|
|
37
|
+
"@justeattakeaway/pie-wrapper-react": "0.13.0",
|
|
38
|
+
"@types/body-scroll-lock": "3.1.2",
|
|
39
|
+
"cem-plugin-module-file-extensions": "0.0.5"
|
|
34
40
|
},
|
|
35
41
|
"volta": {
|
|
36
42
|
"extends": "../../../package.json"
|
|
37
43
|
},
|
|
38
44
|
"dependencies": {
|
|
39
|
-
"@justeattakeaway/pie-button": "0.
|
|
40
|
-
"@justeattakeaway/pie-icon-button": "0.
|
|
41
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
42
|
-
"@justeattakeaway/pie-spinner": "0.
|
|
43
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
45
|
+
"@justeattakeaway/pie-button": "0.45.0",
|
|
46
|
+
"@justeattakeaway/pie-icon-button": "0.27.0",
|
|
47
|
+
"@justeattakeaway/pie-icons-webc": "0.17.1",
|
|
48
|
+
"@justeattakeaway/pie-spinner": "0.5.0",
|
|
49
|
+
"@justeattakeaway/pie-webc-core": "0.17.0",
|
|
44
50
|
"body-scroll-lock": "3.1.5",
|
|
45
51
|
"dialog-polyfill": "0.5.6"
|
|
46
52
|
},
|
|
53
|
+
"customElements": "custom-elements.json",
|
|
47
54
|
"sideEffects": [
|
|
48
55
|
"dist/*.js"
|
|
49
56
|
]
|
package/src/defs.ts
CHANGED
|
@@ -36,12 +36,12 @@ export type ModalProps = {
|
|
|
36
36
|
/**
|
|
37
37
|
* When true, the modal will have a back button. This currently behaves the same as the close button.
|
|
38
38
|
*/
|
|
39
|
-
hasBackButton
|
|
39
|
+
hasBackButton?: boolean;
|
|
40
40
|
|
|
41
41
|
/**
|
|
42
42
|
* When true, the modal will have a back button. This currently behaves the same as the close button.
|
|
43
43
|
*/
|
|
44
|
-
hasStackedActions
|
|
44
|
+
hasStackedActions?: boolean;
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* The text to display in the modal's heading.
|
|
@@ -51,12 +51,12 @@ export type ModalProps = {
|
|
|
51
51
|
/**
|
|
52
52
|
* The HTML heading tag to use for the modal's heading. Can be h1-h6.
|
|
53
53
|
*/
|
|
54
|
-
headingLevel
|
|
54
|
+
headingLevel?: typeof headingLevels[number];
|
|
55
55
|
|
|
56
56
|
/**
|
|
57
57
|
* When true, the modal will be open.
|
|
58
58
|
*/
|
|
59
|
-
isOpen
|
|
59
|
+
isOpen?: boolean;
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
62
|
* When set to `true`:
|
|
@@ -69,32 +69,32 @@ export type ModalProps = {
|
|
|
69
69
|
* 2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
|
|
70
70
|
*
|
|
71
71
|
*/
|
|
72
|
-
isDismissible
|
|
72
|
+
isDismissible?: boolean;
|
|
73
73
|
|
|
74
74
|
/**
|
|
75
75
|
* When false, the modal footer will scroll with the content inside the modal body.
|
|
76
76
|
*/
|
|
77
|
-
isFooterPinned
|
|
77
|
+
isFooterPinned?: boolean;
|
|
78
78
|
|
|
79
79
|
/**
|
|
80
80
|
* This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
|
|
81
81
|
*/
|
|
82
|
-
isFullWidthBelowMid
|
|
82
|
+
isFullWidthBelowMid?: boolean;
|
|
83
83
|
|
|
84
84
|
/**
|
|
85
85
|
* When true, displays a loading spinner in the modal.
|
|
86
86
|
*/
|
|
87
|
-
isLoading
|
|
87
|
+
isLoading?: boolean;
|
|
88
88
|
|
|
89
89
|
/**
|
|
90
90
|
* The leading action configuration for the modal.
|
|
91
91
|
*/
|
|
92
|
-
leadingAction
|
|
92
|
+
leadingAction?: ActionProps;
|
|
93
93
|
|
|
94
94
|
/*
|
|
95
95
|
* The position of the modal; this controls where it will appear on the page.
|
|
96
96
|
*/
|
|
97
|
-
position
|
|
97
|
+
position?: typeof positions[number];
|
|
98
98
|
|
|
99
99
|
/**
|
|
100
100
|
* The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
|
|
@@ -104,12 +104,12 @@ export type ModalProps = {
|
|
|
104
104
|
/**
|
|
105
105
|
* The size of the modal; this controls how wide it will appear on the page.
|
|
106
106
|
*/
|
|
107
|
-
size
|
|
107
|
+
size?: typeof sizes[number];
|
|
108
108
|
|
|
109
109
|
/**
|
|
110
110
|
* The supporting action configuration for the modal.
|
|
111
111
|
*/
|
|
112
|
-
supportingAction
|
|
112
|
+
supportingAction?: ActionProps;
|
|
113
113
|
};
|
|
114
114
|
|
|
115
115
|
/**
|
package/src/index.ts
CHANGED
|
@@ -387,8 +387,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
387
387
|
<dialog
|
|
388
388
|
id="dialog"
|
|
389
389
|
class="c-modal"
|
|
390
|
-
size="${size}"
|
|
391
|
-
position="${position}"
|
|
390
|
+
size="${size || 'medium'}"
|
|
391
|
+
position="${position || 'center'}"
|
|
392
392
|
?hasActions=${leadingAction || supportingAction}
|
|
393
393
|
?hasBackButton=${hasBackButton}
|
|
394
394
|
?hasStackedActions=${hasStackedActions}
|
package/src/react.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent, EventName } from '@lit/react';
|
|
3
|
+
import { PieModal as PieModalLit } from './index';
|
|
4
|
+
import { ModalProps } from './defs';
|
|
5
|
+
|
|
6
|
+
export * from './defs';
|
|
7
|
+
|
|
8
|
+
const PieModalReact = createComponent({
|
|
9
|
+
displayName: 'PieModal',
|
|
10
|
+
elementClass: PieModalLit,
|
|
11
|
+
react: React,
|
|
12
|
+
tagName: 'pie-modal',
|
|
13
|
+
events: {
|
|
14
|
+
onPieModalOpen: 'pie-modal-open' as EventName<CustomEvent>, // when the modal is opened.
|
|
15
|
+
onPieModalClose: 'pie-modal-close' as EventName<CustomEvent>, // when the modal is closed.
|
|
16
|
+
onPieModalBack: 'pie-modal-back' as EventName<CustomEvent>, // when the modal back button is clicked.
|
|
17
|
+
onPieModalLeadingActionClick: 'pie-modal-leading-action-click' as EventName<CustomEvent>, // when the modal leading action is clicked.
|
|
18
|
+
onPieModalSupportingActionClick: 'pie-modal-supporting-action-click' as EventName<CustomEvent>, // when the modal supporting action is clicked.
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
type ReactBaseType = React.DialogHTMLAttributes<HTMLDialogElement>
|
|
23
|
+
|
|
24
|
+
type PieModalEvents = {
|
|
25
|
+
onPieModalOpen?: (event: CustomEvent<any>) => void;
|
|
26
|
+
onPieModalClose?: (event: CustomEvent<any>) => void;
|
|
27
|
+
onPieModalBack?: (event: CustomEvent<any>) => void;
|
|
28
|
+
onPieModalLeadingActionClick?: (event: CustomEvent<any>) => void;
|
|
29
|
+
onPieModalSupportingActionClick?: (event: CustomEvent<any>) => void;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const PieModal = PieModalReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalProps> & React.RefAttributes<PieModalLit> & PieModalEvents & ReactBaseType>;
|