@dxos/lit-grid 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,8 +39,8 @@
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@dxos/random": "0.14.0",
-    "@dxos/test-utils": "0.14.0"
+    "@dxos/random": "0.15.0",
+    "@dxos/test-utils": "0.15.0"
   },
   "publishConfig": {
     "access": "public"

package/src/dx-grid.pcss

@@ -61,7 +61,7 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      border: var(--dx-grid-focus-indicator-width) solid var(--color-focus-ring);
+      border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-ring);
     }
   }
 
@@ -158,9 +158,47 @@
       [role='columnheader'],
       [role='rowheader'] {
         &[aria-selected] {
-          --grid-cell-surface: var(--color-grid-selection-surface);
+          /* The selection tint is translucent, so it is layered over the grid surface rather than the host behind it. */
+          --grid-cell-surface:
+            linear-gradient(var(--color-grid-selection-surface), var(--color-grid-selection-surface)),
+            var(--color-grid-surface);
           --grid-cell-fg: var(--color-grid-selection-fg);
 
+          /*
+           * Outline the selected range: each edge cell draws its outer sides. Like the focus ring it reaches
+           * back over the neighbours' right/bottom lines, so the outline sits on grid lines on all four sides.
+           */
+          &[data-selection-edge]::before {
+            content: '';
+            position: absolute;
+            inset-inline-start: calc(-1 * var(--dx-grid-focus-indicator-width));
+            inset-block-start: calc(-1 * var(--dx-grid-focus-indicator-width));
+            inset-inline-end: 0;
+            inset-block-end: 0;
+            z-index: 1;
+            pointer-events: none;
+            border: 0 solid var(--color-grid-focus-ring);
+          }
+          &[data-selection-edge~='top']::before {
+            border-block-start-width: var(--dx-grid-focus-indicator-width);
+          }
+          &[data-selection-edge~='bottom']::before {
+            border-block-end-width: var(--dx-grid-focus-indicator-width);
+          }
+          &[data-selection-edge~='start']::before {
+            border-inline-start-width: var(--dx-grid-focus-indicator-width);
+          }
+          &[data-selection-edge~='end']::before {
+            border-inline-end-width: var(--dx-grid-focus-indicator-width);
+          }
+          /* The plane clips at its first column and row, where there is no neighbour line to reach over. */
+          &[aria-colindex='0']::before {
+            inset-inline-start: 0;
+          }
+          &[aria-rowindex='0']::before {
+            inset-block-start: 0;
+          }
+
           &:focus:not([aria-readonly='true']),
           &:focus-visible,
           &:focus-within {
@@ -203,10 +241,23 @@
              * border) exceeds the cell track size by even a fraction of a
              * pixel, pushing the focus ring's bottom edge below the grid line.
              */
-            min-inline-size: 100%;
+            min-inline-size: calc(100% + var(--dx-grid-focus-indicator-width));
             inline-size: min-content;
             max-inline-size: min(60ch, 90vw);
 
+            /*
+             * A cell draws only its right/bottom lines; its left/top lines belong to its neighbours.
+             * Reaching back over them puts all four ring edges on grid lines; the extra start padding
+             * keeps the text where it sits unfocused.
+             */
+            inset-inline-start: calc(-1 * var(--dx-grid-focus-indicator-width));
+            inset-block-start: calc(-1 * var(--dx-grid-focus-indicator-width));
+            block-size: calc(100% + var(--dx-grid-focus-indicator-width));
+            padding-inline-start: calc(
+              var(--dx-grid-cell-content-padding-inline) + var(--dx-grid-focus-indicator-width)
+            );
+            padding-block-start: calc(var(--dx-grid-cell-content-padding-block) + var(--dx-grid-focus-indicator-width));
+
             overflow: auto;
             scrollbar-width: thin;
             overscroll-behavior: contain;
@@ -217,14 +268,27 @@
             color: var(--grid-cell-fg);
           }
 
+          /* The plane clips at its first column and row, where there is no neighbour line to reach over. */
+          &[aria-colindex='0'] > .dx-grid__cell__content {
+            inset-inline-start: 0;
+            min-inline-size: 100%;
+            padding-inline-start: var(--dx-grid-cell-content-padding-inline);
+          }
+
+          &[aria-rowindex='0'] > .dx-grid__cell__content {
+            inset-block-start: 0;
+            block-size: 100%;
+            padding-block-start: var(--dx-grid-cell-content-padding-block);
+          }
+
           &:not([aria-readonly='true']) > .dx-grid__cell__content {
-            border-color: var(--color-focus-ring);
+            border-color: var(--color-grid-focus-ring);
           }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--color-focus-ring);
+        border-color: var(--color-grid-focus-ring);
       }
     }
   }
@@ -236,8 +300,11 @@
     overflow-wrap: break-word;
 
     background: var(--dx-grid-base, var(--color-base-surface));
