@dxos/lit-grid 0.8.4-main.c1de068 → 0.8.4-main.f5c0578

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.f5c0578",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,7 +39,7 @@
     "lit": "^3.2.0"
   },
   "devDependencies": {
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/test-utils": "0.8.4-main.c1de068"
+    "@dxos/random": "0.8.4-main.f5c0578",
+    "@dxos/test-utils": "0.8.4-main.f5c0578"
   }
 }

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

@@ -6,7 +6,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import { type CleanupFn, type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { html, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 

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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { html, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 export type DxGridSelectValue = {
@@ -31,6 +31,7 @@ export class DxGridMultiselectCell extends LitElement {
       aria-haspopup="dialog"
       class="dx-grid__cell__multiselect"
       data-dx-grid-accessory="invoke-multiselect"
+      data-dx-grid-action="accessory"
     >
       ${this.values.length > 0
         ? this.values.map(({ label }) => html`<span class="dx-grid__cell__multiselect__value">${label}</span>`)

package/src/dx-grid.pcss

@@ -235,6 +235,7 @@
       block-size: 0;
       border-inline-start: 0.5em solid transparent;
       border-block-start: 0.5em solid var(--dx-warningText);
+      z-index: 1;
     }
   }
 }

package/src/dx-grid.ts

@@ -3,23 +3,23 @@
 //
 
 import { LitElement, html, nothing } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
-import { ref, createRef, type Ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 
 import { defaultColSize, defaultRowSize } from './defs';
-// eslint-disable-next-line unused-imports/no-unused-imports
 import './dx-grid-axis-resize-handle';
 import {
-  type DxGridAxisMetaProps,
-  type DxGridAxisSizes,
-  type DxGridPlaneCellIndex,
-  type DxGridCellValue,
   DxAxisResize,
   type DxAxisResizeInternal,
   DxEditRequest,
+  type DxGridAnnotatedPanEvent,
+  type DxGridAxis,
   type DxGridAxisMeta,
+  type DxGridAxisMetaProps,
+  type DxGridAxisSizes,
+  type DxGridCellValue,
   type DxGridCells,
   DxGridCellsSelect,
   type DxGridFixedPlane,
@@ -29,36 +29,35 @@ import {
   type DxGridFrozenRowsPlane,
   type DxGridMode,
   type DxGridPlane,
+  type DxGridPlaneCellIndex,
   type DxGridPlaneCells,
   type DxGridPlaneRange,
   type DxGridPlaneRecord,
   type DxGridPointer,
   type DxGridPosition,
-  type DxGridAxis,
-  type DxGridSelectionProps,
-  type DxGridAnnotatedPanEvent,
   type DxGridRange,
+  type DxGridSelectionProps,
   separator,
 } from './types';
 import {
-  toCellIndex,
-  gap,
-  resizeTolerance,
-  sizeColMin,
-  sizeColMax,
-  sizeRowMin,
-  sizeRowMax,
-  shouldSelect,
-  selectionProps,
   cellSelected,
   closestAction,
   closestCell,
-  targetIsPlane,
-  resolveRowPlane,
+  gap,
+  isReadonly,
+  isSameCell,
+  resizeTolerance,
   resolveColPlane,
   resolveFrozenPlane,
-  isSameCell,
-  isReadonly,
+  resolveRowPlane,
+  selectionProps,
+  shouldSelect,
+  sizeColMax,
+  sizeColMin,
+  sizeRowMax,
+  sizeRowMin,
+  targetIsPlane,
+  toCellIndex,
 } from './util';
 
 @customElement('dx-grid')
@@ -481,6 +480,13 @@ export class DxGrid extends LitElement {
             event.preventDefault();
             this.dispatchEditRequest();
             break;
+          case 'Backspace':
+          case 'Delete':
+            if (!event.defaultPrevented) {
+              event.preventDefault();
+              this.dispatchEditRequest('');
+            }
+            break;
           default:
             if (event.key.length === 1 && event.key.match(/\P{Cc}/u) && !(event.metaKey || event.ctrlKey)) {
               this.dispatchEditRequest(event.key);
@@ -1608,6 +1614,7 @@ export {
   parseCellIndex,
   toPlaneCellIndex,
   cellQuery,
+  accessoryHandlesPointerdownAttrs,
 } from './util';
 
 export const commentedClassName = 'dx-grid__cell--commented';

package/src/playwright/dx-grid.spec.ts

@@ -2,7 +2,7 @@
 // Copyright 2021 DXOS.org
 //
 
-import { expect, test, type Page } from '@playwright/test';
+import { type Page, expect, test } from '@playwright/test';
 
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 

package/src/testing/dx-grid-manager.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { expect, type Locator, type Page } from '@playwright/test';
+import { type Locator, type Page, expect } from '@playwright/test';
 
 import type { DxGridPlanePosition } from '../types';
 

package/src/util.ts

@@ -4,19 +4,19 @@
 
 import { defaultRowSize } from './defs';
 import {
-  type DxGridPlaneCellIndex,
+  type DxGridAxis,
   type DxGridCellIndex,
-  type DxGridPosition,
-  type DxGridPointer,
-  type DxGridSelectionProps,
-  type DxGridPositionNullable,
-  type DxGridPlane,
-  type DxGridFrozenRowsPlane,
   type DxGridFrozenColsPlane,
   type DxGridFrozenPlane,
-  type DxGridAxis,
+  type DxGridFrozenRowsPlane,
+  type DxGridPlane,
+  type DxGridPlaneCellIndex,
   type DxGridPlanePosition,
+  type DxGridPointer,
+  type DxGridPosition,
+  type DxGridPositionNullable,
   type DxGridReadonlyValue,
+  type DxGridSelectionProps,
   separator,
 } from './types';
 
@@ -25,7 +25,7 @@ export const toPlaneCellIndex = (cellCoords: Partial<DxGridPosition> & DxGridPla
 
 export function parseCellIndex(index: DxGridCellIndex): DxGridPosition;
 export function parseCellIndex(index: DxGridPlaneCellIndex): DxGridPlanePosition;
-// eslint-disable-next-line prefer-arrow-functions/prefer-arrow-functions
+
 export function parseCellIndex(index: DxGridPlaneCellIndex | DxGridCellIndex): DxGridPlanePosition | DxGridPosition {
   const coords = index.split(separator);
   if (coords.length === 3) {
@@ -123,6 +123,10 @@ export const closestAction = (target: EventTarget | null): { action: string | nu
   return { actionEl, action: actionEl?.getAttribute('data-dx-grid-action') ?? null };
 };
 
+export const accessoryHandlesPointerdownAttrs = {
+  'data-dx-grid-action': 'accessory',
+};
+
 export const closestCell = (target: EventTarget | null, actionEl?: HTMLElement | null): DxGridPositionNullable => {
   let cellElement = actionEl;
   if (!cellElement) {