@toolbox-web/grid 1.13.0 → 1.14.0

package/lib/plugins/context-menu/ContextMenuPlugin.d.ts

@@ -93,6 +93,14 @@ export declare class ContextMenuPlugin extends BaseGridPlugin<ContextMenuConfig>
     attach(grid: import('../../core/plugin/base-plugin').GridElement): void;
     /** @internal */
     detach(): void;
+    /**
+     * Sync selection with the right-clicked row.
+     * If the right-clicked row is already selected, keeps the multi-selection.
+     * If not, selects only the right-clicked row (standard behavior in file managers / spreadsheets).
+     *
+     * @returns Sorted array of selected row indices after sync
+     */
+    private syncSelectionOnContextMenu;
     /**
      * CSS variables to copy from the grid element to the context menu.
      * Includes both base variables and context-menu specific overrides.

package/lib/plugins/context-menu/ContextMenuPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/context-menu/ContextMenuPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,iBAAiB,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkCrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,iBAAkB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACtE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,iBAAiB;IAE9B,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,iBAAiB,CAAC,CAIjE;IAGD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAA4B;IAK/C,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAMhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAoCtC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA2BtB,OAAO,CAAC,qBAAqB;IAqC7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAsB/B,gBAAgB;IACP,WAAW,IAAI,IAAI;IA8F5B;;;;;OAKG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAoCxE;;OAEG;IACH,QAAQ,IAAI,IAAI;IAQhB;;;OAGG;IACH,UAAU,IAAI,OAAO;CAMtB"}
+{"version":3,"file":"ContextMenuPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/context-menu/ContextMenuPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,iBAAiB,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkCrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,iBAAkB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACtE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,iBAAiB;IAE9B,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,iBAAiB,CAAC,CAIjE;IAGD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAA4B;IAK/C,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAMhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB;;;;;;OAMG;IACH,OAAO,CAAC,0BAA0B;IAoBlC;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAoCtC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA2BtB,OAAO,CAAC,qBAAqB;IAqC7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAsB/B,gBAAgB;IACP,WAAW,IAAI,IAAI;IAoG5B;;;;;OAKG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAqCxE;;OAEG;IACH,QAAQ,IAAI,IAAI;IAQhB;;;OAGG;IACH,UAAU,IAAI,OAAO;CAMtB"}

package/lib/plugins/context-menu/index.js

@@ -1,4 +1,4 @@
-const y = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', I = {
+const E = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', I = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -7,11 +7,11 @@ const y = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: y,
-  filterActive: y,
+  filter: E,
+  filterActive: E,
   print: "🖨️"
 };
-class S {
+class R {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -378,19 +378,19 @@ class S {
   // #endregion
 }
 const g = "@layer tbw-plugins{.tbw-context-menu{position:fixed;background:var(--tbw-context-menu-bg, var(--tbw-color-panel-bg));color:var(--tbw-context-menu-fg, var(--tbw-color-fg));border:1px solid var(--tbw-context-menu-border, var(--tbw-color-border));border-radius:var(--tbw-context-menu-radius, var(--tbw-border-radius));box-shadow:var(--tbw-context-menu-shadow, 0 2px 10px var(--tbw-color-shadow));min-width:var(--tbw-context-menu-min-width, var(--tbw-menu-min-width));padding:var(--tbw-spacing-xs) 0;z-index:10000;font-size:var(--tbw-context-menu-font-size, var(--tbw-font-size-sm));font-family:var(--tbw-context-menu-font-family, var(--tbw-font-family))}.tbw-context-menu-item{display:flex;align-items:center;padding:var(--tbw-context-menu-item-padding, var(--tbw-menu-item-padding));cursor:pointer;gap:var(--tbw-context-menu-item-gap, var(--tbw-menu-item-gap))}.tbw-context-menu-item:hover:not(.disabled){background:var(--tbw-context-menu-hover, var(--tbw-color-row-hover))}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:var(--tbw-context-menu-danger, var(--tbw-color-danger))}.tbw-context-menu-icon{width:var(--tbw-context-menu-icon-size, var(--tbw-icon-size));text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:var(--tbw-context-menu-muted, var(--tbw-color-fg-muted));font-size:var(--tbw-context-menu-shortcut-size, var(--tbw-font-size-xs))}.tbw-context-menu-arrow{font-size:var(--tbw-context-menu-arrow-size, var(--tbw-font-size-2xs));color:var(--tbw-context-menu-muted, var(--tbw-color-fg-muted))}.tbw-context-menu-separator{height:1px;background:var(--tbw-context-menu-border, var(--tbw-color-border));margin:var(--tbw-spacing-xs) 0}}";
-function x(s, e) {
-  return (typeof s == "function" ? s(e) : s).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
+function x(r, e) {
+  return (typeof r == "function" ? r(e) : r).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
 }
-function z(s, e) {
-  return s.disabled === !0 ? !0 : typeof s.disabled == "function" ? s.disabled(e) : !1;
+function z(r, e) {
+  return r.disabled === !0 ? !0 : typeof r.disabled == "function" ? r.disabled(e) : !1;
 }
-function v(s, e, t, n = I.submenuArrow) {
-  const r = document.createElement("div");
-  r.className = "tbw-context-menu", r.setAttribute("role", "menu");
-  for (const o of s) {
+function v(r, e, t, n = I.submenuArrow) {
+  const s = document.createElement("div");
+  s.className = "tbw-context-menu", s.setAttribute("role", "menu");
+  for (const o of r) {
     if (o.separator) {
       const l = document.createElement("div");
-      l.className = "tbw-context-menu-separator", l.setAttribute("role", "separator"), r.appendChild(l);
+      l.className = "tbw-context-menu-separator", l.setAttribute("role", "separator"), s.appendChild(l);
       continue;
     }
     const i = document.createElement("div");
@@ -400,8 +400,8 @@ function v(s, e, t, n = I.submenuArrow) {
       const l = document.createElement("span");
       l.className = "tbw-context-menu-icon", l.innerHTML = o.icon, i.appendChild(l);
     }
-    const c = document.createElement("span");
-    if (c.className = "tbw-context-menu-label", c.textContent = o.name, i.appendChild(c), o.shortcut) {
+    const a = document.createElement("span");
+    if (a.className = "tbw-context-menu-label", a.textContent = o.name, i.appendChild(a), o.shortcut) {
       const l = document.createElement("span");
       l.className = "tbw-context-menu-shortcut", l.textContent = o.shortcut, i.appendChild(l);
     }
@@ -412,21 +412,21 @@ function v(s, e, t, n = I.submenuArrow) {
         const b = x(o.subMenu, e), d = v(b, e, t, n);
         d.classList.add("tbw-context-submenu"), d.style.position = "absolute", d.style.left = "100%", d.style.top = "0", i.style.position = "relative", i.appendChild(d);
       }), i.addEventListener("mouseleave", () => {
-        const a = i.querySelector(".tbw-context-menu");
-        a && a.remove();
+        const c = i.querySelector(".tbw-context-menu");
+        c && c.remove();
       });
     }
     !u && o.action && !o.subMenu && i.addEventListener("click", (l) => {
       l.stopPropagation(), t(o);
-    }), r.appendChild(i);
+    }), s.appendChild(i);
   }
-  return r;
+  return s;
 }
-function C(s, e, t) {
-  s.style.position = "fixed", s.style.left = `${e}px`, s.style.top = `${t}px`, s.style.visibility = "hidden", s.style.zIndex = "10000";
-  const n = s.getBoundingClientRect(), r = window.innerWidth, o = window.innerHeight;
+function C(r, e, t) {
+  r.style.position = "fixed", r.style.left = `${e}px`, r.style.top = `${t}px`, r.style.visibility = "hidden", r.style.zIndex = "10000";
+  const n = r.getBoundingClientRect(), s = window.innerWidth, o = window.innerHeight;
   let i = e, u = t;
-  e + n.width > r && (i = e - n.width), t + n.height > o && (u = t - n.height), i = Math.max(0, i), u = Math.max(0, u), s.style.left = `${i}px`, s.style.top = `${u}px`, s.style.visibility = "visible";
+  e + n.width > s && (i = e - n.width), t + n.height > o && (u = t - n.height), i = Math.max(0, i), u = Math.max(0, u), r.style.left = `${i}px`, r.style.top = `${u}px`, r.style.visibility = "visible";
 }
 let h = null, f = null, m = null, w = 0;
 const p = [
@@ -434,20 +434,20 @@ const p = [
     id: "copy",
     name: "Copy",
     shortcut: "Ctrl+C",
-    action: (s) => {
-      s.grid?.plugins?.clipboard?.copy?.();
+    action: (r) => {
+      r.grid?.plugins?.clipboard?.copy?.();
     }
   },
   { separator: !0, id: "sep1", name: "" },
   {
     id: "export-csv",
     name: "Export CSV",
-    action: (s) => {
-      s.grid?.plugins?.export?.exportCsv?.();
+    action: (r) => {
+      r.grid?.plugins?.export?.exportCsv?.();
     }
   }
 ];
-class M extends S {
+class S extends R {
   /** @internal */
   name = "contextMenu";
   /** @internal */