-    border: var(--dx-grid-focus-indicator-width) solid var(--color-focus-ring);
+    border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-ring);
     border-radius: 2px;
+    /* Matches the focused cell: the box reaches over the neighbours' lines, the text stays put. */
+    padding-inline-start: var(--dx-grid-focus-indicator-width);
+    padding-block-start: var(--dx-grid-focus-indicator-width);
 
     --dx-grid-cell-editor-max-block-size: min(12em, 50vh);
     --dx-grid-cell-editor-max-inline-size: min(60ch, 90vw);
@@ -262,7 +329,7 @@
     [role='columnheader'],
     [role='rowheader'] {
       &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
-        border-color: var(--color-focus-ring);
+        border-color: var(--color-grid-focus-ring);
       }
     }
   }

package/src/dx-grid.ts

@@ -44,6 +44,7 @@ import {
 } from './types.ts';
 import {
   cellSelected,
+  cellSelectionEdges,
   closestAction,
   closestCell,
   gap,
@@ -1225,7 +1226,7 @@ export class DxGrid extends LitElement {
         >
           ${[...Array(rows)].map((_, r) => {
             return [...Array(cols)].map((_, c) => {
-              return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection));
+              return this.renderCell(c, r, plane, selection);
             });
           })}
         </div>`
@@ -1259,7 +1260,7 @@ export class DxGrid extends LitElement {
             ${[...Array(rows)].map((_, r) => {
               return [...Array(visibleCols)].map((_, c0) => {
                 const c = this.visColMin + c0;
-                return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c0, r);
+                return this.renderCell(c, r, plane, selection, c0, r);
               });
             })}
           </div>
@@ -1294,7 +1295,7 @@ export class DxGrid extends LitElement {
             ${[...Array(visibleRows)].map((_, r0) => {
               return [...Array(cols)].map((_, c) => {
                 const r = this.visRowMin + r0;
-                return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c, r0);
+                return this.renderCell(c, r, plane, selection, c, r0);
               });
             })}
           </div>
@@ -1329,7 +1330,7 @@ export class DxGrid extends LitElement {
               return [...Array(visibleCols)].map((_, c0) => {
                 const c = c0 + this.visColMin;
                 const r = r0 + this.visRowMin;
-                return this.renderCell(c, r, 'grid', cellSelected(c, r, 'grid', selection), c0, r0);
+                return this.renderCell(c, r, 'grid', selection, c0, r0);
               });
             })}
           </div>
@@ -1429,7 +1430,16 @@ export class DxGrid extends LitElement {
     return { deltaX, deltaY };
   }
 
-  private renderCell(col: number, row: number, plane: DxGridPlane, selected?: boolean, visCol = col, visRow = row) {
+  private renderCell(
+    col: number,
+    row: number,
+    plane: DxGridPlane,
+    selection?: DxGridSelectionProps,
+    visCol = col,
+    visRow = row,
+  ) {
+    const selected = selection ? cellSelected(col, row, plane, selection) : false;
+    const selectionEdge = selection ? cellSelectionEdges(col, row, plane, selection) : undefined;
     const cell = this.cell(col, row, plane);
     const active = this.cellActive(col, row, plane);
     const readonly = this.cellReadonly(col, row, plane);
@@ -1442,6 +1452,7 @@ export class DxGrid extends LitElement {
       role="gridcell"
       tabindex="0"
       aria-selected=${selected ? 'true' : nothing}
+      data-selection-edge=${selectionEdge ?? nothing}
       aria-readonly=${readonly ? 'true' : nothing}
       class=${cell?.className ?? nothing}
       data-refs=${cell?.dataRefs ?? nothing}

package/src/util.ts

@@ -120,6 +120,29 @@ export const cellSelected = (
   );
 };
 
+/**
+ * The sides of a multi-cell selection that `col`/`row` sits on (`top`, `bottom`, `start`, `end`), space-separated
+ * for an attribute's `~=` selector; undefined for cells inside it, outside it, or a single-cell selection.
+ */
+export const cellSelectionEdges = (
+  col: number,
+  row: number,
+  plane: DxGridPlane,
+  selection: DxGridSelectionProps,
+): string | undefined => {
+  if (!selection.visible || !cellSelected(col, row, plane, selection)) {
+    return undefined;
+  }
+
+  const edges = [
+    row === selection.rowMin && 'top',
+    row === selection.rowMax && 'bottom',
+    col === selection.colMin && 'start',
+    col === selection.colMax && 'end',
+  ].filter((edge) => edge !== false);
+  return edges.length > 0 ? edges.join(' ') : undefined;
+};
+
 export const closestAction = (target: EventTarget | null): { action: string | null; actionEl: HTMLElement | null } => {
   const actionEl: HTMLElement | null = (target as HTMLElement | null)?.closest('[data-dx-grid-action]') ?? null;
   return { actionEl, action: actionEl?.getAttribute('data-dx-grid-action') ?? null };