@keenmate/web-grid 1.0.5 → 1.2.0-rc01

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.0.5",
+	"version": "1.2.0-rc01",
 	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
 	"type": "module",
 	"main": "./dist/web-grid.umd.js",
@@ -36,7 +36,10 @@
 		"build:types": "tsc",
 		"preview": "vite preview",
 		"clean": "rimraf dist --glob \"*.tgz\"",
-		"clean:dist": "rimraf dist"
+		"clean:dist": "rimraf dist",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ui": "vitest --ui"
 	},
 	"keywords": [
 		"grid",
@@ -69,9 +72,12 @@
 	},
 	"homepage": "https://github.com/KeenMate/web-grid#readme",
 	"devDependencies": {
+		"@vitest/ui": "^2.1.0",
+		"happy-dom": "^15.0.0",
 		"rimraf": "^5.0.5",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.8"
+		"vite": "^5.0.8",
+		"vitest": "^2.1.0"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.4"

package/src/css/_navigation.css

@@ -19,8 +19,13 @@
     inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
 }
 
-/* Focused cell styling for editable navigate mode (.wg__cell--focused class) */
-.wg--editable .wg__cell.wg__cell--focused {
+/* Focused cell styling (.wg__cell--focused class).
+   Applies whenever focusedCell state is set, in any grid mode. Read-only grids
+   (default editTrigger, isEditable: false) still set focusedCell on click via
+   the cell-selection module; the indicator needs to be visible there too,
+   otherwise tree-shortcut Ctrl+Arrows look like they're losing focus after a
+   re-render destroys/rebuilds the tbody. */
+.wg__cell.wg__cell--focused {
   box-shadow:
     inset 0 0 0 var(--wg-focus-border-width) var(--wg-focus-border-color),
     inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);

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,71 @@
+/* ==============================================================================
+   TREE COLUMN
+   ==============================================================================
+   Indent + chevron rendered inside a cell when column.isTree is true.
+   Inline-flex wrapper: chevron (or leaf spacer) + cell-body sit on one row.
+   Per-level depth comes from `padding-inline-start: level * --wg-tree-indent`,
+   set inline by JS.
+*/
+
+:host {
+  --wg-tree-indent: 1.25rem;             /* per-level indent */
+  --wg-tree-chevron-size: 1rem;          /* chevron width/height (also used for leaf spacer) */
+  --wg-tree-chevron-color: var(--wg-text-color-2);
+  --wg-tree-chevron-gap: 4px;            /* gap between chevron and content */
+}
+
+.wg__tree-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wg-tree-chevron-gap);
+  /* `padding-inline-start: level * --wg-tree-indent` is set inline by JS */
+}
+
+.wg__tree-cell-body {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: inherit;
+  white-space: inherit;
+}
+
+.wg__tree-chevron {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wg-tree-chevron-size);
+  height: var(--wg-tree-chevron-size);
+  border-radius: 2px;
+  font-size: 0.85em;
+  line-height: 1;
+  color: var(--wg-tree-chevron-color);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.12s ease, background 0.1s ease;
+}
+
+.wg__tree-chevron:hover:not(.wg__tree-chevron--leaf) {
+  background: var(--wg-hover-bg);
+}
+
+.wg__tree-chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.wg__tree-leaf-spacer {
+  display: inline-block;
+  width: var(--wg-tree-chevron-size);
+  height: var(--wg-tree-chevron-size);
+  flex-shrink: 0;
+}
+
+/* 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,
+.wg__cell--editing .wg__tree-leaf-spacer {
+  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';