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