@justeattakeaway/pie-tooltip 0.1.1 → 0.3.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 (11) hide show
  1. package/README.md +344 -15
  2. package/custom-elements.json +644 -3
  3. package/dist/index.d.ts +153 -2
  4. package/dist/index.js +390 -18
  5. package/dist/react.d.ts +159 -3
  6. package/dist/react.js +25 -7
  7. package/package.json +6 -4
  8. package/src/defs.ts +129 -3
  9. package/src/index.ts +691 -9
  10. package/src/react.ts +11 -3
  11. package/src/tooltip.scss +408 -2
package/custom-elements.json CHANGED
@@ -11,8 +11,197 @@
11
11
  {
12
12
  "kind": "javascript-module",
13
13
  "path": "src/defs.js",
14
- "declarations": [],
15
- "exports": []
14
+ "declarations": [
15
+ {
16
+ "kind": "variable",
17
+ "name": "positions",
18
+ "type": {
19
+ "text": "[\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n]"
20
+ },
21
+ "default": "[ 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', ]"
22
+ },
23
+ {
24
+ "kind": "variable",
25
+ "name": "sizes",
26
+ "type": {
27
+ "text": "['default', 'fit-to-content', 'fill-container']"
28
+ },
29
+ "default": "['default', 'fit-to-content', 'fill-container']"
30
+ },
31
+ {
32
+ "kind": "variable",
33
+ "name": "variants",
34
+ "type": {
35
+ "text": "['default', 'inverse']"
36
+ },
37
+ "default": "['default', 'inverse']"
38
+ },
39
+ {
40
+ "kind": "variable",
41
+ "name": "types",
42
+ "type": {
43
+ "text": "['default', 'icon']"
44
+ },
45
+ "default": "['default', 'icon']"
46
+ },
47
+ {
48
+ "kind": "variable",
49
+ "name": "headingLevels",
50
+ "type": {
51
+ "text": "['h2', 'h3', 'h4', 'h5', 'h6']"
52
+ },
53
+ "default": "['h2', 'h3', 'h4', 'h5', 'h6']"
54
+ },
55
+ {
56
+ "kind": "variable",
57
+ "name": "triggers",
58
+ "type": {
59
+ "text": "['hover', 'focus', 'click']"
60
+ },
61
+ "default": "['hover', 'focus', 'click']"
62
+ },
63
+ {
64
+ "kind": "variable",
65
+ "name": "modes",
66
+ "type": {
67
+ "text": "['tooltip', 'dialog']"
68
+ },
69
+ "default": "['tooltip', 'dialog']",
70
+ "description": "The two patterns the panel can present as. Inferred from the `action` slot rather than\nconfigured: an empty `action` slot is a tooltip, a filled one is a non-modal dialog."
71
+ },
72
+ {
73
+ "kind": "variable",
74
+ "name": "componentSelector",
75
+ "type": {
76
+ "text": "string"
77
+ },
78
+ "default": "'pie-tooltip'"
79
+ },
80
+ {
81
+ "kind": "variable",
82
+ "name": "componentClass",
83
+ "type": {
84
+ "text": "string"
85
+ },
86
+ "default": "'c-tooltip'"
87
+ },
88
+ {
89
+ "kind": "variable",
90
+ "name": "ON_TOOLTIP_OPEN_EVENT",
91
+ "default": "`${componentSelector}-open`"
92
+ },
93
+ {
94
+ "kind": "variable",
95
+ "name": "ON_TOOLTIP_CLOSE_EVENT",
96
+ "default": "`${componentSelector}-close`"
97
+ },
98
+ {
99
+ "kind": "variable",
100
+ "name": "defaultProps",
101
+ "type": {
102
+ "text": "DefaultProps"
103
+ },
104
+ "default": "{ isOpen: false, position: 'top', size: 'default', variant: 'default', type: 'default', isDismissible: false, headingLevel: 'h2', }"
105
+ }
106
+ ],
107
+ "exports": [
108
+ {
109
+ "kind": "js",
110
+ "name": "positions",
111
+ "declaration": {
112
+ "name": "positions",
113
+ "module": "src/defs.js"
114
+ }
115
+ },
116
+ {
117
+ "kind": "js",
118
+ "name": "sizes",
119
+ "declaration": {
120
+ "name": "sizes",
121
+ "module": "src/defs.js"
122
+ }
123
+ },
124
+ {
125
+ "kind": "js",
126
+ "name": "variants",
127
+ "declaration": {
128
+ "name": "variants",
129
+ "module": "src/defs.js"
130
+ }
131
+ },
132
+ {
133
+ "kind": "js",
134
+ "name": "types",
135
+ "declaration": {
136
+ "name": "types",
137
+ "module": "src/defs.js"
138
+ }
139
+ },
140
+ {
141
+ "kind": "js",
142
+ "name": "headingLevels",
143
+ "declaration": {
144
+ "name": "headingLevels",
145
+ "module": "src/defs.js"
146
+ }
147
+ },
148
+ {
149
+ "kind": "js",
150
+ "name": "triggers",
151
+ "declaration": {
152
+ "name": "triggers",
153
+ "module": "src/defs.js"
154
+ }
155
+ },
156
+ {
157
+ "kind": "js",
158
+ "name": "modes",
159
+ "declaration": {
160
+ "name": "modes",
161
+ "module": "src/defs.js"
162
+ }
163
+ },
164
+ {
165
+ "kind": "js",
166
+ "name": "componentSelector",
167
+ "declaration": {
168
+ "name": "componentSelector",
169
+ "module": "src/defs.js"
170
+ }
171
+ },
172
+ {
173
+ "kind": "js",
174
+ "name": "componentClass",
175
+ "declaration": {
176
+ "name": "componentClass",
177
+ "module": "src/defs.js"
178
+ }
179
+ },
180
+ {
181
+ "kind": "js",
182
+ "name": "ON_TOOLTIP_OPEN_EVENT",
183
+ "declaration": {
184
+ "name": "ON_TOOLTIP_OPEN_EVENT",
185
+ "module": "src/defs.js"
186
+ }
187
+ },
188
+ {
189
+ "kind": "js",
190
+ "name": "ON_TOOLTIP_CLOSE_EVENT",
191
+ "declaration": {
192
+ "name": "ON_TOOLTIP_CLOSE_EVENT",
193
+ "module": "src/defs.js"
194
+ }
195
+ },
196
+ {
197
+ "kind": "js",
198
+ "name": "defaultProps",
199
+ "declaration": {
200
+ "name": "defaultProps",
201
+ "module": "src/defs.js"
202
+ }
203
+ }
204
+ ]
16
205
  },
