@dxos/lit-grid 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "lit": "^3.2.0"
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@dxos/random": "0.8.4-main.e098934",
-    "@dxos/test-utils": "0.8.4-main.e098934"
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/test-utils": "0.8.4-main.e8ec1fe"
   }
 }

package/src/dx-grid.pcss

@@ -4,10 +4,10 @@
 @layer dx-tokens {
   :root {
     --dx-grid-cell-padding-block: 0.2rem;
-    --dx-grid-cell-content-padding-block: calc(var(--dx-grid-cell-padding-block) - 1px);
+    --dx-grid-cell-content-padding-block: calc(var(--dx-grid-cell-padding-block) - var(--dx-gridFocusIndicatorWidth));
     --dx-grid-cell-editor-padding-block: var(--dx-grid-cell-content-padding-block);
     --dx-grid-cell-padding-inline: 0.25rem;
-    --dx-grid-cell-content-padding-inline: calc(var(--dx-grid-cell-padding-inline) - 1px);
+    --dx-grid-cell-content-padding-inline: calc(var(--dx-grid-cell-padding-inline) - var(--dx-gridFocusIndicatorWidth));
     --dx-grid-cell-editor-padding-inline: var(--dx-grid-cell-content-padding-inline);
   }
 }
@@ -54,7 +54,7 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      border: 1px solid var(--dx-accentSurface);
+      border: var(--dx-gridFocusIndicatorWidth) solid var(--dx-gridFocusIndicatorColor);
     }
   }
 
@@ -98,7 +98,7 @@
         white-space: nowrap;
         block-size: 100%;
         position: relative;
-        border: 1px solid transparent;
+        border: var(--dx-gridFocusIndicatorWidth) solid transparent;
         border-radius: 2px;
 
         &:has(.dx-tag), &:has(dx-tag-picker-item) {
@@ -175,13 +175,13 @@
           }
 
           &:not([aria-readonly='true']) > .dx-grid__cell__content {
-            border-color: var(--dx-accentSurface);
+            border-color: var(--dx-gridFocusIndicatorColor);
           }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--dx-accentSurface);
+        border-color: var(--dx-gridFocusIndicatorColor);
       }
     }
   }
@@ -193,7 +193,7 @@
     overflow-wrap: break-word;
 
     background: var(--dx-grid-base, var(--dx-baseSurface));
-    border: 1px solid var(--dx-accentSurface);
+    border: var(--dx-gridFocusIndicatorWidth) solid var(--dx-gridFocusIndicatorColor);
     border-radius: 2px;
 
     --dx-grid-cell-editor-max-block-size: min(12em, 50vh);
@@ -218,7 +218,7 @@
     [role='columnheader'],
     [role='rowheader'] {
       &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
-        border-color: var(--dx-accentSurface);
+        border-color: var(--dx-gridFocusIndicatorColor);
       }
     }
   }

package/src/dx-grid.ts

