@keenmate/web-grid 1.0.5 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.0.5",
+	"version": "1.1.0",
 	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
 	"type": "module",
 	"main": "./dist/web-grid.umd.js",

package/src/css/_table.css

@@ -67,7 +67,13 @@ web-grid:not(:defined) {
    ============================================================================== */
 .wg__table {
   width: 100%;
-  min-width: max-content;  /* Expand beyond container if columns are wide */
+  /* `min-width: max-content` was here to force the table to extend past the
+     container when column widths sum > container. But with table-layout: fixed,
+     the explicit column widths from the first row already cause that overflow
+     naturally — the min-width was redundant and triggered pathological
+     intrinsic-size computation in some browsers (Firefox especially) when cells
+     contained absolutely-positioned editors, blowing the filler width up to
+     hundreds of thousands of px. */
   border-collapse: collapse;
   table-layout: fixed;
   background: var(--wg-table-bg);

package/src/css/_tree.css

@@ -0,0 +1,73 @@
+/* ==============================================================================
+   TREE COLUMN
+   ==============================================================================
+   Indent + chevron rendered inside a cell when column.isTree is true.
+   The chevron is absolutely positioned so it can't affect row height; the
+   wrapper's padding-left reserves space for (level * indent + chevron + gap).
+*/
+
+:host {
+  --wg-tree-indent: 1.6rem;        /* per-level indent */
+  --wg-tree-chevron-size: 1.6rem;  /* chevron width/height */
+  --wg-tree-chevron-color: var(--wg-text-color-2);
+  --wg-tree-chevron-gap: var(--wg-spacing-xs);
+}
+
+.wg__tree-cell {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  /* padding-left + width: 100% would overflow the cell with content-box; force
+     padding to be included in the width so the wrapper exactly fills the cell. */
+  box-sizing: border-box;
+  /* Fill the cell vertically so clicks anywhere inside the cell land on the
+     wrapper, not the cell's padding band. Helps for the dblclick-toggle hit area. */
+  min-height: 100%;
+}
+
+.wg__tree-cell-content {
+  overflow: hidden;
+  text-overflow: inherit;
+  white-space: inherit;
+}
+
+.wg__tree-chevron {
+  position: absolute;
+  top: 50%;
+  /* `left` is set inline by JS = level * indent */
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wg-tree-chevron-size);
+  height: var(--wg-tree-chevron-size);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--wg-tree-chevron-color);
+  font-size: 0.9em;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 3px;
+}
+
+.wg__tree-chevron:hover:not(.wg__tree-chevron--leaf) {
+  background: var(--wg-hover-bg);
+}
+
+.wg__tree-chevron--leaf {
+  cursor: default;
+  pointer-events: none;
+  background: transparent;
+}
+
+/* While the cell is being edited, let the editor absolute-fill the <td> as it
+   normally does. The chevron/indent are visual aids for display mode; they come
+   back when editing ends. */
+.wg__cell--editing .wg__tree-chevron {
+  display: none;
+}
+.wg__cell--editing .wg__tree-cell {
+  display: contents;  /* wrapper disappears from layout */
+}

package/src/css/main.css

@@ -48,4 +48,5 @@
 @import '_modifiers.css';
 @import '_dialogs.css';
 @import '_virtual-scroll.css';
+@import '_tree.css';
 @import '_dark-mode.css';