17
206
  {
18
207
  "kind": "javascript-module",
@@ -22,7 +211,459 @@
22
211
  "kind": "class",
23
212
  "description": "",
24
213
  "name": "PieTooltip",
25
- "members": [],
214
+ "slots": [
215
+ {
216
+ "description": "The descriptive content of the panel. Must not contain focusable elements.",
217
+ "name": "content"
218
+ },
219
+ {
220
+ "description": "An optional slot for interactive content such as a `pie-button`. Filling this slot switches the panel to a non-modal dialog.",
221
+ "name": "action"
222
+ }
223
+ ],
224
+ "members": [
225
+ {
226
+ "kind": "field",
227
+ "name": "trigger",
228
+ "type": {
229
+ "text": "TooltipProps['trigger']"
230
+ },
231
+ "privacy": "public",
232
+ "attribute": "trigger"
233
+ },
234
+ {
235
+ "kind": "field",
236
+ "name": "isOpen",
237
+ "privacy": "public",
238
+ "attribute": "isOpen"
239
+ },
240
+ {
241
+ "kind": "field",
242
+ "name": "position",
243
+ "privacy": "public",
244
+ "attribute": "position"
245
+ },
246
+ {
247
+ "kind": "field",
248
+ "name": "size",
249
+ "privacy": "public",
250
+ "attribute": "size"
251
+ },
252
+ {
253
+ "kind": "field",
254
+ "name": "variant",
255
+ "privacy": "public",
256
+ "attribute": "variant"
257
+ },
258
+ {
259
+ "kind": "field",
260
+ "name": "type",
261
+ "privacy": "public",
262
+ "attribute": "type"
263
+ },
264
+ {
265
+ "kind": "field",
266
+ "name": "isDismissible",
267
+ "privacy": "public",
268
+ "attribute": "isDismissible"
269
+ },
270
+ {
271
+ "kind": "field",
272
+ "name": "heading",
273
+ "type": {
274
+ "text": "TooltipProps['heading']"
275
+ },
276
+ "privacy": "public",
277
+ "attribute": "heading"
278
+ },
279
+ {
280
+ "kind": "field",
281
+ "name": "headingLevel",
282
+ "privacy": "public",
283
+ "attribute": "headingLevel"
284
+ },
285
+ {
286
+ "kind": "field",
287
+ "name": "aria",
288
+ "type": {
289
+ "text": "TooltipProps['aria']"
290
+ },
291
+ "privacy": "public",
292
+ "attribute": "aria"
293
+ },
294
+ {
295
+ "kind": "field",
296
+ "name": "triggers",
297
+ "type": {
298
+ "text": "TooltipProps['triggers']"
299
+ },
300
+ "privacy": "public",
301
+ "default": "[]",
302
+ "attribute": "triggers"
303
+ },
304
+ {
305
+ "kind": "field",
306
+ "name": "_assignedActionElements",
307
+ "type": {
308
+ "text": "Array<HTMLElement>"
309
+ },
310
+ "privacy": "private"
311
+ },
312
+ {
313
+ "kind": "field",
314
+ "name": "_originElement",
315
+ "type": {
316
+ "text": "HTMLElement | null"
317
+ },
318
+ "privacy": "private"
319
+ },
320
+ {
321
+ "kind": "field",
322
+ "name": "_hasActionContent",
323
+ "type": {
324
+ "text": "boolean | undefined"
325
+ },
326
+ "privacy": "private"
327
+ },
328
+ {
329
+ "kind": "field",
330
+ "name": "_isPositioned",
331
+ "type": {
332
+ "text": "boolean"
333
+ },
334
+ "privacy": "private",
335
+ "default": "false"
336
+ },
337
+ {
338
+ "kind": "field",
339
+ "name": "_isAnchorVisible",
340
+ "type": {
341
+ "text": "boolean"
342
+ },
343
+ "privacy": "private",
344
+ "default": "true"
345
+ },
346
+ {
347
+ "kind": "field",
348
+ "name": "_clippedTriggerElement",
349
+ "type": {
350
+ "text": "Element | null"
351
+ },
352
+ "privacy": "private",
353
+ "default": "null"
354
+ },
355
+ {
356
+ "kind": "field",
357
+ "name": "_triggerClippers",
358
+ "type": {
359
+ "text": "Array<Element>"
360
+ },
361
+ "privacy": "private",
362
+ "default": "[]"
363
+ },
364
+ {
365
+ "kind": "field",
366
+ "name": "_triggerTrackingController",
367
+ "type": {
368
+ "text": "AbortController | undefined"
369
+ },
370
+ "privacy": "private"
371
+ },
372
+ {
373
+ "kind": "field",
374
+ "name": "_interactionController",
375
+ "type": {
376
+ "text": "AbortController | undefined"
377
+ },
378
+ "privacy": "private"
379
+ },
380
+ {
381
+ "kind": "field",
382
+ "name": "_directionObserver",
383
+ "type": {
384
+ "text": "MutationObserver | undefined"
385
+ },
386
+ "privacy": "private"
387
+ },
388
+ {
389
+ "kind": "field",
390
+ "name": "_triggerObserver",
391
+ "type": {
392
+ "text": "ResizeObserver | undefined"
393
+ },
394
+ "privacy": "private"
395
+ },
396
+ {
397
+ "kind": "field",
398
+ "name": "_reanchorFrame",
399
+ "type": {
400
+ "text": "number"
401
+ },
402
+ "privacy": "private",
403
+ "default": "0"
404
+ },
405
+ {
406
+ "kind": "field",
407
+ "name": "_shouldResolveOverlayMode",
408
+ "type": {
409
+ "text": "boolean"
410
+ },
411
+ "privacy": "private",
412
+ "default": "false"
413
+ },
414
+ {
415
+ "kind": "field",
416
+ "name": "_hoverCloseTimer",
417
+ "type": {
418
+ "text": "ReturnType<typeof setTimeout> | undefined"
419
+ },
420
+ "privacy": "private"
421
+ },
422
+ {
423
+ "kind": "field",
424
+ "name": "_mode",
425
+ "type": {
426
+ "text": "TooltipMode | undefined"
427
+ },
428
+ "privacy": "private",
429
+ "readonly": true
430
+ },
431
+ {
432
+ "kind": "method",
433
+ "name": "startTrackingTrigger",
434
+ "privacy": "private",
435
+ "return": {
436
+ "type": {
437
+ "text": "void"
438
+ }
439
+ }
440
+ },
441
+ {
442
+ "kind": "method",
443
+ "name": "stopTrackingTrigger",
444
+ "privacy": "private",
445
+ "return": {
446
+ "type": {
447
+ "text": "void"
448
+ }
449
+ }
450
+ },
451
+ {
452
+ "kind": "method",
453
+ "name": "resolveMode",
454
+ "privacy": "private",
455
+ "return": {
456
+ "type": {
457
+ "text": "void"
458
+ }
459
+ }
460
+ },
461
+ {
462
+ "kind": "method",
463
+ "name": "resolveOverlayMode",
464
+ "privacy": "private",
465
+ "return": {
466
+ "type": {
467
+ "text": "void"
468
+ }
469
+ }
470
+ },
471
+ {
472
+ "kind": "method",
473
+ "name": "projectOverTrigger",
474
+ "privacy": "private",
475
+ "return": {
476
+ "type": {
477
+ "text": "void"
478
+ }
479
+ }
480
+ },
481
+ {
482
+ "kind": "method",
483
+ "name": "_refreshTriggerClippers",
484
+ "privacy": "private",
485
+ "return": {
486
+ "type": {
487
+ "text": "void"
488
+ }
489
+ }
490
+ },
491
+ {
492
+ "kind": "method",
493
+ "name": "handleCloseButtonClick",
494
+ "privacy": "private",
495
+ "return": {
496
+ "type": {
497
+ "text": "void"
498
+ }
499
+ }
500
+ },
501
+ {
502
+ "kind": "method",
503
+ "name": "_getTriggerElement",
504
+ "privacy": "private",
505
+ "return": {
506
+ "type": {
507
+ "text": "Element | null"
508
+ }
509
+ }
510
+ },
511
+ {
512
+ "kind": "method",
513
+ "name": "_requestOpen",
514
+ "privacy": "private",
515
+ "return": {
516
+ "type": {
517
+ "text": "void"
518
+ }
519
+ }
520
+ },
521
+ {
522
+ "kind": "method",
523
+ "name": "_requestClose",
524
+ "privacy": "private",
525
+ "return": {
526
+ "type": {
527
+ "text": "void"
528
+ }
529
+ }
530
+ },
531
+ {
532
+ "kind": "method",
533
+ "name": "_startHoverCloseTimer",
534
+ "privacy": "private",
535
+ "return": {
536
+ "type": {
537
+ "text": "void"
538
+ }
539
+ }
540
+ },
541
+ {
542
+ "kind": "method",
543
+ "name": "_cancelHoverCloseTimer",
544
+ "privacy": "private",
545
+ "return": {
546
+ "type": {
547
+ "text": "void"
548
+ }
549
+ }
550
+ },
551
+ {
552
+ "kind": "method",
553
+ "name": "_rebuildInteractionListeners",
554
+ "privacy": "private",
555
+ "return": {
556
+ "type": {
557
+ "text": "void"
558
+ }
559
+ }
560
+ },
561
+ {
562
+ "kind": "method",
563
+ "name": "_teardownInteractionListeners",
564
+ "privacy": "private",
565
+ "return": {
566
+ "type": {
567
+ "text": "void"
568
+ }
569
+ }
570
+ },
571
+ {
572
+ "kind": "method",
573
+ "name": "renderHeading",
574
+ "privacy": "private",
575
+ "return": {
576
+ "type": {
577
+ "text": "TemplateResult"
578
+ }
579
+ }
580
+ },
581
+ {
582
+ "kind": "method",
583
+ "name": "renderCloseButton",
584
+ "privacy": "private",
585
+ "return": {
586
+ "type": {
587
+ "text": "TemplateResult"
588
+ }
589
+ }
590
+ }
591
+ ],
592
+ "events": [
593
+ {
594
+ "type": {
595
+ "text": "Event"
596
+ },
597
+ "description": "When a configured trigger asks for the panel. Set `isOpen` to `true` in response.",
598
+ "name": "pie-tooltip-open"
599
+ },
600
+ {
601
+ "type": {
602
+ "text": "Event"
603
+ },
604
+ "description": "When the close button is clicked, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.",
605
+ "name": "pie-tooltip-close"
606
+ }
607
+ ],
608
+ "attributes": [
609
+ {
610
+ "name": "trigger",
611
+ "type": {
612
+ "text": "TooltipProps['trigger']"
613
+ },
614
+ "fieldName": "trigger"
615
+ },
616
+ {
617
+ "name": "isOpen",
618
+ "fieldName": "isOpen"
619
+ },
620
+ {
621
+ "name": "position",
622
+ "fieldName": "position"
623
+ },
624
+ {
625
+ "name": "size",
626
+ "fieldName": "size"
627
+ },
628
+ {
629
+ "name": "variant",
630
+ "fieldName": "variant"
631
+ },
632
+ {
633
+ "name": "type",
634
+ "fieldName": "type"
635
+ },
636
+ {
637
+ "name": "isDismissible",
638
+ "fieldName": "isDismissible"
639
+ },
640
+ {
641
+ "name": "heading",
642
+ "type": {
643
+ "text": "TooltipProps['heading']"
644
+ },
645
+ "fieldName": "heading"
646
+ },
647
+ {
648
+ "name": "headingLevel",
649
+ "fieldName": "headingLevel"
650
+ },
651
+ {
652
+ "name": "aria",
653
+ "type": {
654
+ "text": "TooltipProps['aria']"
655
+ },
656
+ "fieldName": "aria"
657
+ },
658
+ {
659
+ "name": "triggers",
660
+ "type": {
661
+ "text": "TooltipProps['triggers']"
662
+ },
663
+ "default": "[]",
664
+ "fieldName": "triggers"
665
+ }
666
+ ],
26
667
  "superclass": {
27
668
  "name": "PieElement",
28
669
  "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"