@dxos/lit-grid 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.dfabb4ec29",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": [
+    "*.css",
+    "*.pcss"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -23,23 +30,16 @@
   },
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "dist/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "src",
     "dist"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "lit": "^3.2.0"
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/test-utils": "0.8.4-main.dedc0f3"
+    "@dxos/random": "0.8.4-main.dfabb4ec29",
+    "@dxos/test-utils": "0.8.4-main.dfabb4ec29"
   }
 }

package/src/dx-grid-axis-resize-handle.pcss

@@ -7,24 +7,24 @@ dx-grid-axis-resize-handle {
   background: transparent;
   z-index: 2;
   &:hover {
-    background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
+    background: var(--color-hover-surface);
   }
   &[data-dx-grid-axis='col'] {
     inset-block: 0;
     inset-inline-end: 0;
-    inline-size: .5rem;
+    inline-size: 0.5rem;
     cursor: col-resize;
   }
   &[data-dx-grid-axis='row'] {
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: .5rem;
+    block-size: 0.5rem;
     cursor: row-resize;
   }
   &:focus {
     outline: none;
   }
   &:focus-visible {
-    background: var(--dx-grid-resizeHandleFocus, var(--dx-accentSurface));
+    background: var(--color-accent-surface);
   }
 }

package/src/dx-grid-multiselect-cell.pcss

@@ -1,8 +1,10 @@
+@reference "../../ui-theme/src/main.css";
+
 dx-grid-multiselect-cell {
   display: contents;
 }
 
-.dx-grid__cell__multiselect{
+.dx-grid__cell__multiselect {
   display: flex;
   flex-flow: row nowrap;
   gap: 2px;
@@ -14,19 +16,19 @@ dx-grid-multiselect-cell {
     white-space: nowrap;
     text-overflow: ellipsis;
     &.dx-grid__cell__multiselect__value {
-      @apply bs-full border border-separator text-xs font-semibold pli-2 plb-0.5 rounded cursor-default text-neutral-800 dark:text-neutral-150
+      @apply h-full border border-separator text-xs font-semibold px-2 py-0.5 rounded cursor-default text-neutral-800 dark:text-neutral-200;
     }
     &.dx-grid__cell__multiselect__placeholder {
       @apply text-description;
     }
   }
-  & > .dx-grid__cell__multiselect__separator{
+  & > .dx-grid__cell__multiselect__separator {
     flex: 1 0 0;
   }
   & > svg {
     flex: 0 0 auto;
-    margin-block: .25em;
+    margin-block: 0.25em;
     inline-size: 1em;
     block-size: 1em;
   }
-}
+}

package/src/dx-grid.lit-stories.ts

@@ -3,15 +3,13 @@
 //
 
 import '@dxos-theme';
-
 import './dx-grid.ts';
 import './dx-grid.pcss';
-
 import './dx-grid-multiselect-cell.ts';
 
 import { html, nothing } from 'lit';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { defaultRowSize } from './defs.js';
 import { type DxGridFrozenPlane, type DxGridPlaneCells, type DxGridProps } from './types';
@@ -39,7 +37,7 @@ const initialLabels = {
     '0,0': { value: '', resizeHandle: 'col' },
   },
   frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
-    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end pie-1', resizeHandle: 'row' };
+    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end pe-1', resizeHandle: 'row' };
     return acc;
   }, {}),
   frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
@@ -53,7 +51,7 @@ Basic.args = {
     grid: {
       '1,1': {
         // end: '8,1',
-        value: faker.lorem.paragraphs(5),
+        value: random.lorem.paragraphs(5),
       },
       '2,2': {
         value: '',

package/src/dx-grid.pcss

@@ -4,10 +4,14 @@
 @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-grid-focus-indicator-width)
+    );
     --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-grid-focus-indicator-width)
+    );
     --dx-grid-cell-editor-padding-inline: var(--dx-grid-cell-content-padding-inline);
   }
 }
@@ -33,8 +37,6 @@
 
     touch-action: none;
     user-select: none;
-
-    background: var(--dx-grid-lines, var(--dx-gridLine));
   }
 
   .dx-grid__plane--frozen-row,
@@ -54,7 +56,7 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      border: 1px solid var(--dx-accentSurface);
+      border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-indicator);
     }
   }
 