@@ -23,11 +23,13 @@ import {
   type DxGridCells,
   DxGridCellsSelect,
   type DxGridFixedPlane,
+  type DxGridFocusIndicatorVariant,
   type DxGridFrozenAxes,
   type DxGridFrozenColsPlane,
   type DxGridFrozenPlane,
   type DxGridFrozenRowsPlane,
   type DxGridMode,
+  type DxGridOverscroll,
   type DxGridPlane,
   type DxGridPlaneCellIndex,
   type DxGridPlaneCells,
@@ -64,12 +66,12 @@ import {
 export class DxGrid extends LitElement {
   constructor() {
     super();
-    // Wheel, top-level and element-level
+    // Wheel, top-level and element-level.
     document.defaultView?.addEventListener('wheel', this.handleTopLevelWheel, { passive: false });
     this.addEventListener('wheel', this.handleWheel);
-    // Custom event(s)
+    // Custom event(s).
     this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal as EventListener);
-    // Standard events
+    // Standard events.
     this.addEventListener('pointerdown', this.handlePointerDown);
     this.addEventListener('pointermove', this.handlePointerMove);
     this.addEventListener('pointerup', this.handlePointerUp);
@@ -114,11 +116,14 @@ export class DxGrid extends LitElement {
   frozen: DxGridFrozenAxes = {};
 
   @property({ type: String })
-  overscroll: 'inline' | 'block' | 'trap' | undefined = undefined;
+  overscroll: DxGridOverscroll = undefined;
 
   @property({ type: String })
   activeRefs = '';
 
+  @property({ type: String })
+  focusIndicatorVariant: DxGridFocusIndicatorVariant = 'sheet';
+
   /**
    * When this function is defined, it is used first to try to get a value for a cell,
    * and otherwise will fall back to `cells`.
@@ -194,6 +199,7 @@ export class DxGrid extends LitElement {
   //
   // `template` is the rendered value of `grid-{axis}-template`.
   //
+
   @state()
   private templateGridColumns = '0';
 
@@ -317,7 +323,7 @@ export class DxGrid extends LitElement {
             this.dispatchSelectionChange();
           }
           if (this.mode === 'edit-select') {
-            // Prevent focus moving when editing while selection is possible
+            // Prevent focus moving when editing while selection is possible.
             event.preventDefault();
           } else if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
             this.dispatchEditRequest();
@@ -425,15 +431,13 @@ export class DxGrid extends LitElement {
   }
 
   private moveFocusIntoPlane(plane: DxGridPlane): void {
-    if (this.focusedCell.plane !== plane) {
-      const colPlane = resolveColPlane(plane);
-      const rowPlane = resolveRowPlane(plane);
-      this.focusedCell = {
-        plane,
-        col: colPlane === 'grid' ? this.visColMin : 0,
-        row: rowPlane === 'grid' ? this.visRowMin : 0,
-      };
-    }
+    const colPlane = resolveColPlane(plane);
+    const rowPlane = resolveRowPlane(plane);
+    this.focusedCell = {
+      plane,
+      col: colPlane === 'grid' ? this.visColMin : 0,
+      row: rowPlane === 'grid' ? this.visRowMin : 0,
+    };
     this.focusedCellElement()?.focus({ preventScroll: true });
   }
 
@@ -590,7 +594,7 @@ export class DxGrid extends LitElement {
   }
 
   //
-  // Resize & reposition handlers, observer, ref
+  // Resize & reposition handlers, observer, ref.
   //
 
   @state()
@@ -690,7 +694,7 @@ export class DxGrid extends LitElement {
   };
 
   private updateVisInline(): void {
-    // todo: avoid starting from zero
+    // todo: avoid starting from zero.
     let axisCursor = 0;
     let pxCursor = this.colSize(axisCursor, 'grid');
 
@@ -748,7 +752,7 @@ export class DxGrid extends LitElement {
   }
 
   private updateVisBlock(): void {
-    // todo: avoid starting from zero
+    // todo: avoid starting from zero.
     let axisCursor = 0;
     let pxCursor = this.rowSize(axisCursor, 'grid');
 
@@ -1024,7 +1028,7 @@ export class DxGrid extends LitElement {
   }
 
   /**
-   * Updates `pos` so that a cell in focus is fully within the viewport
+   * Updates `pos` so that a cell in focus is fully within the viewport.
    */
   snapPosToFocusedCell(): void {
     const outOfVis = this.focusedCellOutOfVis();
@@ -1152,7 +1156,7 @@ export class DxGrid extends LitElement {
   }
 
   //
-  // Render and other lifecycle methods
+  // Render and other lifecycle methods.
   //
 
   // TODO(thure): This is for rendering presentational objects superimposed onto the canonical grid (e.g. DnD drop line for #8108).
@@ -1443,6 +1447,7 @@ export class DxGrid extends LitElement {
       data-dx-grid-action="cell"
       aria-colindex=${col}
       aria-rowindex=${row}
+      data-testid=${`${plane}.${col}.${row}`}
       style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
     >
       <div role="none" class="dx-grid__cell__content">${cell?.value}${accessory}</div>
@@ -1507,6 +1512,7 @@ export class DxGrid extends LitElement {
         })}
         data-grid=${this.gridId}
         data-grid-mode=${this.mode}
+        data-grid-focus-indicator-variant=${this.focusIndicatorVariant}
         ?data-grid-select=${selection.visible}
         ${ref(this.gridRef)}
       >

package/src/types.ts

@@ -128,6 +128,10 @@ export type DxGridSelectionProps = {
   visible?: boolean;
 };
 
+export type DxGridFocusIndicatorVariant = 'sheet' | 'stack';
+
+export type DxGridOverscroll = 'inline' | 'block' | 'trap' | undefined;
+
 export class DxAxisResize extends Event {
   public readonly axis: DxGridAxis;
   public readonly plane: 'grid' | DxGridFrozenPlane;