@zag-js/tooltip 0.0.0-dev-20220415160434 → 0.0.0-dev-20220417135151

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/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { connect } from "./tooltip.connect";
2
2
  export { machine } from "./tooltip.machine";
3
- export type { MachineContext, MachineState } from "./tooltip.types";
3
+ export type { UserDefinedContext as Context } from "./tooltip.types";
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA"}
package/dist/index.js CHANGED
@@ -282,14 +282,14 @@ var dom = {
282
282
  },
283
283
  getTriggerId: (ctx) => {
284
284
  var _a, _b;
285
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip-${ctx.id}--trigger`;
285
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
286
286
  },
287
287
  getContentId: (ctx) => {
288
288
  var _a, _b;
289
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip-${ctx.id}--content`;
289
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
290
290
  },
291
- getArrowId: (ctx) => `tooltip-${ctx.id}--arrow`,
292
- getPositionerId: (ctx) => `tooltip-${ctx.id}--popper`,
291
+ getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
292
+ getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
293
293
  portalId: "tooltip-portal",
294
294
  getTriggerEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTriggerId(ctx)),
295
295
  getContentEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getContentId(ctx)),
@@ -298,7 +298,7 @@ var dom = {
298
298
  getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx)),
299
299
  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
300
300
  createPortalEl: (ctx) => {
301
- const portal = dom.getDoc(ctx).createElement("tooltip-portal");
301
+ const portal = dom.getDoc(ctx).createElement(dom.portalId);
302
302
  portal.id = dom.portalId;
303
303
  return portal;
304
304
  }
@@ -430,218 +430,223 @@ var isDom = () => !!(typeof window !== "undefined");
430
430
  var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
431
431
 
432
432
  // src/tooltip.machine.ts