@@ -473,6 +473,18 @@ class M extends S {
   }
   // #endregion
   // #region Private Methods
+  /**
+   * Sync selection with the right-clicked row.
+   * If the right-clicked row is already selected, keeps the multi-selection.
+   * If not, selects only the right-clicked row (standard behavior in file managers / spreadsheets).
+   *
+   * @returns Sorted array of selected row indices after sync
+   */
+  syncSelectionOnContextMenu(e) {
+    if (e < 0) return [];
+    const n = this.grid?.query("getSelectedRowIndices")?.[0];
+    return n ? n.includes(e) ? n : (this.grid?.query("selectRows", [e]), [e]) : [e];
+  }
   /**
    * CSS variables to copy from the grid element to the context menu.
    * Includes both base variables and context-menu specific overrides.
@@ -522,15 +534,15 @@ class M extends S {
   copyGridStyles(e) {
     const t = this.gridElement;
     if (!t) return;
-    const n = getComputedStyle(t), r = [], o = n.getPropertyValue("color-scheme").trim();
-    o && r.push(`color-scheme: ${o}`);
-    for (const i of M.CSS_VARS_TO_COPY) {
+    const n = getComputedStyle(t), s = [], o = n.getPropertyValue("color-scheme").trim();
+    o && s.push(`color-scheme: ${o}`);
+    for (const i of S.CSS_VARS_TO_COPY) {
       const u = n.getPropertyValue(i).trim();
-      u && r.push(`${i}: ${u}`);
+      u && s.push(`${i}: ${u}`);
     }
-    if (r.length > 0) {
+    if (s.length > 0) {
       const i = e.getAttribute("style") || "";
-      e.setAttribute("style", i + r.join("; ") + ";");
+      e.setAttribute("style", i + s.join("; ") + ";");
     }
   }
   installGlobalHandlers() {
@@ -555,46 +567,48 @@ class M extends S {
     if (!e) return;
     const t = e.querySelector(".tbw-grid-root");
     t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
-      const r = n;
-      r.preventDefault();
-      const o = r.target, i = o.closest("[data-row][data-col]"), u = o.closest(".header-cell");
-      let c;
+      const s = n;
+      s.preventDefault();
+      const o = s.target, i = o.closest("[data-row][data-col]"), u = o.closest(".header-cell");
+      let a;
       if (i) {
-        const a = parseInt(i.getAttribute("data-row") ?? "-1", 10), b = parseInt(i.getAttribute("data-col") ?? "-1", 10), d = this.columns[b], E = this.rows[a];
-        c = {
-          row: E,
-          rowIndex: a,
+        const c = parseInt(i.getAttribute("data-row") ?? "-1", 10), b = parseInt(i.getAttribute("data-col") ?? "-1", 10), d = this.columns[b], y = this.rows[c], M = this.syncSelectionOnContextMenu(c);
+        a = {
+          row: y,
+          rowIndex: c,
           column: d,
           columnIndex: b,
           field: d?.field ?? "",
-          value: E?.[d?.field] ?? null,
+          value: y?.[d?.field] ?? null,
           isHeader: !1,
-          event: r
+          event: s,
+          selectedRows: M
         };
       } else if (u) {
-        const a = parseInt(u.getAttribute("data-col") ?? "-1", 10), b = this.columns[a];
-        c = {
+        const c = parseInt(u.getAttribute("data-col") ?? "-1", 10), b = this.columns[c];
+        a = {
           row: null,
           rowIndex: -1,
           column: b,
-          columnIndex: a,
+          columnIndex: c,
           field: b?.field ?? "",
           value: null,
           isHeader: !0,
-          event: r
+          event: s,
+          selectedRows: []
         };
       } else
         return;
-      this.params = c, this.position = { x: r.clientX, y: r.clientY };
-      const l = x(this.config.items ?? p, c);
+      this.params = a, this.position = { x: s.clientX, y: s.clientY };
+      const l = x(this.config.items ?? p, a);
       l.length && (this.menuElement && this.menuElement.remove(), this.menuElement = v(
         l,
-        c,
-        (a) => {
-          a.action && a.action(c), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+        a,
+        (c) => {
+          c.action && c.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
         },
         this.gridIcons.submenuArrow
-      ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), C(this.menuElement, r.clientX, r.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: c, items: l }));
+      ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), C(this.menuElement, s.clientX, s.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: l }));
     }));
   }
   // #endregion
@@ -606,7 +620,7 @@ class M extends S {
    * @param params - Partial context menu parameters
    */
   showMenu(e, t, n) {
-    const r = {
+    const s = {
       row: n.row ?? null,
       rowIndex: n.rowIndex ?? -1,
       column: n.column ?? null,
@@ -614,13 +628,14 @@ class M extends S {
       field: n.field ?? "",
       value: n.value ?? null,
       isHeader: n.isHeader ?? !1,
-      event: n.event ?? new MouseEvent("contextmenu")
-    }, o = x(this.config.items ?? p, r);
+      event: n.event ?? new MouseEvent("contextmenu"),
+      selectedRows: n.selectedRows ?? []
+    }, o = x(this.config.items ?? p, s);
     this.menuElement && this.menuElement.remove(), this.menuElement = v(
       o,
-      r,
+      s,
       (i) => {
-        i.action && i.action(r), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+        i.action && i.action(s), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
       },
       this.gridIcons.submenuArrow
     ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), C(this.menuElement, e, t), this.isOpen = !0;
@@ -642,6 +657,6 @@ class M extends S {
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
 export {
-  M as ContextMenuPlugin
+  S as ContextMenuPlugin
 };
 //# sourceMappingURL=index.js.map