@tasknotes/calendar 0.1.6 → 0.1.7

package/dist/cjs/react.cjs

@@ -696,6 +696,7 @@ var DEFAULT_TEXT = {
   allDay: "All day",
   noItems: "Nothing scheduled",
   more: (n) => `+${n} more`,
+  appointments: (n) => `${n} appointments`,
   itemCount: (n) => n === 1 ? "1 item" : `${n} items`,
   weekNumber: (n) => `W${n}`,
   views: { week: "Week", day: "Day", days: "Days", month: "Month", list: "List", year: "Year", timeline: "Timeline" },
@@ -765,6 +766,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "dateStrip",
   "listLeadTitle",
   "listAddText",
+  "listEmptyContent",
   "monthDisplay",
   "timeZone",
   "locale",
@@ -1169,19 +1171,27 @@ var DayGridView = class {
       });
     }
     w.pool.end();
-    w.more.replaceChildren();
+    const existing = new Map(Array.from(w.more.children, (element) => [element.getAttribute("data-day"), element]));
     hidden.forEach((items, col) => {
       if (!items.length) return;
       const day = w.days[col];
-      const link = h(ctx.doc, "button", "tnc-more", { type: "button", "aria-haspopup": "dialog" }, ctx.text.more(items.length));
+      const key = String(day);
+      let link = existing.get(key);
+      if (!link) {
+        link = h(ctx.doc, "button", "tnc-more", { type: "button", "aria-haspopup": "dialog", "data-day": key });
+        const anchor = link;
+        link.addEventListener("click", (ev) => ctx.openMore(day, anchor, ev));
+        w.more.append(link);
+      }
+      existing.delete(key);
+      link.textContent = ctx.text.more(items.length);
       setStyle(link, {
         left: `calc(${pct(col / n)} + 2px)`,
         width: `calc(${pct(1 / n)} - 4px)`,
         top: `calc(var(--tnc-dg-top-h) + ${visible(col)} * (var(--tnc-bar-h) + ${BAR_GAP}px))`
       });
-      link.addEventListener("click", (ev) => ctx.openMore(day, link, ev));
-      w.more.append(link);
     });
