@dxos/lit-grid 0.8.3 → 0.8.4-main.16b68245aa

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

@@ -1,32 +1,34 @@
+@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;
   inline-size: 100%;
-  block-size: 100%;
+  block-size: 24px;
   & > span {
     flex: 0 1 auto;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     &.dx-grid__cell__multiselect__value {
-      @apply border border-separator text-xs font-semibold pli-2 plb-1 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-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.lit-stories.ts

@@ -2,13 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
+import '@dxos-theme';
 import './dx-grid.ts';
 import './dx-grid.pcss';
-
 import './dx-grid-multiselect-cell.ts';
 
 import { html, nothing } from 'lit';
 
+import { random } from '@dxos/random';
+
 import { defaultRowSize } from './defs.js';
 import { type DxGridFrozenPlane, type DxGridPlaneCells, type DxGridProps } from './types';
 import { colToA1Notation, rowToA1Notation } from './util';
@@ -35,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) => {
@@ -49,7 +51,7 @@ Basic.args = {
     grid: {
       '1,1': {
         // end: '8,1',
-        value: 'Waffle production',
+        value: random.lorem.paragraphs(5),
       },
       '2,2': {
         value: '',
@@ -81,7 +83,7 @@ Basic.args = {
   columns: JSON.stringify({
     grid: {
       0: { size: 64 },
-      1: { size: 512 },
+      1: { size: 128 },
       2: { size: 64 },
       3: { size: 512 },
       4: { size: 64 },

package/src/dx-grid.pcss

@@ -4,7 +4,15 @@
 @layer dx-tokens {
   :root {
     --dx-grid-cell-padding-block: 0.2rem;
+    --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) - var(--dx-grid-focus-indicator-width)
+    );
+    --dx-grid-cell-editor-padding-inline: var(--dx-grid-cell-content-padding-inline);
   }
 }
 
@@ -29,8 +37,6 @@
 
     touch-action: none;
     user-select: none;
-
-    background: var(--dx-grid-lines, var(--dx-gridLine));
   }
 
   .dx-grid__plane--frozen-row,
@@ -50,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);
     }
   }
 
@@ -63,19 +69,17 @@
   }
 
   .dx-grid {
+    --grid-cell-surface: var(--color-grid-surface);
+
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      position: relative;
-      background: var(--dx-grid-base, var(--dx-baseSurface));
-      /** This must match CellEditor styling in `CellEditor.tsx`. */
-      padding: var(--dx-grid-cell-padding-block) var(--dx-grid-cell-padding-inline);
-      box-sizing: border-box;
-      border: 1px solid transparent;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      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;
@@ -86,15 +90,33 @@
         user-select: text;
       }
 
-      &:focus:not([aria-readonly='true']),
-      &:focus-visible {
-        z-index: 2;
-        border-color: var(--dx-accentSurface);
+      &:focus {
         outline: none;
       }
 
+      & > .dx-grid__cell__content {
+        padding-inline: var(--dx-grid-cell-content-padding-inline);
+        padding-block: var(--dx-grid-cell-content-padding-block);
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        block-size: 100%;
+        position: relative;
+        border: var(--dx-grid-focus-indicator-width) solid transparent;
+        border-radius: 2px;
+
+        &:has(.dx-tag),
+        &:has(dx-tag-picker-item) {
+          text-overflow: clip;
+          line-height: 0;
+          --dx-grid-cell-content-padding-inline: 1px;
+          --dx-grid-cell-content-padding-block: 1px;
+        }
+      }
+
       &.dx-grid__cell--commented {
-        background: var(--dx-grid-commented, var(--dx-gridCommented));
+        background: var(--color-grid-comment);
       }
     }
 
@@ -103,18 +125,108 @@
       [role='columnheader'],
       [role='rowheader'] {
         &[aria-selected] {
-          background: var(--dx-gridSelectionOverlay);
+          --grid-cell-surface: var(--color-grid-selection-overlay);
+
+          &:focus:not([aria-readonly='true']),
+          &:focus-visible,
+          &:focus-within {
+            & > .dx-grid__cell__content {
+              background: transparent;
+            }
+          }
         }
       }
     }
+
+    .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(--color-grid-hover-overlay);
+    }
   }
 
+  /* Editor and focused cell styles; be sure to keep these two blocks in-sync. */
+  .dx-grid {
+    [role='gridcell'],
+    [role='columnheader'],
+    [role='rowheader'] {
+      &: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);
+
+            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(--grid-cell-surface);
+          }
+
+          &:not([aria-readonly='true']) > .dx-grid__cell__content {
+            border-color: var(--color-grid-focus-indicator);
+          }
+        }
+      }
+
+      &:focus-visible > .dx-grid__cell__content {
+        border-color: var(--color-grid-focus-indicator);
+      }
+    }
+  }
+
+  .dx-grid__cell-editor {
+    font-variant-numeric: tabular-nums;
+    white-space: normal;
+    hyphens: auto;
+    overflow-wrap: break-word;
+
+    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);
+    --dx-grid-cell-editor-max-inline-size: min(60ch, 90vw);
+
+    block-size: min-content;
+    max-block-size: var(--dx-grid-cell-editor-max-block-size);
+    inline-size: min-content;
+    max-inline-size: var(--dx-grid-cell-editor-max-inline-size);
+
+    &:has(.dx-tag),
+    &:has(dx-tag-picker-item) {
+      text-overflow: clip;
+      line-height: 0;
+      --dx-grid-cell-editor-padding-inline: 1px;
+      --dx-grid-cell-editor-padding-block: 1px;
+    }
+  }
+
+  /* /// */
   .dx-grid-host:focus-within .dx-grid:not(:focus-within) {
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      &[data-dx-active]:not([aria-readonly='true']) {
-        border-color: var(--dx-accentSurface);
+      &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
+        border-color: var(--color-grid-focus-indicator);
       }
     }
   }
@@ -132,6 +244,20 @@
       background: rgba(0, 255, 0, 0.1);
     }
   }
+
+  .dx-grid__cell--flagged {
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inline-size: 0;
+      block-size: 0;
+      border-inline-start: 0.5em solid transparent;
+      border-block-start: 0.5em solid var(--color-warning-text);
+      z-index: 1;
+    }
+  }
 }
 
 /* TODO(thure): Move this somewhere better. */