@toolbox-web/grid 0.4.1 → 0.5.0

package/lib/plugins/tree/index.js

@@ -8,7 +8,7 @@ const S = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class R {
+class _ {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -25,8 +25,11 @@ class R {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -113,12 +116,28 @@ class R {
   emit(e, t) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, t) {
+    const n = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(n), n.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -153,10 +172,34 @@ class R {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -186,6 +229,51 @@ class R {
     const e = this.grid?.gridConfig?.icons ?? {};
     return { ...S, ...e };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.gridElement;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(t, 10);
+      if (!isNaN(n)) return n;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -215,54 +303,54 @@ class R {
   }
   // #endregion
 }
-function x(i, e, t) {
-  return i.id !== void 0 ? String(i.id) : t ? `${t}-${e}` : String(e);
+function x(s, e, t) {
+  return s.id !== void 0 ? String(s.id) : t ? `${t}-${e}` : String(e);
 }
-function m(i, e) {
-  const t = new Set(i);
+function y(s, e) {
+  const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function p(i, e, t = null, n = 0) {
-  const s = e.childrenField ?? "children", o = /* @__PURE__ */ new Set();
-  for (let r = 0; r < i.length; r++) {
-    const d = i[r], a = x(d, r, t), l = d[s];
-    if (Array.isArray(l) && l.length > 0) {
+function w(s, e, t = null, n = 0) {
+  const i = e.childrenField ?? "children", o = /* @__PURE__ */ new Set();
+  for (let r = 0; r < s.length; r++) {
+    const l = s[r], a = x(l, r, t), d = l[i];
+    if (Array.isArray(d) && d.length > 0) {
       o.add(a);
-      const h = p(l, e, a, n + 1);
-      for (const f of h) o.add(f);
+      const h = w(d, e, a, n + 1);
+      for (const u of h) o.add(u);
     }
   }
   return o;
 }
-function C() {
+function v() {
   return /* @__PURE__ */ new Set();
 }
-function A(i, e, t, n = null, s = 0) {
+function R(s, e, t, n = null, i = 0) {
   const o = t.childrenField ?? "children";
-  for (let r = 0; r < i.length; r++) {
-    const d = i[r], a = x(d, r, n);
+  for (let r = 0; r < s.length; r++) {
+    const l = s[r], a = x(l, r, n);
     if (a === e)
       return [a];
-    const l = d[o];
-    if (Array.isArray(l) && l.length > 0) {
-      const h = A(l, e, t, a, s + 1);
+    const d = l[o];
+    if (Array.isArray(d) && d.length > 0) {
+      const h = R(d, e, t, a, i + 1);
       if (h)
         return [a, ...h];
     }
   }
   return null;
 }
-function v(i, e, t, n) {
-  const s = A(i, e, t);
-  if (!s) return n;
+function E(s, e, t, n) {
+  const i = R(s, e, t);
+  if (!i) return n;
   const o = new Set(n);
-  for (let r = 0; r < s.length - 1; r++)
-    o.add(s[r]);
+  for (let r = 0; r < i.length - 1; r++)
+    o.add(i[r]);
   return o;
 }
-function b(i, e = "children") {
-  if (!Array.isArray(i) || i.length === 0) return !1;
-  for (const t of i) {
+function m(s, e = "children") {
+  if (!Array.isArray(s) || s.length === 0) return !1;
+  for (const t of s) {
     if (!t) continue;
     const n = t[e];
     if (Array.isArray(n) && n.length > 0)
@@ -270,47 +358,46 @@ function b(i, e = "children") {
   }
   return !1;
 }
-function _(i) {
-  if (!Array.isArray(i) || i.length === 0) return null;
+function C(s) {
+  if (!Array.isArray(s) || s.length === 0) return null;
   const e = ["children", "items", "nodes", "subRows", "nested"];
-  for (const t of i)
+  for (const t of s)
     if (!(!t || typeof t != "object"))
       for (const n of e) {
-        const s = t[n];
-        if (Array.isArray(s) && s.length > 0)
+        const i = t[n];
+        if (Array.isArray(i) && i.length > 0)
           return n;
       }
   return null;
 }
-function E(i, e = "children", t = 0) {
-  if (!Array.isArray(i) || i.length === 0) return t;
+function k(s, e = "children", t = 0) {
+  if (!Array.isArray(s) || s.length === 0) return t;
   let n = t;
-  for (const s of i) {
-    if (!s) continue;
-    const o = s[e];
+  for (const i of s) {
+    if (!i) continue;
+    const o = i[e];
     if (Array.isArray(o) && o.length > 0) {
-      const r = E(o, e, t + 1);
+      const r = k(o, e, t + 1);
       r > n && (n = r);
     }
   }
   return n;
 }
-function k(i, e = "children") {
-  if (!Array.isArray(i)) return 0;
+function T(s, e = "children") {
+  if (!Array.isArray(s)) return 0;
   let t = 0;
-  for (const n of i) {
+  for (const n of s) {
     if (!n) continue;
     t++;
-    const s = n[e];
-    Array.isArray(s) && (t += k(s, e));
+    const i = n[e];
+    Array.isArray(i) && (t += T(i, e));
   }
   return t;
 }
-const T = ".tree-cell{display:flex;align-items:center;padding-left:calc(var(--tree-depth, 0) * var(--tbw-tree-indent, 20px))}.tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:14px;display:inline-block}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}";
-class F extends R {
+const I = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .tree-cell-wrapper{display:inline-flex;align-items:center;padding-left:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}tbw-grid .tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}tbw-grid .tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}tbw-grid .tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}tbw-grid .tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}tbw-grid .data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";
+class F extends _ {
   name = "tree";
-  version = "1.0.0";
-  styles = T;
+  styles = I;
   get defaultConfig() {
     return {
       childrenField: "children",
@@ -334,31 +421,28 @@ class F extends R {
   }
   // #endregion
   // #region Animation
+  /**
+   * Get expand/collapse animation style from plugin config.
+   * Uses base class isAnimationEnabled to respect grid-level settings.
+   */
   get animationStyle() {
-    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
-    if (t === !1 || t === "off") return !1;
-    if (t !== !0 && t !== "on") {
-      const n = this.shadowRoot?.host;
-      if (n && getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() === "0")
-        return !1;
-    }
-    return this.config.animation ?? "slide";
+    return this.isAnimationEnabled ? this.config.animation ?? "slide" : !1;
   }
   // #endregion
   // #region Auto-Detection
   detect(e) {
     if (!this.config.autoDetect) return !1;
-    const t = e, n = this.config.childrenField ?? _(t) ?? "children";
-    return b(t, n);
+    const t = e, n = this.config.childrenField ?? C(t) ?? "children";
+    return m(t, n);
   }
   // #endregion
   // #region Data Processing
   processRows(e) {
     const t = this.config.childrenField ?? "children", n = e;
-    if (!b(n, t))
+    if (!m(n, t))
       return this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), [...e];
-    let s = this.withStableKeys(n);
-    this.sortState && (s = this.sortTree(s, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = p(s, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(s, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
+    let i = this.withStableKeys(n);
+    this.sortState && (i = this.sortTree(i, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = w(i, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(i, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
     const o = /* @__PURE__ */ new Set();
     for (const r of this.flattenedRows)
       this.rowKeyMap.set(r.key, r), o.add(r.key), !this.previousVisibleKeys.has(r.key) && r.depth > 0 && this.keysToAnimate.add(r.key);
@@ -373,80 +457,92 @@ class F extends R {
   /** Assign stable keys to rows (preserves key across sort operations) */
   withStableKeys(e, t = null) {
     const n = this.config.childrenField ?? "children";
-    return e.map((s, o) => {
-      const r = s.__stableKey, d = s.id !== void 0 ? String(s.id) : r ?? (t ? `${t}-${o}` : String(o)), a = s[n], l = Array.isArray(a) && a.length > 0;
+    return e.map((i, o) => {
+      const r = i.__stableKey, l = i.id !== void 0 ? String(i.id) : r ?? (t ? `${t}-${o}` : String(o)), a = i[n], d = Array.isArray(a) && a.length > 0;
       return {
-        ...s,
-        __stableKey: d,
-        ...l ? { [n]: this.withStableKeys(a, d) } : {}
+        ...i,
+        __stableKey: l,
+        ...d ? { [n]: this.withStableKeys(a, l) } : {}
       };
     });
   }
   /** Flatten tree using stable keys */
   flattenTree(e, t, n = 0) {
-    const s = this.config.childrenField ?? "children", o = [];
+    const i = this.config.childrenField ?? "children", o = [];
     for (const r of e) {
-      const a = r.__stableKey ?? String(r.id ?? "?"), l = r[s], h = Array.isArray(l) && l.length > 0, f = t.has(a);
+      const a = r.__stableKey ?? String(r.id ?? "?"), d = r[i], h = Array.isArray(d) && d.length > 0, u = t.has(a);
       o.push({
         key: a,
         data: r,
         depth: n,
         hasChildren: h,
-        isExpanded: f,
+        isExpanded: u,
         parentKey: n > 0 && a.substring(0, a.lastIndexOf("-")) || null
-      }), h && f && o.push(...this.flattenTree(l, t, n + 1));
+      }), h && u && o.push(...this.flattenTree(d, t, n + 1));
     }
     return o;
   }
   /** Sort tree recursively, keeping children with parents */
   sortTree(e, t, n) {
-    const s = this.config.childrenField ?? "children";
-    return [...e].sort((r, d) => {
-      const a = r[t], l = d[t];
-      return a == null && l == null ? 0 : a == null ? -1 : l == null ? 1 : a > l ? n : a < l ? -n : 0;
+    const i = this.config.childrenField ?? "children";
+    return [...e].sort((r, l) => {
+      const a = r[t], d = l[t];
+      return a == null && d == null ? 0 : a == null ? -1 : d == null ? 1 : a > d ? n : a < d ? -n : 0;
     }).map((r) => {
-      const d = r[s];
-      return Array.isArray(d) && d.length > 0 ? { ...r, [s]: this.sortTree(d, t, n) } : r;
+      const l = r[i];
+      return Array.isArray(l) && l.length > 0 ? { ...r, [i]: this.sortTree(l, t, n) } : r;
     });
   }
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
     const t = [...e];
     if (t.length === 0) return t;
-    const n = { ...t[0] }, s = n.viewRenderer;
-    if (s?.__treeWrapped) return t;
-    const o = () => this.config, r = this.setIcon.bind(this), d = this.resolveIcon.bind(this), a = (l) => {
-      const { value: h, row: f } = l, { indentWidth: K = 20, showExpandIcons: w = !0 } = o(), g = f, u = document.createElement("span");
-      if (u.className = "tree-cell", u.style.setProperty("--tree-depth", String(g.__treeDepth ?? 0)), u.style.setProperty("--tbw-tree-indent", `${K}px`), g.__treeHasChildren && w) {
-        const c = document.createElement("span");
-        c.className = `tree-toggle${g.__treeExpanded ? " expanded" : ""}`, r(c, d(g.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", String(g.__treeKey ?? "")), u.appendChild(c);
-      } else if (w) {
-        const c = document.createElement("span");
-        c.className = "tree-spacer", u.appendChild(c);
-      }
-      const y = document.createElement("span");
-      if (s) {
-        const c = s(l);
-        c instanceof Node ? y.appendChild(c) : y.textContent = String(c ?? h ?? "");
+    const n = t[0], i = n.viewRenderer, o = () => this.config, r = this.setIcon.bind(this), l = this.resolveIcon.bind(this), a = (d) => {
+      const { row: h, value: u } = d, { showExpandIcons: A = !0, indentWidth: b } = o(), g = h, K = g.__treeDepth ?? 0, f = document.createElement("span");
+      if (f.className = "tree-cell-wrapper", f.style.setProperty("--tbw-tree-depth", String(K)), b !== void 0 && f.style.setProperty("--tbw-tree-indent-width", `${b}px`), A)
+        if (g.__treeHasChildren) {
+          const c = document.createElement("span");
+          c.className = `tree-toggle${g.__treeExpanded ? " expanded" : ""}`, r(c, l(g.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", String(g.__treeKey ?? "")), f.appendChild(c);
+        } else {
+          const c = document.createElement("span");
+          c.className = "tree-spacer", f.appendChild(c);
+        }
+      const p = document.createElement("span");
+      if (p.className = "tree-content", i) {
+        const c = i(d);
+        c instanceof Node ? p.appendChild(c) : typeof c == "string" && (p.innerHTML = c);
       } else
-        y.textContent = String(h ?? "");
-      return u.appendChild(y), u;
+        p.textContent = u != null ? String(u) : "";
+      return f.appendChild(p), f;
     };
-    return a.__treeWrapped = !0, n.viewRenderer = a, t[0] = n, t;
+    return t[0] = { ...n, viewRenderer: a }, t;
   }
   // #endregion
   // #region Event Handlers
   onCellClick(e) {
     const t = e.originalEvent?.target;
     if (!t?.classList.contains("tree-toggle")) return !1;
-    const n = t.getAttribute("data-tree-key"), s = n ? this.rowKeyMap.get(n) : null;
-    return s ? (this.expandedKeys = m(this.expandedKeys, n), this.emit("tree-expand", {
+    const n = t.getAttribute("data-tree-key");
+    if (!n) return !1;
+    const i = this.rowKeyMap.get(n);
+    return i ? (this.expandedKeys = y(this.expandedKeys, n), this.emit("tree-expand", {
       key: n,
-      row: s.data,
+      row: i.data,
       expanded: this.expandedKeys.has(n),
-      depth: s.depth
+      depth: i.depth
     }), this.requestRender(), !0) : !1;
   }
+  onKeyDown(e) {
+    if (e.key !== " ") return;
+    const t = this.grid._focusRow, n = this.flattenedRows[t];
+    if (n?.hasChildren)
+      return e.preventDefault(), this.expandedKeys = y(this.expandedKeys, n.key), this.emit("tree-expand", {
+        key: n.key,
+        row: n.data,
+        expanded: this.expandedKeys.has(n.key),
+        depth: n.depth
+      }), this.requestRenderWithFocus(), !0;
+  }
   onHeaderClick(e) {
     if (this.flattenedRows.length === 0 || !e.column.sortable) return !1;
     const { field: t } = e.column;
@@ -457,12 +553,12 @@ class F extends R {
   afterRender() {
     const e = this.animationStyle;
     if (e === !1 || this.keysToAnimate.size === 0) return;
-    const t = this.shadowRoot?.querySelector(".rows");
+    const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
-    for (const s of t.querySelectorAll(".data-grid-row")) {
-      const o = s.querySelector(".cell[data-row]"), r = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, d = this.flattenedRows[r]?.key;
-      d && this.keysToAnimate.has(d) && (s.classList.add(n), s.addEventListener("animationend", () => s.classList.remove(n), { once: !0 }));
+    for (const i of t.querySelectorAll(".data-grid-row")) {
+      const o = i.querySelector(".cell[data-row]"), r = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[r]?.key;
+      l && this.keysToAnimate.has(l) && (i.classList.add(n), i.addEventListener("animationend", () => i.classList.remove(n), { once: !0 }));
     }
     this.keysToAnimate.clear();
   }
@@ -475,13 +571,13 @@ class F extends R {
     this.expandedKeys.delete(e), this.requestRender();
   }
   toggle(e) {
-    this.expandedKeys = m(this.expandedKeys, e), this.requestRender();
+    this.expandedKeys = y(this.expandedKeys, e), this.requestRender();
   }
   expandAll() {
-    this.expandedKeys = p(this.rows, this.config), this.requestRender();
+    this.expandedKeys = w(this.rows, this.config), this.requestRender();
   }
   collapseAll() {
-    this.expandedKeys = C(), this.requestRender();
+    this.expandedKeys = v(), this.requestRender();
   }
   isExpanded(e) {
     return this.expandedKeys.has(e);
@@ -496,15 +592,15 @@ class F extends R {
     return this.rowKeyMap.get(e)?.data;
   }
   expandToKey(e) {
-    this.expandedKeys = v(this.rows, e, this.config, this.expandedKeys), this.requestRender();
+    this.expandedKeys = E(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
   // #endregion
 }
 export {
   F as TreePlugin,
-  k as countNodes,
-  b as detectTreeStructure,
-  E as getMaxDepth,
-  _ as inferChildrenField
+  T as countNodes,
+  m as detectTreeStructure,
+  k as getMaxDepth,
+  C as inferChildrenField
 };
 //# sourceMappingURL=index.js.map