433
- var machine = (0, import_core2.createMachine)({
434
- id: "tooltip",
435
- initial: "unknown",
436
- context: {
437
- id: "",
438
- openDelay: 1e3,
439
- closeDelay: 500,
440
- closeOnPointerDown: true,
441
- closeOnEsc: true,
442
- interactive: true,
443
- positioning: { placement: "bottom" },
444
- currentPlacement: void 0
445
- },
446
- computed: {
447
- hasAriaLabel: (ctx) => !!ctx["aria-label"]
448
- },
449
- on: {
450
- OPEN: "open",
451
- CLOSE: "closed"
452
- },
453
- states: {
454
- unknown: {
455
- on: {
456
- SETUP: {
457
- target: "closed",
458
- actions: "setupDocument"
459
- }
460
- }
433
+ function machine(ctx = {}) {
434
+ return (0, import_core2.createMachine)({
435
+ id: "tooltip",
436
+ initial: "unknown",
437
+ context: __spreadProps(__spreadValues({
438
+ id: "",
439
+ openDelay: 1e3,
440
+ closeDelay: 500,
441
+ closeOnPointerDown: true,
442
+ closeOnEsc: true,
443
+ interactive: true,
444
+ currentPlacement: void 0
445
+ }, ctx), {
446
+ positioning: __spreadValues({
447
+ placement: "bottom"
448
+ }, ctx.positioning)
449
+ }),
450
+ computed: {
451
+ hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
461
452
  },
462
- closed: {
463
- tags: ["closed"],
464
- entry: ["clearGlobalId", "invokeOnClose"],
465
- on: {
466
- FOCUS: "open",
467
- POINTER_ENTER: [
468
- {
469
- guard: "noVisibleTooltip",
470
- target: "opening"
471
- },
472
- { target: "open" }
473
- ]
474
- }
453
+ on: {
454
+ OPEN: "open",
455
+ CLOSE: "closed"
475
456
  },
476
- opening: {
477
- tags: ["closed"],
478
- activities: ["trackScroll", "trackPointerlockChange"],
479
- after: {
480
- OPEN_DELAY: "open"
457
+ states: {
458
+ unknown: {
459
+ on: {
460
+ SETUP: {
461
+ target: "closed",
462
+ actions: "setupDocument"
463
+ }
464
+ }
481
465
  },
482
- on: {
483
- POINTER_LEAVE: "closed",
484
- BLUR: "closed",
485
- SCROLL: "closed",
486
- POINTER_LOCK_CHANGE: "closed",
487
- POINTER_DOWN: {
488
- guard: "closeOnPointerDown",
489
- target: "closed"
466
+ closed: {
467
+ tags: ["closed"],
468
+ entry: ["clearGlobalId", "invokeOnClose"],
469
+ on: {
470
+ FOCUS: "open",
471
+ POINTER_ENTER: [
472
+ {
473
+ guard: "noVisibleTooltip",
474
+ target: "opening"
475
+ },
476
+ { target: "open" }
477
+ ]
490
478
  }
491
- }
492
- },
493
- open: {
494
- tags: ["open"],
495
- activities: [
496
- "trackEscapeKey",
497
- "trackDisabledTriggerOnSafari",
498
- "trackScroll",
499
- "trackPointerlockChange",
500
- "computePlacement"
501
- ],
502
- entry: ["setGlobalId", "invokeOnOpen"],
503
- on: {
504
- POINTER_LEAVE: [
505
- {
506
- guard: "isVisible",
479
+ },
480
+ opening: {
481
+ tags: ["closed"],
482
+ activities: ["trackScroll", "trackPointerlockChange"],
483
+ after: {
484
+ OPEN_DELAY: "open"
485
+ },
486
+ on: {
487
+ POINTER_LEAVE: "closed",
488
+ BLUR: "closed",
489
+ SCROLL: "closed",
490
+ POINTER_LOCK_CHANGE: "closed",
491
+ POINTER_DOWN: {
492
+ guard: "closeOnPointerDown",
493
+ target: "closed"
494
+ }
495
+ }
496
+ },
497
+ open: {
498
+ tags: ["open"],
499
+ activities: [
500
+ "trackEscapeKey",
501
+ "trackDisabledTriggerOnSafari",
502
+ "trackScroll",
503
+ "trackPointerlockChange",
504
+ "computePlacement"
505
+ ],
506
+ entry: ["setGlobalId", "invokeOnOpen"],
507
+ on: {
508
+ POINTER_LEAVE: [
509
+ {
510
+ guard: "isVisible",
511
+ target: "closing"
512
+ },
513
+ { target: "closed" }
514
+ ],
515
+ BLUR: "closed",
516
+ ESCAPE: "closed",
517
+ SCROLL: "closed",
518
+ POINTER_LOCK_CHANGE: "closed",
519
+ TOOLTIP_POINTER_LEAVE: {
520
+ guard: "isInteractive",
507
521
  target: "closing"
508
522
  },
509
- { target: "closed" }
510
- ],
511
- BLUR: "closed",
512
- ESCAPE: "closed",
513
- SCROLL: "closed",
514
- POINTER_LOCK_CHANGE: "closed",
515
- TOOLTIP_POINTER_LEAVE: {
516
- guard: "isInteractive",
517
- target: "closing"
518
- },
519
- POINTER_DOWN: {
520
- guard: "closeOnPointerDown",
521
- target: "closed"
522
- },
523
- CLICK: "closed"
524
- }
525
- },
526
- closing: {
527
- tags: ["open"],
528
- activities: ["trackStore", "computePlacement"],
529
- after: {
530
- CLOSE_DELAY: "closed"
523
+ POINTER_DOWN: {
524
+ guard: "closeOnPointerDown",
525
+ target: "closed"
526
+ },
527
+ CLICK: "closed"
528
+ }
531
529
  },
532
- on: {
533
- FORCE_CLOSE: "closed",
534
- POINTER_ENTER: "open",
535
- TOOLTIP_POINTER_ENTER: {
536
- guard: "isInteractive",
537
- target: "open"
530
+ closing: {
531
+ tags: ["open"],
532
+ activities: ["trackStore", "computePlacement"],
533
+ after: {
534
+ CLOSE_DELAY: "closed"
535
+ },
536
+ on: {
537
+ FORCE_CLOSE: "closed",
538
+ POINTER_ENTER: "open",
539
+ TOOLTIP_POINTER_ENTER: {
540
+ guard: "isInteractive",
541
+ target: "open"
542
+ }
538
543
  }
539
544
  }
540
545
  }
541
- }
542
- }, {
543
- activities: {
544
- computePlacement(ctx) {
545
- ctx.currentPlacement = ctx.positioning.placement;
546
- let cleanup;
547
- raf(() => {
548
- cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx), dom.getPositionerEl(ctx), __spreadProps(__spreadValues({}, ctx.positioning), {
549
- onComplete(data) {
550
- ctx.currentPlacement = data.placement;
551
- ctx.isPlacementComplete = true;
552
- },
553
- onCleanup() {
554
- ctx.currentPlacement = void 0;
555
- ctx.isPlacementComplete = false;
546
+ }, {
547
+ activities: {
548
+ computePlacement(ctx2) {
549
+ ctx2.currentPlacement = ctx2.positioning.placement;
550
+ let cleanup;
551
+ raf(() => {
552
+ cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
553
+ onComplete(data) {
554
+ ctx2.currentPlacement = data.placement;
555
+ ctx2.isPlacementComplete = true;
556
+ },
557
+ onCleanup() {
558
+ ctx2.currentPlacement = void 0;
559
+ ctx2.isPlacementComplete = false;
560
+ }
561
+ }));
562
+ });
563
+ return cleanup;
564
+ },
565
+ trackPointerlockChange(ctx2, _evt, { send }) {
566
+ return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
567
+ send("POINTER_LOCK_CHANGE");
568
+ });
569
+ },
570
+ trackScroll(ctx2, _evt, { send }) {
571
+ const trigger = dom.getTriggerEl(ctx2);
572
+ if (!trigger)
573
+ return;
574
+ const cleanups = getScrollParents(trigger).map((el) => {
575
+ const opts = { passive: true, capture: true };
576
+ return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
577
+ });
578
+ return () => {
579
+ cleanups.forEach((fn) => fn == null ? void 0 : fn());
580
+ };
581
+ },
582
+ trackStore(ctx2, _evt, { send }) {
583
+ return (0, import_core2.subscribe)(store, () => {
584
+ if (store.id !== ctx2.id) {
585
+ send("FORCE_CLOSE");
556
586
  }
557
- }));
558
- });
559
- return cleanup;
560
- },
561
- trackPointerlockChange(ctx, _evt, { send }) {
562
- return addPointerlockChangeListener(dom.getDoc(ctx), () => {
563
- send("POINTER_LOCK_CHANGE");
564
- });
565
- },
566
- trackScroll(ctx, _evt, { send }) {
567
- const trigger = dom.getTriggerEl(ctx);
568
- if (!trigger)
569
- return;
570
- const cleanups = getScrollParents(trigger).map((el) => {
571
- const opts = { passive: true, capture: true };
572
- return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
573
- });
574
- return () => {
575
- cleanups.forEach((fn) => fn == null ? void 0 : fn());
576
- };
577
- },
578
- trackStore(ctx, _evt, { send }) {
579
- return (0, import_core2.subscribe)(store, () => {
580
- if (store.id !== ctx.id) {
581
- send("FORCE_CLOSE");
582
- }
583
- });
584
- },
585
- trackDisabledTriggerOnSafari(ctx, _evt, { send }) {
586
- if (!isSafari())
587
- return noop2;
588
- const doc = dom.getDoc(ctx);
589
- return addPointerEvent(doc, "pointermove", (event) => {
590
- const selector = "[data-part=trigger][data-expanded]";
591
- if (isHTMLElement(event.target) && event.target.closest(selector))
587
+ });
588
+ },
589
+ trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
590
+ if (!isSafari())
591
+ return noop2;
592
+ const doc = dom.getDoc(ctx2);
593
+ return addPointerEvent(doc, "pointermove", (event) => {
594
+ const selector = "[data-part=trigger][data-expanded]";
595
+ if (isHTMLElement(event.target) && event.target.closest(selector))
596
+ return;
597
+ send("POINTER_LEAVE");
598
+ });
599
+ },
600
+ trackEscapeKey(ctx2, _evt, { send }) {
601
+ if (!ctx2.closeOnEsc)
592
602
  return;
593
- send("POINTER_LEAVE");
594
- });
603
+ const doc = dom.getDoc(ctx2);
604
+ return addDomEvent(doc, "keydown", (event) => {
605
+ if (event.key === "Escape") {
606
+ send("ESCAPE");
607
+ }
608
+ });
609
+ }
595
610
  },
596
- trackEscapeKey(ctx, _evt, { send }) {
597
- if (!ctx.closeOnEsc)
598
- return;
599
- const doc = dom.getDoc(ctx);
600
- return addDomEvent(doc, "keydown", (event) => {
601
- if (event.key === "Escape") {
602
- send("ESCAPE");
611
+ actions: {
612
+ setupDocument(ctx2, evt) {
613
+ ctx2.id = evt.id;
614
+ if (evt.doc)
615
+ ctx2.doc = (0, import_core2.ref)(evt.doc);
616
+ },
617
+ setGlobalId(ctx2) {
618
+ store.setId(ctx2.id);
619
+ },
620
+ clearGlobalId(ctx2) {
621
+ if (ctx2.id === store.id) {
622
+ store.setId(null);
623
+ }
624
+ },
625
+ invokeOnOpen(ctx2, evt) {
626
+ var _a;
627
+ const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
628
+ if (!omit.includes(evt.type)) {
629
+ (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
630
+ }
631
+ },
632
+ invokeOnClose(ctx2, evt) {
633
+ var _a;
634
+ const omit = ["SETUP"];
635
+ if (!omit.includes(evt.type)) {
636
+ (_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
603
637
  }
604
- });
605
- }
606
- },
607
- actions: {
608
- setupDocument(ctx, evt) {
609
- ctx.id = evt.id;
610
- if (evt.doc)
611
- ctx.doc = (0, import_core2.ref)(evt.doc);
612
- },
613
- setGlobalId(ctx) {
614
- store.setId(ctx.id);
615
- },
616
- clearGlobalId(ctx) {
617
- if (ctx.id === store.id) {
618
- store.setId(null);
619
638
  }
620
639
  },
621
- invokeOnOpen(ctx, evt) {
622
- var _a;
623
- const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
624
- if (!omit.includes(evt.type)) {
625
- (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
626
- }
640
+ guards: {
641
+ closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
642
+ noVisibleTooltip: () => store.id === null,
643
+ isVisible: (ctx2) => ctx2.id === store.id,
644
+ isInteractive: (ctx2) => ctx2.interactive
627
645
  },
628
- invokeOnClose(ctx, evt) {
629
- var _a;
630
- const omit = ["SETUP"];
631
- if (!omit.includes(evt.type)) {
632
- (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
633
- }
646
+ delays: {
647
+ OPEN_DELAY: (ctx2) => ctx2.openDelay,
648
+ CLOSE_DELAY: (ctx2) => ctx2.closeDelay
634
649
  }
635
- },
636
- guards: {
637
- closeOnPointerDown: (ctx) => ctx.closeOnPointerDown,
638
- noVisibleTooltip: () => store.id === null,
639
- isVisible: (ctx) => ctx.id === store.id,
640
- isInteractive: (ctx) => ctx.interactive
641
- },
642
- delays: {
643
- OPEN_DELAY: (ctx) => ctx.openDelay,
644
- CLOSE_DELAY: (ctx) => ctx.closeDelay
645
- }
646
- });
650
+ });
651
+ }
647
652
  //# sourceMappingURL=index.js.map