@@ -67,15 +69,18 @@
   }
 
   .dx-grid {
-    --dx-grid-cell-surface: var(--dx-grid-base, var(--dx-baseSurface));
+    --grid-cell-surface: var(--color-grid-surface);
 
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      background: var(--dx-grid-cell-surface);
+      background: var(--grid-cell-surface);
       cursor: pointer;
       position: relative;
 
+      border-right: 1px solid var(--color-grid-line);
+      border-bottom: 1px solid var(--color-grid-line);
+
       &[aria-readonly='true'] {
         cursor: default;
       }
@@ -98,10 +103,11 @@
         white-space: nowrap;
         block-size: 100%;
         position: relative;
-        border: 1px solid transparent;
+        border: var(--dx-grid-focus-indicator-width) solid transparent;
         border-radius: 2px;
 
-        &:has(.dx-tag), &:has(dx-tag-picker-item) {
+        &:has(.dx-tag),
+        &:has(dx-tag-picker-item) {
           text-overflow: clip;
           line-height: 0;
           --dx-grid-cell-content-padding-inline: 1px;
@@ -110,7 +116,7 @@
       }
 
       &.dx-grid__cell--commented {
-        background: var(--dx-grid-commented, var(--dx-gridCommented));
+        background: var(--color-grid-comment);
       }
     }
 
@@ -119,10 +125,11 @@
       [role='columnheader'],
       [role='rowheader'] {
         &[aria-selected] {
-          --dx-grid-cell-surface: var(--dx-gridSelectionOverlay);
+          --grid-cell-surface: var(--color-grid-selection-overlay);
 
           &:focus:not([aria-readonly='true']),
-          &:focus-visible, &:focus-within {
+          &:focus-visible,
+          &:focus-within {
             & > .dx-grid__cell__content {
               background: transparent;
             }
@@ -140,7 +147,7 @@
     }
 
     &:has(.dx-grid__row--cta__cell:hover) .dx-grid__row--cta__cell {
-      background: var(--dx-hoverOverlay);
+      background: var(--color-grid-hover-overlay);
     }
   }
 
@@ -149,7 +156,7 @@
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      &:not([data-focus-unfurl="false"]):not(.dx-grid__cell--no-focus-unfurl) {
+      &:not([data-focus-unfurl='false']):not(.dx-grid__cell--no-focus-unfurl) {
         &:focus,
         &:focus-within {
           & > .dx-grid__cell__content {
@@ -171,17 +178,17 @@
 
             z-index: 1;
 
-            background: var(--dx-grid-cell-surface);
+            background: var(--grid-cell-surface);
           }
 
           &:not([aria-readonly='true']) > .dx-grid__cell__content {
-            border-color: var(--dx-accentSurface);
+            border-color: var(--color-grid-focus-indicator);
           }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--dx-accentSurface);
+        border-color: var(--color-grid-focus-indicator);
       }
     }
   }
@@ -192,8 +199,8 @@
     hyphens: auto;
     overflow-wrap: break-word;
 
-    background: var(--dx-grid-base, var(--dx-baseSurface));
-    border: 1px solid var(--dx-accentSurface);
+    background: var(--dx-grid-base, var(--color-base-surface));
+    border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-indicator);
     border-radius: 2px;
 
     --dx-grid-cell-editor-max-block-size: min(12em, 50vh);
@@ -204,7 +211,8 @@
     inline-size: min-content;
     max-inline-size: var(--dx-grid-cell-editor-max-inline-size);
 
-    &:has(.dx-tag), &:has(dx-tag-picker-item) {
+    &:has(.dx-tag),
+    &:has(dx-tag-picker-item) {
       text-overflow: clip;
       line-height: 0;
       --dx-grid-cell-editor-padding-inline: 1px;
@@ -218,7 +226,7 @@
     [role='columnheader'],
     [role='rowheader'] {
       &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
-        border-color: var(--dx-accentSurface);
+        border-color: var(--color-grid-focus-indicator);
       }
     }
   }
@@ -246,7 +254,7 @@
       inline-size: 0;
       block-size: 0;
       border-inline-start: 0.5em solid transparent;
-      border-block-start: 0.5em solid var(--dx-warningText);
+      border-block-start: 0.5em solid var(--color-warning-text);
       z-index: 1;
     }
   }

package/src/dx-grid.ts

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import './dx-grid-axis-resize-handle';
+
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.js';
@@ -9,7 +11,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 
 import { defaultColSize, defaultRowSize, focusUnfurlDefault } from './defs';
-import './dx-grid-axis-resize-handle';
 import {
   DxAxisResize,
   type DxAxisResizeInternal,
@@ -23,11 +24,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 +67,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 +117,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 +200,7 @@ export class DxGrid extends LitElement {
   //
   // `template` is the rendered value of `grid-{axis}-template`.
   //
+
   @state()
   private templateGridColumns = '0';
 
@@ -317,7 +324,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 +432,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 +595,7 @@ export class DxGrid extends LitElement {
   }
 
   //
-  // Resize & reposition handlers, observer, ref
+  // Resize & reposition handlers, observer, ref.
   //
 
   @state()
@@ -690,7 +695,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 +753,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 +1029,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 +1157,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 +1448,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>
@@ -1471,9 +1477,7 @@ export class DxGrid extends LitElement {
           .split(' ')
           .filter((value) => value)
           .map(
-            // TODO(burdon): Consistent camelCase?
-            (activeRef) =>
-              `[data-refs~="${activeRef}"] { background: var(--dx-grid-commented-active, var(--dx-gridCommentedActive)) !important; }`,
+            (activeRef) => `[data-refs~="${activeRef}"] { background: var(--color-grid-comment-active) !important; }`,
           )
           .join('\n')}
       </style>
@@ -1507,6 +1511,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/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run lit-storybook:serve-e2e -- --port=9002',
+    command: 'pnpm storybook dev --ci --quiet --port=9002 --config-dir=.storybook',
     port: 9002,
     reuseExistingServer: false,
   },

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;