@dxos/react-ui-grid 0.8.4-main.cb12b3f963 → 0.8.4-main.d05539e30a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.4-main.cb12b3f963",
+  "version": "0.8.4-main.d05539e30a",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
@@ -16,7 +16,8 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -27,34 +28,34 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/view": "^6.38.5",
     "@lit/react": "^1.0.8",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-popper": "1.2.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/lit-grid": "0.8.4-main.cb12b3f963",
-    "@dxos/react-ui-editor": "0.8.4-main.cb12b3f963",
-    "@dxos/ui-editor": "0.8.4-main.cb12b3f963",
-    "@dxos/util": "0.8.4-main.cb12b3f963"
+    "@dxos/lit-grid": "0.8.4-main.d05539e30a",
+    "@dxos/util": "0.8.4-main.d05539e30a",
+    "@dxos/ui-editor": "0.8.4-main.d05539e30a",
+    "@dxos/react-ui-editor": "0.8.4-main.d05539e30a"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^8.0.10",
-    "@dxos/random": "0.8.4-main.cb12b3f963",
-    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
-    "@dxos/react-ui-list": "0.8.4-main.cb12b3f963",
-    "@dxos/storybook-utils": "0.8.4-main.cb12b3f963",
-    "@dxos/ui-theme": "0.8.4-main.cb12b3f963",
-    "@dxos/react-ui-search": "0.8.4-main.cb12b3f963"
+    "vite": "^8.0.13",
+    "@dxos/react-ui": "0.8.4-main.d05539e30a",
+    "@dxos/random": "0.8.4-main.d05539e30a",
+    "@dxos/react-ui-search": "0.8.4-main.d05539e30a",
+    "@dxos/react-ui-list": "0.8.4-main.d05539e30a",
+    "@dxos/ui-theme": "0.8.4-main.d05539e30a",
+    "@dxos/storybook-utils": "0.8.4-main.d05539e30a"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
-    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
+    "@dxos/react-ui": "0.8.4-main.d05539e30a",
+    "@dxos/ui-theme": "0.8.4-main.d05539e30a"
   },
   "publishConfig": {
     "access": "public"

package/src/CellEditor/CellEditor.tsx

@@ -132,11 +132,22 @@ export const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, o
       extensions: [
         extensions ?? [],
         filterChars(/[\n\r]+/),
-        EditorView.focusChangeEffect.of((state, focusing) => {
-          if (!focusing) {
-            onBlur?.(state.doc.toString());
-          }
-          return null;
+        // Observe the underlying blur DOM event rather than `EditorView.focusChangeEffect`. The
+        // focus-change facet fires asynchronously (CodeMirror schedules it on a 10ms setTimeout),
+        // which means in React strict mode the destroy → blur of the first EditorView runs the
+        // callback after the second view has mounted — committing stale data and closing the
+        // editor on the user's first keystroke. Deferring via `queueMicrotask` runs the check
+        // *after* `view.destroy()` finishes its synchronous body (which calls `dom.remove()`),
+        // so `view.dom.isConnected === false` reliably distinguishes a programmatic teardown
+        // from a real user blur. Pass `undefined` on teardown so downstream handlers can consume
+        // any pending suppress-next-blur flag without committing stale data.
+        EditorView.domEventObservers({
+          blur: (_event, view) => {
+            const doc = view.state.doc.toString();
+            queueMicrotask(() => {
+              onBlur?.(view.dom.isConnected ? doc : undefined);
+            });
+          },
         }),
         createBasicExtensions({ lineWrapping: true }),
         createThemeExtensions({

package/src/Grid/Grid.stories.tsx

@@ -65,7 +65,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
   }, []);
 
   return (
-    <div role='none' className='contents'>
+    <div className='contents'>
       <Grid.Root id='story' editing={editing} onEditingChange={handleEditingChange}>
         {/* TODO(burdon): Why is this property not just "cells" or "values" */}
         <Grid.Content {...props} initialCells={cells} onClick={handleClick} />
@@ -127,6 +127,29 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+/**
+ * Single focusable cell — for verifying focus-ring alignment with grid lines.
+ */
+export const SingleCell: Story = {
+  args: {
+    id: 'story',
+    limitColumns: 1,
+    limitRows: 1,
+    columnDefault: { grid: { size: 200, resizeable: false } },
+    rowDefault: { grid: { size: 32, resizeable: false } },
+    initialCells: {
+      grid: {
+        '0,0': { value: 'Focus me' },
+      },
+    },
+  },
+  render: (args) => (
+    <div className='h-full grid place-items-center'>
+      <GridStory {...args} />
+    </div>
+  ),
+};
+
 export const Basic: Story = {
   args: {
     id: 'story',