@dxos/lit-grid 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "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.84f28bd",
-    "@dxos/test-utils": "0.8.4-main.84f28bd"
+    "@dxos/random": "0.8.4-main.a4bbb77",
+    "@dxos/test-utils": "0.8.4-main.a4bbb77"
   }
 }

package/src/defs.ts

@@ -4,3 +4,4 @@
 
 export const defaultColSize = 180;
 export const defaultRowSize = 30;
+export const focusUnfurlDefault = true;

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

@@ -21,4 +21,10 @@ dx-grid-axis-resize-handle {
     block-size: .5rem;
     cursor: row-resize;
   }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    background: var(--dx-grid-resizeHandleFocus, var(--dx-accentSurface));
+  }
 }

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

@@ -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) {
@@ -130,6 +130,18 @@
         }
       }
     }
+
+    .dx-grid__row--cta__cell {
+      transition: background-color 100ms linear;
+      & > .dx-grid__cell__content {
+        cursor: pointer;
+        background: transparent !important;
+      }
+    }
+
+    &:has(.dx-grid__row--cta__cell:hover) .dx-grid__row--cta__cell {
+      background: var(--dx-hoverOverlay);
+    }
   }
 
   /* Editor and focused cell styles; be sure to keep these two blocks in-sync. */
@@ -137,36 +149,39 @@
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      &:focus,
-      &:focus-within {
-        & > .dx-grid__cell__content {
-          min-block-size: 100%;
-          block-size: min-content;
-          max-block-size: min(12em, 50vh);
-
-          min-inline-size: 100%;
-          inline-size: min-content;
-          max-inline-size: min(60ch, 90vw);
-
-          overflow: auto;
-          scrollbar-width: thin;
-          overscroll-behavior: contain;
-
-          white-space: normal;
-          hyphens: auto;
-          overflow-wrap: break-word;
-
-          z-index: 1;
-        }
+      &:not([data-focus-unfurl="false"]):not(.dx-grid__cell--no-focus-unfurl) {
+        &:focus,
+        &:focus-within {
+          & > .dx-grid__cell__content {
+            min-block-size: 100%;
+            block-size: min-content;
+            max-block-size: min(12em, 50vh);
 
-        &:not([aria-readonly='true']) > .dx-grid__cell__content {
-          background: var(--dx-grid-cell-surface);
-          border-color: var(--dx-accentSurface);
+            min-inline-size: 100%;
+            inline-size: min-content;
+            max-inline-size: min(60ch, 90vw);
+
+            overflow: auto;
+            scrollbar-width: thin;
+            overscroll-behavior: contain;
+
+            white-space: normal;
+            hyphens: auto;
+            overflow-wrap: break-word;
+
+            z-index: 1;
+
+            background: var(--dx-grid-cell-surface);
+          }
+
+          &:not([aria-readonly='true']) > .dx-grid__cell__content {
+            border-color: var(--dx-gridFocusIndicatorColor);
+          }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--dx-accentSurface);
+        border-color: var(--dx-gridFocusIndicatorColor);
       }
     }
   }
@@ -178,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);
@@ -203,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);
       }
     }
   }
@@ -232,6 +247,7 @@
       block-size: 0;
       border-inline-start: 0.5em solid transparent;
       border-block-start: 0.5em solid var(--dx-warningText);
+      z-index: 1;
     }
   }
 }