+    for (const link of existing.values()) link.remove();
     const step = this.barPx + BAR_GAP;
     let need = maxLevel >= 0 ? (maxLevel + 1) * step - BAR_GAP : 0;
     hidden.forEach((items, col) => {
@@ -1384,6 +1394,8 @@ var ListView = class {
     if (!keep.size && !leadItems.length) {
       if (!empty) {
         empty = h(doc, "div", "tnc-list-empty", { role: "listitem" }, ctx.text.noItems);
+        const content = ctx.opts.listEmptyContent?.();
+        if (content) empty.replaceChildren(content);
         this.body.append(empty);
       }
     } else empty?.remove();
@@ -1732,6 +1744,8 @@ var TimeGridView = class {
     this.el = h(doc, "div", "tnc-tg", { role: "table", "aria-label": ctx.view.title });
     this.el.classList.toggle("tnc-tg--no-grid", !showGrid);
     this.scroller = h(doc, "div", "tnc-tg-scroll");
+    this.dayNavigation = h(doc, "div", "tnc-tg-day-navigation", { role: "group", "aria-label": ctx.view.title });
+    this.scroller.addEventListener("scroll", () => this.updateDayNavigation());
     this.top = h(doc, "div", "tnc-tg-top");
     this.headRow = h(doc, "div", "tnc-tg-head tnc-tg-cols", { role: "row" });
     this.top.append(this.headRow);
@@ -1759,7 +1773,7 @@ var TimeGridView = class {
     } else {
       this.body = this.gutter = null;
     }
-    this.el.append(this.scroller);
+    this.el.append(this.dayNavigation, this.scroller);
     this.build();
     if (showGrid && opts.height === "fill") {
       const RO = ctx.win.ResizeObserver;
@@ -1772,6 +1786,7 @@ var TimeGridView = class {
   ctx;
   el;
   scroller;
+  dayNavigation;
   top;
   headRow;
   allDayRow;
@@ -1827,6 +1842,9 @@ var TimeGridView = class {
         head.append(cap);
       }
       this.headRow.append(head);
+      const dayButton = h(doc, "button", "tnc-btn", { type: "button", "aria-label": ctx.fmt.longDate(day) }, `${ctx.fmt.weekdayShort(day)} ${ctx.fmt.dayNumber(day)}`);
+      dayButton.addEventListener("click", () => this.revealDay(day));
+      this.dayNavigation.append(dayButton);
       opts.dayHeaderDidMount?.({ ...arg, el: head });
       const col = h(doc, "div", ["tnc-col", ...ctx.dayClasses(day)].join(" "), { role: "cell", "aria-label": ctx.fmt.longDate(day), "data-date": arg.dateStr });
       const bgLayer = h(doc, "div", "tnc-col-bg");
@@ -1843,6 +1861,7 @@ var TimeGridView = class {
       this.body?.append(col);
       return {
         day,
+        collisionColumns: 1,
         head,
         col,
         plan: new ItemPool(ctx, planLayer),
@@ -1899,12 +1918,17 @@ var TimeGridView = class {
   /* --------------------------------------------------------------- render */
   render(change) {
     this.renderAllDay();
-    if (!this.body) return;
+    if (!this.body) {
+      this.updateDayNavigation();
+      return;
+    }
     const dirty = change ? change.days : null;
     for (const c of this.cols) {
       if (dirty && !dirty.has(c.day) && !(this.ctx.slot.max > MINUTES_PER_DAY && dirty.has(c.day + 1))) continue;
       this.renderColumn(c);
     }
+    this.el.style.setProperty("--tnc-collision-columns", String(Math.max(1, ...this.cols.map((column) => column.collisionColumns))));
+    this.updateDayNavigation();
     this.renderCapacity();
     this.tick();
   }
@@ -2022,6 +2046,11 @@ var TimeGridView = class {
     }
     const minMinutes = opts.eventMinHeight / this.ppm;
     const layout = layoutTimedDay(items, c.day, zone, minMinutes, ctx.order, [slot.min, slot.max]);
+    c.collisionColumns = Math.max(
+      1,
+      ...layout.plan.map((placement) => opts.eventMaxStack > 0 ? Math.min(placement.cols, opts.eventMaxStack) : placement.cols),
+      ...layout.actual.filter((placement) => !placement.split).map((placement) => placement.cols)
+    );
     const total = this.minutes;
     const top = (m) => pct((m - slot.min) / total);
     const height = (s) => pct((s.endMin - s.startMin) / total);
@@ -2033,14 +2062,22 @@ var TimeGridView = class {
     c.bg.end();
     const hasActual = layout.actual.length > 0;
     c.col.classList.toggle("has-actual", hasActual);
+    for (const link of c.more.children) link.setAttribute("data-stale", "true");
     this.placeLane(c.plan, layout.plan, c, top, height, "plan");
     this.placeLane(c.actual, layout.actual, c, top, height, "actual");
+    for (const link of [...c.more.children]) if (link.hasAttribute("data-stale")) link.remove();
   }
   placeLane(pool, placements, c, top, height, lane) {
     const { ctx } = this;
     const { opts } = ctx;
-    const withMore = lane === "plan";
-    const maxStack = opts.eventMaxStack;
+    const readableWidth = Number.parseFloat(ctx.win.getComputedStyle(this.el).getPropertyValue("--tnc-event-min-width")) || 128;
+    const laneWidth = c.col.clientWidth * (lane === "actual" && placements.some((placement) => placement.split) ? 0.22 : 1);
+    const collapse = placements.some((placement) => {
+      const columns = opts.eventMaxStack > 0 ? Math.min(placement.cols, opts.eventMaxStack) : placement.cols;
+      return columns > 1 && columns * readableWidth > laneWidth;
+    });
+    const withMore = lane === "plan" || collapse;
+    const maxStack = collapse ? 1 : opts.eventMaxStack;
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
@@ -2066,21 +2103,38 @@ var TimeGridView = class {
         top: top(p.startMin),
         height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
         ...inLane(lane, p.split, left, width),
+        "--tnc-event-readable-width": pct(span / cols / width),
         "z-index": String(p.col + 1)
       });
     }
     pool.end();
     if (!withMore) return;
-    c.more.replaceChildren();
-    for (const rec of hiddenByCluster.values()) {
-      const link = h(ctx.doc, "button", "tnc-more tnc-more--stack", { type: "button", "aria-haspopup": "dialog" }, `+${rec.count}`);
+    for (const [cluster, rec] of hiddenByCluster) {
+      const key = `${lane}-${cluster}`;
+      let link = c.more.querySelector(`[data-cluster="${key}"]`);
+      if (!link) {
+        link = h(ctx.doc, "button", "tnc-more tnc-more--stack", { type: "button", "aria-haspopup": "dialog", "data-cluster": key });
+        const anchor = link;
+        link.addEventListener("click", (ev) => ctx.openMore(c.day, anchor, ev, JSON.parse(anchor.dataset.itemIds ?? "[]")));
+        c.more.append(link);
+      }
+      link.removeAttribute("data-stale");
+      link.dataset.itemIds = JSON.stringify(placements.filter((placement) => placement.cluster === cluster).map((placement) => placement.item.id));
+      link.classList.toggle("tnc-more--collision", collapse);
+      link.textContent = `+${rec.count}`;
+      if (collapse) {
+        link.textContent = ctx.text.appointments(rec.count);
+        link.setAttribute("aria-label", link.textContent);
+        link.title = link.getAttribute("aria-label");
+      } else {
+        link.removeAttribute("aria-label");
+        link.removeAttribute("title");
+      }
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
         ...inLane(lane, rec.split, (cols - 1) / cols, 1 / cols)
       });
-      link.addEventListener("click", (ev) => ctx.openMore(c.day, link, ev));
-      c.more.append(link);
     }
   }
   meta(s, bg) {
@@ -2191,6 +2245,26 @@ var TimeGridView = class {
   }
   resize() {
     this.fitRows();
+    this.render(null);
+  }
+  revealDay(day) {
+    const column = this.cols.find((candidate) => candidate.day === day);
+    if (!column) return;
+    const bounds = column.head.getBoundingClientRect();
+    const viewport = this.scroller.getBoundingClientRect();
+    this.scroller.scrollLeft += bounds.left - viewport.left - (viewport.width - bounds.width) / 2;
+    this.updateDayNavigation();
+  }
+  updateDayNavigation() {
+    this.dayNavigation.hidden = this.scroller.scrollWidth <= this.scroller.clientWidth + 1;
+    const viewport = this.scroller.getBoundingClientRect();
+    this.cols.forEach((column, index) => {
+      const bounds = column.head.getBoundingClientRect();
+      const visible = bounds.left >= viewport.left && bounds.right <= viewport.right;
+      const button = this.dayNavigation.children[index];
+      button?.classList.toggle("is-offscreen", !visible);
+      button?.setAttribute("aria-pressed", String(visible));
+    });
   }
   scrollToTime(minute) {
     if (!this.body) return;
@@ -2956,7 +3030,11 @@ var Calendar = class {
     this.resizeObs?.disconnect();
     const RO = this.win.ResizeObserver;
     if (RO) {
-      this.resizeObs = new RO(() => this.current?.resize?.());
+      this.resizeObs = new RO(() => {
+        this.syncToolbarViewDisplay();
+        this.current?.resize?.();
+        this.positionMore();
+      });
       this.resizeObs.observe(this.root);
     }
   }
@@ -2976,9 +3054,11 @@ var Calendar = class {
     if (this.frame !== null) old.cancelAnimationFrame(this.frame);
     this.timer = this.frame = null;
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(false);
     this.doc = doc;
     this.win = doc.defaultView ?? old;
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(true);
     this.observeResize();
     this.rebuild(false);
     this.scheduleTick();
@@ -3096,6 +3176,7 @@ var Calendar = class {
   goToday() {
     this.anchor = this.todayDay();
     this.rebuild(true);
+    if (this.current instanceof TimeGridView) this.current.revealDay(this.anchor);
   }
   /** The anchor date, as local midnight of that civil day in the calendar zone. */
   getDate() {
@@ -3114,6 +3195,7 @@ var Calendar = class {
   /** Re-measures (e.g. after the host was shown or resized by a parent). */
   updateSize() {
     this.current?.resize?.();
+    this.positionMore();
   }
   getScroll() {
     return this.current?.getScroll() ?? { top: 0, left: 0 };
@@ -3145,7 +3227,10 @@ var Calendar = class {
     }
     const view = this.current;
     if (view instanceof TimelineView) view.scrollToInstant(ms, opts.align ?? "center", opts.smooth ?? false);
-    else if (view instanceof TimeGridView && p.kind !== "day") view.scrollToTime(wallTime(ms, this.zone).minute);
+    else if (view instanceof TimeGridView) {
+      view.revealDay(day);
+      if (p.kind !== "day") view.scrollToTime(wallTime(ms, this.zone).minute);
+    }
   }
   /** What is under a client point: a time slot, a day, or a timeline row and date. Null outside the view. */
   hitTest(clientX, clientY) {
@@ -3320,9 +3405,10 @@ var Calendar = class {
     if (meta) this.opts.itemWillUnmount?.(this.itemArg(el, meta));
     el.remove();
   }
-  openMore(day, anchor, jsEvent) {
+  openMore(day, anchor, jsEvent, itemIds) {
     jsEvent.stopPropagation();
-    const items = this.store.inRange(day, day + 1).filter((n) => n.item.display !== "background" && (n.allDay || this.opts.view === "month" || !this.opts.timeGrid || this.opts.eventMaxStack > 0)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.order(a, b));
+    const group = itemIds ? new Set(itemIds) : null;
+    const items = this.store.inRange(day, day + 1).filter((item) => !group || group.has(item.id)).filter((n) => n.item.display !== "background" && (n.allDay || anchor.classList.contains("tnc-more--stack") || this.opts.view === "month" || !this.opts.timeGrid || this.opts.eventMaxStack > 0)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.order(a, b));
     const shown = new Set(
       [...this.viewHost.querySelectorAll(".tnc-item")].filter((el2) => this.meta.get(el2)?.day === day || (this.meta.get(el2)?.n.startDay ?? Infinity) <= day).map((el2) => el2.dataset.id ?? "")
     );
@@ -3351,15 +3437,7 @@ var Calendar = class {
     }
     pool.end();
     this.popover = { el, pool, anchor, day };
-    const rr = this.root.getBoundingClientRect();
-    const ar = anchor.getBoundingClientRect();
-    const w = Math.max(220, ar.width + 24);
-    let left = ar.left - rr.left - 12;
-    left = Math.max(4, Math.min(left, rr.width - w - 4));
-    let top = ar.top - rr.top - 40;
-    const height = el.offsetHeight;
-    top = Math.max(4, Math.min(top, rr.height - height - 4));
-    setStyle(el, { left, top, width: w });
+    this.positionMore();
     el.focus();
   }
   /* =============================================================== render */
@@ -3483,8 +3561,10 @@ var Calendar = class {
       this.current.setScroll({ top: keep.top, left: 0 });
       this.current.placeInstant(keep.ms, keep.vx);
     } else if (scroll) this.current.setScroll(scroll);
-    else if (this.current instanceof TimeGridView) this.current.scrollToTime(this.slot.scroll);
-    else if (this.current instanceof TimelineView) this.current.scrollToDay(this.anchor);
+    else if (this.current instanceof TimeGridView) {
+      this.current.scrollToTime(this.slot.scroll);
+      this.current.revealDay(this.anchor);
+    } else if (this.current instanceof TimelineView) this.current.scrollToDay(this.anchor);
     if (rangeChanged) this.opts.onRangeChange?.(this.view);
   }
   /** Sets the visible days and view info from the anchor. */
@@ -3655,17 +3735,42 @@ var Calendar = class {
     );
     const title = h(this.doc, "h2", "tnc-title", { "aria-live": "polite" }, this.view.title);
     const viewGroup = h(this.doc, "div", "tnc-toolbar-group tnc-toolbar-views", { role: "group" });
+    const viewSelect = h(this.doc, "select", "tnc-btn tnc-toolbar-view-select", {
+      "aria-label": this.text.viewHints[this.opts.view] ?? this.text.views[this.opts.view] ?? this.opts.view
+    });
     for (const v of views) {
       const label = v === "days" ? this.text.views.days ?? `${this.opts.dayCount} days` : this.text.views[v] ?? v;
       viewGroup.append(btn(label, this.text.viewHints[v] ?? label, `tnc-btn-view tnc-btn-view-${v}`, () => this.changeView(v), v === this.opts.view));
+      viewSelect.append(h(this.doc, "option", "", { value: v }, label));
     }
+    viewSelect.value = this.opts.view;
+    viewSelect.addEventListener("change", () => this.changeView(viewSelect.value));
     const start = h(this.doc, "div", "tnc-toolbar-start");
     const end = h(this.doc, "div", "tnc-toolbar-end");
     if (cfg.extraPlacement === "start") start.append(...extras);
     start.append(nav, title);
-    end.append(viewGroup);
+    end.append(viewGroup, viewSelect);
     if (cfg.extraPlacement !== "start") end.append(...extras);
     this.toolbarEl.append(start, end);
+    this.syncToolbarViewDisplay();
+  }
+  syncToolbarViewDisplay() {
+    const buttons = this.toolbarEl.querySelector(".tnc-toolbar-views");
+    const select = this.toolbarEl.querySelector(".tnc-toolbar-view-select");
+    const start = this.toolbarEl.querySelector(".tnc-toolbar-start");
+    if (!buttons || !select || !start) return;
+    const config = this.opts.toolbar;
+    const mode = typeof config === "object" ? config.viewDisplay ?? "auto" : "auto";
+    buttons.hidden = false;
+    select.hidden = true;
+    buttons.style.display = "flex";
+    select.style.display = "none";
+    const startWidth = Array.from(start.children).reduce((width, child) => width + child.scrollWidth, 0);
+    const compact = mode === "select" || mode === "auto" && startWidth + buttons.scrollWidth + 32 > this.root.clientWidth;
+    buttons.hidden = compact;
+    select.hidden = !compact;
+    buttons.style.display = compact ? "none" : "flex";
+    select.style.display = compact ? "" : "none";
   }
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
@@ -3798,6 +3903,38 @@ var Calendar = class {
     }
   }
   /* ============================================================== popover */
+  onMoreGeometryChange = () => this.positionMore();
+  listenMoreGeometry(on) {
+    const method = on ? "addEventListener" : "removeEventListener";
+    this.doc[method]("scroll", this.onMoreGeometryChange, true);
+    this.win[method]("resize", this.onMoreGeometryChange);
+    this.win.visualViewport?.[method]("resize", this.onMoreGeometryChange);
+    this.win.visualViewport?.[method]("scroll", this.onMoreGeometryChange);
+  }
+  positionMore() {
+    const popover = this.popover;
+    if (!popover) return;
+    if (!popover.anchor.isConnected) {
+      this.closeMore();
+      return;
+    }
+    const viewport = this.win.visualViewport;
+    const root = this.root.getBoundingClientRect();
+    const anchor = popover.anchor.getBoundingClientRect();
+    const leftEdge = Math.max(root.left, viewport?.offsetLeft ?? 0) + 4;
+    const topEdge = Math.max(root.top, viewport?.offsetTop ?? 0) + 4;
+    const rightEdge = Math.min(root.right, (viewport?.offsetLeft ?? 0) + (viewport?.width ?? this.win.innerWidth)) - 4;
+    const bottomEdge = Math.min(root.bottom, (viewport?.offsetTop ?? 0) + (viewport?.height ?? this.win.innerHeight)) - 4;
+    if (rightEdge <= leftEdge || bottomEdge <= topEdge) {
+      this.closeMore();
+      return;
+    }
+    const width = Math.min(360, rightEdge - leftEdge);
+    setStyle(popover.el, { width, "max-height": Math.min(420, bottomEdge - topEdge) });
+    const left = Math.max(leftEdge, Math.min(anchor.left - 12, rightEdge - width));
+    const top = Math.max(topEdge, Math.min(anchor.top - 40, bottomEdge - popover.el.offsetHeight));
+    setStyle(popover.el, { left: left - root.left, top: top - root.top });
+  }
   refreshMore() {
     const p = this.popover;
     if (!p) return;
@@ -3807,6 +3944,7 @@ var Calendar = class {
       p.pool.place(n.id, { n, day: p.day, isStart: n.startDay >= p.day, isEnd: n.endDay <= p.day + 1, variant: n.allDay ? "bar" : "dot", mirror: false });
     }
     p.pool.end();
+    this.positionMore();
   }
   closeMore(restoreFocus = false) {
     const p = this.popover;
@@ -3834,6 +3972,7 @@ var Calendar = class {
     r.addEventListener("pointerover", this.onAdoptCheck);
     r.addEventListener("focusin", this.onAdoptCheck);
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(true);
   }
   unbindEvents() {
     const r = this.root;
@@ -3852,6 +3991,7 @@ var Calendar = class {
     r.removeEventListener("pointerover", this.onAdoptCheck);
     r.removeEventListener("focusin", this.onAdoptCheck);
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(false);
     this.listenDoc(false);
   }
   listenDoc(on) {
@@ -3897,6 +4037,7 @@ var Calendar = class {
       mode = "select";
     }
     const touch = ev.pointerType === "touch";
+    const overflowOrigin = itemEl?.closest(".tnc-popover") && origin ? wallTime(origin.startMs, this.zone) : null;
     const s = {
       mode,
       pointerId: ev.pointerId,
@@ -3905,7 +4046,7 @@ var Calendar = class {
       y0: ev.clientY,
       active: false,
       origin,
-      grab: this.current?.hit(ev.clientX, ev.clientY) ?? null,
+      grab: overflowOrigin && this.current instanceof TimeGridView && !origin?.allDay ? { kind: "time", day: overflowOrigin.day, minute: overflowOrigin.minute } : this.current?.hit(ev.clientX, ev.clientY) ?? null,
       proposal: null,
       denied: false,
       timer: null,
@@ -4408,6 +4549,25 @@ var Calendar = class {
     if (el && meta) this.opts.onItemHover?.({ ...this.itemArg(el, meta), jsEvent: ev, entering: false });
   }
   onKeyDown = (ev) => {
+    if (this.popover && !ev.altKey && !ev.ctrlKey && !ev.metaKey && ["ArrowDown", "ArrowUp", "Home", "End"].includes(ev.key)) {
+      const rows = [...this.popover.el.querySelectorAll(".tnc-item")];
+      const index = rows.indexOf(this.doc.activeElement);
+      const next = ev.key === "Home" ? 0 : ev.key === "End" ? rows.length - 1 : ev.key === "ArrowDown" ? (index + 1) % rows.length : index <= 0 ? rows.length - 1 : index - 1;
+      ev.preventDefault();
+      ev.stopPropagation();
+      rows[next]?.focus();
+      rows[next]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+      return;
+    }
+    if (ev.key === "Tab" && this.popover) {
+      const controls = [...this.popover.el.querySelectorAll('button, a[href], [tabindex="0"]')];
+      const index = controls.indexOf(this.doc.activeElement);
+      const next = ev.shiftKey ? index <= 0 ? controls.length - 1 : index - 1 : (index + 1) % controls.length;
+      ev.preventDefault();
+      ev.stopPropagation();
+      controls[next]?.focus();
+      return;
+    }
     if (ev.key === "Escape" && this.popover) {
       ev.preventDefault();
       ev.stopPropagation();