@tasknotes/calendar 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.12
+
+- Hosts can pass a `tooltip(el, text)` option to show hover tooltips their own way (Obsidian's `setTooltip`, say). Without it, tooltips stay as `title` attributes.
+
 ## 0.1.11
 
 - Hour-long timed items keep their time in narrow columns. Only single-row short items drop the time label when narrow; in the stacked layout the title is clamped to the lines left above the time (callumalpass/tasknotes#2528).

package/dist/cjs/index.cjs

@@ -1057,6 +1057,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "text",
   "timeline",
   "editable",
+  "tooltip",
   "itemContent",
   "itemClassNames",
   "listItemContent",
@@ -1693,8 +1694,10 @@ var DateStrip = class {
     const head = h(doc, "div", "tnc-strip-head");
     this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
     this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
-    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
-    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next }, "\u203A");
+    ctx.tooltip(prev, text.prev);
+    ctx.tooltip(next, text.next);
     prev.addEventListener("click", () => this.step(-1));
     next.addEventListener("click", () => this.step(1));
     this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
@@ -2318,10 +2321,10 @@ var TimeGridView = class {
           h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
         );
         link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
-        link.title = link.getAttribute("aria-label");
+        ctx.tooltip(link, link.getAttribute("aria-label"));
       } else {
+        ctx.tooltip(link, "");
         link.removeAttribute("aria-label");
-        link.removeAttribute("title");
       }
       const cols = maxStack;
       setStyle(link, {
@@ -3099,9 +3102,9 @@ var YearView = class {
       );
       const label = this.ctx.fmt.longDate(c.day);
       c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
-      c.el.title = items.length ? `${label}
+      this.ctx.tooltip(c.el, items.length ? `${label}
 ${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
-${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+${this.ctx.text.more(items.length - 8)}` : ""}` : label);
     }
   }
   showSelection(_sel) {
@@ -3536,6 +3539,11 @@ var Calendar = class {
     const specific = what === "start" ? it.startEditable : it.durationEditable;
     return specific ?? base;
   }
+  tooltip(el, text) {
+    if (this.opts.tooltip) this.opts.tooltip(el, text);
+    else if (text) el.title = text;
+    else el.removeAttribute("title");
+  }
   navLink(day, label, cls) {
     const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
     btn.addEventListener("click", (ev) => {
@@ -3937,7 +3945,8 @@ var Calendar = class {
     const cfg = tb === true ? {} : tb;
     const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
     const btn = (label, hint, cls, onClick, pressed) => {
-      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", "aria-label": hint }, label);
+      this.tooltip(b, hint);
       if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
       b.addEventListener("click", onClick);
       return b;
@@ -4137,7 +4146,9 @@ var Calendar = class {
   addPorts(el, n) {
     const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
     for (const edge of edges) {
-      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+      const port = h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge });
+      this.tooltip(port, "Drag to link");
+      el.append(port);
     }
   }
   /* ============================================================== popover */

package/dist/cjs/react.cjs

@@ -806,6 +806,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "text",
   "timeline",
   "editable",
+  "tooltip",
   "itemContent",
   "itemClassNames",
   "listItemContent",
@@ -1601,8 +1602,10 @@ var DateStrip = class {
     const head = h(doc, "div", "tnc-strip-head");
     this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
     this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
-    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
-    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next }, "\u203A");
+    ctx.tooltip(prev, text.prev);
+    ctx.tooltip(next, text.next);
     prev.addEventListener("click", () => this.step(-1));
     next.addEventListener("click", () => this.step(1));
     this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
@@ -2226,10 +2229,10 @@ var TimeGridView = class {
           h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
         );
         link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
-        link.title = link.getAttribute("aria-label");
+        ctx.tooltip(link, link.getAttribute("aria-label"));
       } else {
+        ctx.tooltip(link, "");
         link.removeAttribute("aria-label");
-        link.removeAttribute("title");
       }
       const cols = maxStack;
       setStyle(link, {
@@ -3007,9 +3010,9 @@ var YearView = class {
       );
       const label = this.ctx.fmt.longDate(c.day);
       c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
-      c.el.title = items.length ? `${label}
+      this.ctx.tooltip(c.el, items.length ? `${label}
 ${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
-${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+${this.ctx.text.more(items.length - 8)}` : ""}` : label);
     }
   }
   showSelection(_sel) {
@@ -3444,6 +3447,11 @@ var Calendar = class {
     const specific = what === "start" ? it.startEditable : it.durationEditable;
     return specific ?? base;
   }
+  tooltip(el, text) {
+    if (this.opts.tooltip) this.opts.tooltip(el, text);
+    else if (text) el.title = text;
+    else el.removeAttribute("title");
+  }
   navLink(day, label, cls) {
     const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
     btn.addEventListener("click", (ev) => {
@@ -3845,7 +3853,8 @@ var Calendar = class {
     const cfg = tb === true ? {} : tb;
     const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
     const btn = (label, hint, cls, onClick, pressed) => {
-      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", "aria-label": hint }, label);
+      this.tooltip(b, hint);
       if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
       b.addEventListener("click", onClick);
       return b;
@@ -4045,7 +4054,9 @@ var Calendar = class {
   addPorts(el, n) {
     const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
     for (const edge of edges) {
-      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+      const port = h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge });
+      this.tooltip(port, "Drag to link");
+      el.append(port);
     }
   }
   /* ============================================================== popover */

package/dist/esm/{chunk-TTM45UAN.js → chunk-AACI7SZC.js}

@@ -262,6 +262,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "text",
   "timeline",
   "editable",
+  "tooltip",
   "itemContent",
   "itemClassNames",
   "listItemContent",
@@ -984,8 +985,10 @@ var DateStrip = class {
     const head = h(doc, "div", "tnc-strip-head");
     this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
     this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
-    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
-    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next }, "\u203A");
+    ctx.tooltip(prev, text.prev);
+    ctx.tooltip(next, text.next);
     prev.addEventListener("click", () => this.step(-1));
     next.addEventListener("click", () => this.step(1));
     this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
@@ -1609,10 +1612,10 @@ var TimeGridView = class {
           h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
         );
         link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
-        link.title = link.getAttribute("aria-label");
+        ctx.tooltip(link, link.getAttribute("aria-label"));
       } else {
+        ctx.tooltip(link, "");
         link.removeAttribute("aria-label");
-        link.removeAttribute("title");
       }
       const cols = maxStack;
       setStyle(link, {
@@ -2390,9 +2393,9 @@ var YearView = class {
       );
       const label = this.ctx.fmt.longDate(c.day);
       c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
-      c.el.title = items.length ? `${label}
+      this.ctx.tooltip(c.el, items.length ? `${label}
 ${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
-${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+${this.ctx.text.more(items.length - 8)}` : ""}` : label);
     }
   }
   showSelection(_sel) {
@@ -2827,6 +2830,11 @@ var Calendar = class {
     const specific = what === "start" ? it.startEditable : it.durationEditable;
     return specific ?? base;
   }
+  tooltip(el, text) {
+    if (this.opts.tooltip) this.opts.tooltip(el, text);
+    else if (text) el.title = text;
+    else el.removeAttribute("title");
+  }
   navLink(day, label, cls) {
     const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
     btn.addEventListener("click", (ev) => {
@@ -3228,7 +3236,8 @@ var Calendar = class {
     const cfg = tb === true ? {} : tb;
     const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
     const btn = (label, hint, cls, onClick, pressed) => {
-      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", "aria-label": hint }, label);
+      this.tooltip(b, hint);
       if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
       b.addEventListener("click", onClick);
       return b;
@@ -3428,7 +3437,9 @@ var Calendar = class {
   addPorts(el, n) {
     const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
     for (const edge of edges) {
-      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+      const port = h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge });
+      this.tooltip(port, "Drag to link");
+      el.append(port);
     }
   }
   /* ============================================================== popover */

package/dist/esm/index.js

@@ -7,7 +7,7 @@ import {
   TIMELINE_UNIT_DAYS,
   defaultOptions,
   localeFirstDay
-} from "./chunk-TTM45UAN.js";
+} from "./chunk-AACI7SZC.js";
 import {
   DAY_MS,
   ItemStore,

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-TTM45UAN.js";
+} from "./chunk-AACI7SZC.js";
 import "./chunk-JWORVABV.js";
 
 // src/react/index.tsx

package/dist/types/dom/calendar.d.cts

@@ -146,6 +146,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     dayArg(day: Day): DayArg;
     dayClasses(day: Day): string[];
     isEditable(n: NormalizedItem<D>, what: "start" | "duration", presentation?: boolean): boolean;
+    tooltip(el: HTMLElement, text: string): void;
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     navigate(day: Day, jsEvent: MouseEvent | KeyboardEvent, view?: "day" | "month"): void;
     createItemEl(meta: ElMeta<D>): HTMLElement;

package/dist/types/dom/calendar.d.ts

@@ -146,6 +146,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     dayArg(day: Day): DayArg;
     dayClasses(day: Day): string[];
     isEditable(n: NormalizedItem<D>, what: "start" | "duration", presentation?: boolean): boolean;
+    tooltip(el: HTMLElement, text: string): void;
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     navigate(day: Day, jsEvent: MouseEvent | KeyboardEvent, view?: "day" | "month"): void;
     createItemEl(meta: ElMeta<D>): HTMLElement;

package/dist/types/dom/context.d.cts

@@ -59,6 +59,8 @@ export interface ViewContext<D = unknown> {
     /** Refreshes parts of an item element that depend on position (time label). */
     refreshItemEl(el: HTMLElement, meta: ElMeta<D>): void;
     destroyItemEl(el: HTMLElement): void;
+    /** Sets or clears (empty `text`) an element's hover tooltip through `opts.tooltip`. */
+    tooltip(el: HTMLElement, text: string): void;
     /** Builds a nav link (day number / header) for a day. */
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     openMore(day: Day, anchor: HTMLElement, jsEvent: MouseEvent | KeyboardEvent, itemIds?: readonly string[]): void;

package/dist/types/dom/context.d.ts

@@ -59,6 +59,8 @@ export interface ViewContext<D = unknown> {
     /** Refreshes parts of an item element that depend on position (time label). */
     refreshItemEl(el: HTMLElement, meta: ElMeta<D>): void;
     destroyItemEl(el: HTMLElement): void;
+    /** Sets or clears (empty `text`) an element's hover tooltip through `opts.tooltip`. */
+    tooltip(el: HTMLElement, text: string): void;
     /** Builds a nav link (day number / header) for a day. */
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     openMore(day: Day, anchor: HTMLElement, jsEvent: MouseEvent | KeyboardEvent, itemIds?: readonly string[]): void;

package/dist/types/dom/options.d.cts

@@ -433,6 +433,12 @@ export interface CalendarOptions<D = unknown> {
     }) => void;
     /** Return false to skip the built-in popover. */
     onMoreClick?: (arg: MoreArg<D>) => boolean | void;
+    /**
+     * Shows `text` as `el`'s hover tooltip; an empty `text` clears it. Default:
+     * the `title` attribute. Hosts with their own tooltips (Obsidian's
+     * `setTooltip`, say) pass them here.
+     */
+    tooltip?: (el: HTMLElement, text: string) => void;
     itemContent?: (arg: ItemArg<D>) => Node | string | null | undefined;
     itemClassNames?: (arg: ItemArg<D>) => string[] | string | undefined;
     itemDidMount?: (arg: ItemArg<D>) => void;

package/dist/types/dom/options.d.ts

@@ -433,6 +433,12 @@ export interface CalendarOptions<D = unknown> {
     }) => void;
     /** Return false to skip the built-in popover. */
     onMoreClick?: (arg: MoreArg<D>) => boolean | void;
+    /**
+     * Shows `text` as `el`'s hover tooltip; an empty `text` clears it. Default:
+     * the `title` attribute. Hosts with their own tooltips (Obsidian's
+     * `setTooltip`, say) pass them here.
+     */
+    tooltip?: (el: HTMLElement, text: string) => void;
     itemContent?: (arg: ItemArg<D>) => Node | string | null | undefined;
     itemClassNames?: (arg: ItemArg<D>) => string[] | string | undefined;
     itemDidMount?: (arg: ItemArg<D>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tasknotes/calendar",
-	"version": "0.1.11",
+	"version": "0.1.12",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",