@dxos/react-ui-grid 0.6.14-staging.e15392e → 0.7.1-staging.599df14

package/dist/lib/browser/index.mjs

@@ -1,11 +1,13 @@
+// packages/ui/react-ui-grid/src/index.ts
+import { defaultSizeCol, defaultSizeRow } from "@dxos/lit-grid";
+
 // packages/ui/react-ui-grid/src/Grid/Grid.tsx
 import "@dxos/lit-grid/dx-grid.pcss";
 import { createComponent } from "@lit/react";
 import { createContextScope } from "@radix-ui/react-context";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React, { forwardRef, useCallback, useLayoutEffect, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
 import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
-import { useForwardedRef } from "@dxos/react-ui";
 import { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from "@dxos/lit-grid";
 var DxGrid = createComponent({
   tagName: "dx-grid",
@@ -40,20 +42,39 @@ var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, ch
     editBox,
     setEditBox,
     scope: __gridScope
-  }, children);
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "dx-grid-host",
+    style: {
+      display: "contents"
+    }
+  }, children));
 };
 GridRoot.displayName = GRID_NAME;
 var GRID_CONTENT_NAME = "GridContent";
 var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
-  const dxGrid = useForwardedRef(forwardedRef);
-  useLayoutEffect(() => {
-    if (dxGrid.current && props.getCells) {
-      dxGrid.current.getCells = props.getCells;
-      dxGrid.current.requestUpdate("initialCells");
+  const [dxGrid, setDxGridInternal] = useState(null);
+  const setDxGrid = useCallback((nextDxGrid) => {
+    setDxGridInternal(nextDxGrid);
+    if (forwardedRef) {
+      if (typeof forwardedRef === "function") {
+        forwardedRef?.(nextDxGrid);
+      } else {
+        forwardedRef.current = nextDxGrid;
+      }
     }
   }, [
-    props.getCells
+    forwardedRef,
+    dxGrid
+  ]);
+  useEffect(() => {
+    if (dxGrid && props.getCells) {
+      dxGrid.getCells = props.getCells;
+      dxGrid.requestUpdate("initialCells");
+    }
+  }, [
+    props.getCells,
+    dxGrid
   ]);
   const handleEdit = useCallback((event) => {
     setEditBox(event.cellBox);
@@ -67,7 +88,7 @@ var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     gridId: id,
     mode: editing ? "edit" : "browse",
     onEdit: handleEdit,
-    ref: dxGrid
+    ref: setDxGrid
   });
 });
 GridContent.displayName = GRID_CONTENT_NAME;
@@ -183,21 +204,7 @@ var editorKeys = ({ onNav, onClose }) => {
     }
   ]);
 };
-var editorVariants = {
-  // TODO(thure): remove when legacy is no longer used.
-  legacy: {
-    root: "flex w-full",
-    editor: "flex w-full [&>.cm-scroller]:scrollbar-none",
-    content: "!px-2 !py-1"
-  },
-  grid: {
-    root: "absolute z-[1]",
-    editor: "[&>.cm-scroller]:scrollbar-none tabular-nums",
-    // This must match cell styling in `dx-grid.pcss`.
-    content: "!border !border-transparent !pli-[3px] !plb-0.5"
-  }
-};
-var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box, gridId }) => {
+var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -222,10 +229,10 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
           themeMode,
           slots: {
             editor: {
-              className: editorVariants[variant].editor
+              className: "[&>.cm-scroller]:scrollbar-none tabular-nums"
             },
             content: {
-              className: editorVariants[variant].content
+              className: "!border !border-transparent !pli-[4px] !plb-0.5"
             }
           }
         })
@@ -235,13 +242,17 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
     extension,
     autoFocus,
     value,
-    variant,
     onBlur
   ]);
   return /* @__PURE__ */ React2.createElement("div", {
     ref: parentRef,
-    className: editorVariants[variant].root,
-    style: box,
+    className: "absolute z-[1]",
+    style: {
+      ...box,
+      ...{
+        "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
+      }
+    },
     ...gridId && {
       "data-grid": gridId
     }
@@ -249,15 +260,20 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
 };
 
 // packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx
-import React3 from "react";
+import React3, { useCallback as useCallback2 } from "react";
 var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
-  const { id, editing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
+  const { id, editing, setEditing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
+  const handleBlur = useCallback2((value) => {
+    setEditing(null);
+    onBlur?.(value);
+  }, [
+    onBlur
+  ]);
   return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
-    variant: "grid",
     value: editing.initialContent ?? getCellContent(editing.index),
     autoFocus: true,
     box: editBox,
-    onBlur,
+    onBlur: handleBlur,
     extension,
     gridId: id
   }) : null;
@@ -272,6 +288,8 @@ export {
   colToA1Notation,
   commentedClassName,
   createGridScope,
+  defaultSizeCol,
+  defaultSizeRow,
   editorKeys,
   rowToA1Notation,
   useGridContext

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useLayoutEffect,\n  useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\nimport { useForwardedRef } from '@dxos/react-ui';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n  tagName: 'dx-grid',\n  elementClass: NaturalDxGrid,\n  react: React,\n  events: {\n    onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n    onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n    onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n  },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n  insetInlineStart: 0,\n  insetBlockStart: 0,\n  inlineSize: 0,\n  blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;\n\ntype GridContextValue = {\n  id: string;\n  editing: GridEditing;\n  setEditing: (nextEditing: GridEditing) => void;\n  editBox: GridEditBox;\n  setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n  { id: string } & Partial<{\n    editing: GridEditing;\n    defaultEditing: GridEditing;\n    onEditingChange: (nextEditing: GridEditing) => void;\n  }>\n>;\n\nconst GridRoot = ({\n  id,\n  editing: propsEditing,\n  defaultEditing,\n  onEditingChange,\n  children,\n  __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n  const [editing = null, setEditing] = useControllableState({\n    prop: propsEditing,\n    defaultProp: defaultEditing,\n    onChange: onEditingChange,\n  });\n  const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n  return (\n    <GridProvider\n      id={id}\n      editing={editing}\n      setEditing={setEditing}\n      editBox={editBox}\n      setEditBox={setEditBox}\n      scope={__gridScope}\n    >\n      {children}\n    </GridProvider>\n  );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n  getCells?: NonNullable<NaturalDxGrid['getCells']>;\n  activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n  const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n  const dxGrid = useForwardedRef(forwardedRef);\n\n  // Needed instead of `useEffect` to ensure the DxGrid ref is defined.\n  useLayoutEffect(() => {\n    if (dxGrid.current && props.getCells) {\n      dxGrid.current.getCells = props.getCells;\n      dxGrid.current.requestUpdate('initialCells');\n    }\n  }, [props.getCells]);\n\n  const handleEdit = useCallback((event: DxEditRequest) => {\n    setEditBox(event.cellBox);\n    setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n  }, []);\n\n  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n  Root: GridRoot,\n  Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';\n\nexport type {\n  DxGridRange,\n  DxGridAxisMeta,\n  DxAxisResize,\n  DxGridCells,\n  DxGridPlaneRange,\n  DxGridPlaneCells,\n  DxGridCellIndex,\n  DxGridCellValue,\n  DxGridPlane,\n  DxGridPosition,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n  type UseTextEditorProps,\n  createBasicExtensions,\n  createThemeExtensions,\n  preventNewline,\n  useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeysProps = {\n  onClose: (value: string | undefined, event: EditorKeyEvent) => void;\n  onNav?: (value: string | undefined, event: EditorKeyEvent) => void;\n};\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n  return keymap.of([\n    {\n      key: 'ArrowUp',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowUp' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'ArrowDown',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowDown' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'ArrowLeft',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowLeft' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'ArrowRight',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowRight' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'Enter',\n      run: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Enter' });\n          return true;\n        }\n      },\n      shift: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n          return true;\n        }\n      },\n    },\n    {\n      key: 'Tab',\n      run: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Tab' });\n          return true;\n        }\n      },\n      shift: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n          return true;\n        }\n      },\n    },\n    {\n      key: 'Escape',\n      run: () => {\n        onClose(undefined, { key: 'Escape' });\n        return true;\n      },\n    },\n  ]);\n};\n\nexport type CellEditorProps = {\n  value?: string;\n  extension?: Extension;\n  variant?: keyof typeof editorVariants;\n  box?: GridEditBox;\n  gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: (value?: string) => void };\n\nconst editorVariants = {\n  // TODO(thure): remove when legacy is no longer used.\n  legacy: {\n    root: 'flex w-full',\n    editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',\n    content: '!px-2 !py-1',\n  },\n  grid: {\n    root: 'absolute z-[1]',\n    editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n    // This must match cell styling in `dx-grid.pcss`.\n    content: '!border !border-transparent !pli-[3px] !plb-0.5',\n  },\n};\n\nexport const CellEditor = ({\n  value,\n  extension,\n  autoFocus,\n  onBlur,\n  variant = 'legacy',\n  box,\n  gridId,\n}: CellEditorProps) => {\n  const { themeMode } = useThemeContext();\n  const { parentRef } = useTextEditor(() => {\n    return {\n      autoFocus,\n      initialValue: value,\n      selection: { anchor: value?.length ?? 0 },\n      extensions: [\n        extension ?? [],\n        preventNewline,\n        EditorView.focusChangeEffect.of((state, focusing) => {\n          if (!focusing) {\n            onBlur?.(state.doc.toString());\n          }\n          return null;\n        }),\n        createBasicExtensions({ lineWrapping: false }),\n        createThemeExtensions({\n          themeMode,\n          slots: {\n            editor: {\n              className: editorVariants[variant].editor,\n            },\n            content: {\n              className: editorVariants[variant].content,\n            },\n          },\n        }),\n      ],\n    };\n  }, [extension, autoFocus, value, variant, onBlur]);\n\n  return (\n    <div\n      ref={parentRef}\n      className={editorVariants[variant].root}\n      style={box}\n      {...(gridId && { 'data-grid': gridId })}\n    />\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext } from '../Grid';\n\nexport const GridCellEditor = ({\n  extension,\n  getCellContent,\n  onBlur,\n  __gridScope,\n}: GridScopedProps<\n  Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }\n>) => {\n  const { id, editing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n  return editing ? (\n    <CellEditor\n      variant='grid'\n      value={editing.initialContent ?? getCellContent(editing.index)}\n      autoFocus\n      box={editBox}\n      onBlur={onBlur}\n      extension={extension}\n      gridId={id}\n    />\n  ) : null;\n};\n"],
-  "mappings": "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",
-  "names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useLayoutEffect", "useState", "DxGrid", "NaturalDxGrid", "useForwardedRef", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "dxGrid", "useForwardedRef", "useLayoutEffect", "current", "getCells", "requestUpdate", "handleEdit", "useCallback", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "createBasicExtensions", "createThemeExtensions", "preventNewline", "useTextEditor", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "editorVariants", "legacy", "root", "content", "grid", "CellEditor", "extension", "autoFocus", "onBlur", "variant", "box", "gridId", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "focusing", "createBasicExtensions", "lineWrapping", "createThemeExtensions", "slots", "className", "React", "div", "ref", "style", "React", "GridCellEditor", "extension", "getCellContent", "onBlur", "__gridScope", "id", "editing", "editBox", "useGridContext", "React", "CellEditor", "variant", "value", "initialContent", "index", "autoFocus", "box", "gridId"]
+  "sources": ["../../../src/index.ts", "../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nexport { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';\n\nexport * from './Grid';\nexport * from './CellEditor';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n  tagName: 'dx-grid',\n  elementClass: NaturalDxGrid,\n  react: React,\n  events: {\n    onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n    onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n    onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n  },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n  insetInlineStart: 0,\n  insetBlockStart: 0,\n  inlineSize: 0,\n  blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = {\n  index: DxEditRequest['cellIndex'];\n  initialContent: DxEditRequest['initialContent'];\n} | null;\n\ntype GridContextValue = {\n  id: string;\n  editing: GridEditing;\n  setEditing: (nextEditing: GridEditing) => void;\n  editBox: GridEditBox;\n  setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n  { id: string } & Partial<{\n    editing: GridEditing;\n    defaultEditing: GridEditing;\n    onEditingChange: (nextEditing: GridEditing) => void;\n  }>\n>;\n\nconst GridRoot = ({\n  id,\n  editing: propsEditing,\n  defaultEditing,\n  onEditingChange,\n  children,\n  __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n  const [editing = null, setEditing] = useControllableState({\n    prop: propsEditing,\n    defaultProp: defaultEditing,\n    onChange: onEditingChange,\n  });\n  const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n  return (\n    <GridProvider\n      id={id}\n      editing={editing}\n      setEditing={setEditing}\n      editBox={editBox}\n      setEditBox={setEditBox}\n      scope={__gridScope}\n    >\n      <div className='dx-grid-host' style={{ display: 'contents' }}>\n        {children}\n      </div>\n    </GridProvider>\n  );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n  getCells?: NonNullable<NaturalDxGrid['getCells']>;\n  activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n  const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n  const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n  // TODO(burdon): Can we use useImperativeHandle here?\n  // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us\n  // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n  const setDxGrid = useCallback(\n    (nextDxGrid: NaturalDxGrid | null) => {\n      setDxGridInternal(nextDxGrid);\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          forwardedRef?.(nextDxGrid);\n        } else {\n          forwardedRef.current = nextDxGrid;\n        }\n      }\n    },\n    [forwardedRef, dxGrid],\n  );\n\n  useEffect(() => {\n    if (dxGrid && props.getCells) {\n      dxGrid.getCells = props.getCells;\n      dxGrid.requestUpdate('initialCells');\n    }\n  }, [props.getCells, dxGrid]);\n\n  const handleEdit = useCallback((event: DxEditRequest) => {\n    setEditBox(event.cellBox);\n    setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n  }, []);\n\n  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n  Root: GridRoot,\n  Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';\n\nexport type {\n  DxGridRange,\n  DxGridAxisMeta,\n  DxAxisResize,\n  DxGridCells,\n  DxGridPlaneRange,\n  DxGridPlaneCells,\n  DxGridCellIndex,\n  DxGridCellValue,\n  DxGridPlane,\n  DxGridPosition,\n  DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n  type UseTextEditorProps,\n  createBasicExtensions,\n  createThemeExtensions,\n  preventNewline,\n  useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;\nexport type EditorBlurHandler = (value: string | undefined) => void;\nexport type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;\n\nexport type EditorKeysProps = {\n  onClose: EditorKeyHandler;\n  onNav?: EditorKeyHandler;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n  return keymap.of([\n    {\n      key: 'ArrowUp',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowUp' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'ArrowDown',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowDown' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'ArrowLeft',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowLeft' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'ArrowRight',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowRight' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'Enter',\n      run: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Enter' });\n          return true;\n        }\n      },\n      shift: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n          return true;\n        }\n      },\n    },\n    {\n      key: 'Tab',\n      run: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Tab' });\n          return true;\n        }\n      },\n      shift: (editor) => {\n        if (completionStatus(editor.state)) {\n          return false;\n        } else {\n          onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n          return true;\n        }\n      },\n    },\n    {\n      key: 'Escape',\n      run: () => {\n        onClose(undefined, { key: 'Escape' });\n        return true;\n      },\n    },\n  ]);\n};\n\nexport type CellEditorProps = {\n  value?: string;\n  extension?: Extension;\n  box?: GridEditBox;\n  gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };\n\nexport const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => {\n  const { themeMode } = useThemeContext();\n  const { parentRef } = useTextEditor(() => {\n    return {\n      autoFocus,\n      initialValue: value,\n      selection: { anchor: value?.length ?? 0 },\n      extensions: [\n        extension ?? [],\n        preventNewline,\n        EditorView.focusChangeEffect.of((state, focusing) => {\n          if (!focusing) {\n            onBlur?.(state.doc.toString());\n          }\n          return null;\n        }),\n        createBasicExtensions({ lineWrapping: false }),\n        createThemeExtensions({\n          themeMode,\n          slots: {\n            editor: {\n              className: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n            },\n            content: {\n              className: '!border !border-transparent !pli-[4px] !plb-0.5',\n            },\n          },\n        }),\n      ],\n    };\n  }, [extension, autoFocus, value, onBlur]);\n\n  return (\n    <div\n      ref={parentRef}\n      className='absolute z-[1]'\n      style={{\n        ...box,\n        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },\n      }}\n      {...(gridId && { 'data-grid': gridId })}\n    />\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext } from '../Grid';\n\nexport type GridCellEditorProps = GridScopedProps<\n  Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }\n>;\n\nexport const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {\n  const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n  const handleBlur = useCallback(\n    (value?: string) => {\n      setEditing(null);\n      onBlur?.(value);\n    },\n    [onBlur],\n  );\n\n  return editing ? (\n    <CellEditor\n      value={editing.initialContent ?? getCellContent(editing.index)}\n      autoFocus\n      box={editBox}\n      onBlur={handleBlur}\n      extension={extension}\n      gridId={id}\n    />\n  ) : null;\n};\n"],
+  "mappings": "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",
+  "names": ["defaultSizeCol", "defaultSizeRow", "createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "div", "className", "style", "display", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "dxGrid", "setDxGridInternal", "setDxGrid", "useCallback", "nextDxGrid", "current", "useEffect", "getCells", "requestUpdate", "handleEdit", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "createBasicExtensions", "createThemeExtensions", "preventNewline", "useTextEditor", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "CellEditor", "extension", "autoFocus", "onBlur", "box", "gridId", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "focusing", "createBasicExtensions", "lineWrapping", "createThemeExtensions", "slots", "className", "content", "React", "div", "ref", "style", "inlineSize", "React", "useCallback", "GridCellEditor", "extension", "getCellContent", "onBlur", "__gridScope", "id", "editing", "setEditing", "editBox", "useGridContext", "handleBlur", "useCallback", "value", "React", "CellEditor", "initialContent", "index", "autoFocus", "box", "gridId"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":12510,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytes":16671,"imports":[{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytes":2833,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"../Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytes":620,"imports":[{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":583,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"packages/ui/react-ui-grid/src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16550},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","Grid","GridCellEditor","GridContent","GridRoot","closestCell","colToA1Notation","commentedClassName","createGridScope","editorKeys","rowToA1Notation","useGridContext"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytesInOutput":2460},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytesInOutput":4072},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":450}},"bytes":7392}}}
+{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":14417,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytes":15677,"imports":[{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytes":3394,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"../Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytes":620,"imports":[{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":836,"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"packages/ui/react-ui-grid/src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17636},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","Grid","GridCellEditor","GridContent","GridRoot","closestCell","colToA1Notation","commentedClassName","createGridScope","defaultSizeCol","defaultSizeRow","editorKeys","rowToA1Notation","useGridContext"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":65},"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytesInOutput":2829},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytesInOutput":3728},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":600}},"bytes":7711}}}

package/dist/types/src/CellEditor/CellEditor.d.ts

@@ -5,32 +5,21 @@ import { type GridEditBox } from '../Grid';
 export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & {
     shift?: boolean;
 };
+export type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;
+export type EditorBlurHandler = (value: string | undefined) => void;
+export type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;
 export type EditorKeysProps = {
-    onClose: (value: string | undefined, event: EditorKeyEvent) => void;
-    onNav?: (value: string | undefined, event: EditorKeyEvent) => void;
+    onClose: EditorKeyHandler;
+    onNav?: EditorKeyHandler;
 };
 export declare const editorKeys: ({ onNav, onClose }: EditorKeysProps) => Extension;
 export type CellEditorProps = {
     value?: string;
     extension?: Extension;
-    variant?: keyof typeof editorVariants;
     box?: GridEditBox;
     gridId?: string;
 } & Pick<UseTextEditorProps, 'autoFocus'> & {
-    onBlur?: (value?: string) => void;
+    onBlur?: EditorBlurHandler;
 };
-declare const editorVariants: {
-    legacy: {
-        root: string;
-        editor: string;
-        content: string;
-    };
-    grid: {
-        root: string;
-        editor: string;
-        content: string;
-    };
-};
-export declare const CellEditor: ({ value, extension, autoFocus, onBlur, variant, box, gridId, }: CellEditorProps) => React.JSX.Element;
-export {};
+export declare const CellEditor: ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => React.JSX.Element;
 //# sourceMappingURL=CellEditor.d.ts.map

package/dist/types/src/CellEditor/CellEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAAC;AAElF,QAAA,MAAM,cAAc;;;;;;;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,UAAU,mEAQpB,eAAe,sBAwCjB,CAAC"}
+{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAEjG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,UAAU,yDAA0D,eAAe,sBA2C/F,CAAC"}

package/dist/types/src/CellEditor/GridCellEditor.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { type CellEditorProps } from './CellEditor';
 import { type GridScopedProps } from '../Grid';
-export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope, }: GridScopedProps<Pick<CellEditorProps, "extension" | "onBlur"> & {
+export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur'> & {
     getCellContent: (index: string) => string | undefined;
-}>) => React.JSX.Element | null;
+}>;
+export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
 //# sourceMappingURL=GridCellEditor.d.ts.map

package/dist/types/src/CellEditor/GridCellEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AAE/D,eAAO,MAAM,cAAc,wDAKxB,eAAe,CAChB,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CAC1G,6BAcA,CAAC"}
+{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CAC1G,CAAC;AAEF,eAAO,MAAM,cAAc,uDAAwD,mBAAmB,6BAqBrG,CAAC"}

package/dist/types/src/Grid/Grid.d.ts

@@ -52,5 +52,5 @@ export declare const Grid: {
 export { GridRoot, GridContent, useGridContext, createGridScope };
 export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
 export { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';
-export type { DxGridRange, DxGridAxisMeta, DxAxisResize, DxGridCells, DxGridPlaneRange, DxGridPlaneCells, DxGridCellIndex, DxGridCellValue, DxGridPlane, DxGridPosition, } from '@dxos/lit-grid';
+export type { DxGridRange, DxGridAxisMeta, DxAxisResize, DxGridCells, DxGridPlaneRange, DxGridPlaneCells, DxGridCellIndex, DxGridCellValue, DxGridPlane, DxGridPosition, DxGridAxis, } from '@dxos/lit-grid';
 //# sourceMappingURL=Grid.d.ts.map

package/dist/types/src/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EAEnB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGxH,KAAK,aAAa,GAAG,aAAa,CAAC;AAEnC,QAAA,MAAM,MAAM;kBAK0B,SAAS,CAAC,YAAY,CAAC;YAC5B,SAAS,CAAC,aAAa,CAAC;cACjB,SAAS,CAAC,iBAAiB,CAAC;EAElE,CAAC;AAEH,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAS5C,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAAC,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;CAAE,GAAG,IAAI,CAAC;AAEjH,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAItD,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAAqB,cAAc,wFAAkD,CAAC;AAEtF,KAAK,aAAa,GAAG,iBAAiB,CACpC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD,CAAC,CACH,CAAC;AAEF,QAAA,MAAM,QAAQ;6FAOX,eAAe,CAAC,aAAa,CAAC;;CAmBhC,CAAC;AAIF,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,QAAA,MAAM,WAAW,sHAkBf,CAAC;AAIH,eAAO,MAAM,IAAI;;iGApDd,eAAe,CAAC,aAAa,CAAC;;;;CAuDhC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAElE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAE1G,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEnG,YAAY,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,WAAW,EACX,cAAc,GACf,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EAEnB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAExH,KAAK,aAAa,GAAG,aAAa,CAAC;AAEnC,QAAA,MAAM,MAAM;kBAK0B,SAAS,CAAC,YAAY,CAAC;YAC5B,SAAS,CAAC,aAAa,CAAC;cACjB,SAAS,CAAC,iBAAiB,CAAC;EAElE,CAAC;AAEH,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAS5C,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACjD,GAAG,IAAI,CAAC;AAET,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAItD,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAAqB,cAAc,wFAAkD,CAAC;AAEtF,KAAK,aAAa,GAAG,iBAAiB,CACpC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD,CAAC,CACH,CAAC;AAEF,QAAA,MAAM,QAAQ;6FAOX,eAAe,CAAC,aAAa,CAAC;;CAqBhC,CAAC;AAIF,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,QAAA,MAAM,WAAW,sHAkCf,CAAC;AAIH,eAAO,MAAM,IAAI;;iGAtEd,eAAe,CAAC,aAAa,CAAC;;;;CAyEhC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAElE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAE1G,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEnG,YAAY,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,GACX,MAAM,gBAAgB,CAAC"}

package/dist/types/src/Grid/Grid.stories.d.ts

@@ -2,6 +2,7 @@ import '@dxos-theme';
 import { type StoryObj } from '@storybook/react';
 import React from 'react';
 import { type GridContentProps, type GridRootProps } from './Grid';
+export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
 type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
 declare const _default: {
     title: string;

package/dist/types/src/Grid/Grid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAgF,MAAM,OAAO,CAAC;AAOrG,OAAO,EAAQ,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEzE,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;;;+CAiB9B,cAAc;;;;;;AAiEhE,wBAKE;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,cAAc,CA+B1C,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAgF,MAAM,OAAO,CAAC;AAQrG,OAAO,EAAQ,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhE,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;;;+CAiB9B,cAAc;;;;;;AAiEhE,wBAKE;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,cAAc,CA+B1C,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,3 +1,4 @@
+export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
 export * from './Grid';
 export * from './CellEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhE,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.6.14-staging.e15392e",
+  "version": "0.7.1-staging.599df14",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,9 +29,9 @@
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-popper": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
-    "@dxos/lit-grid": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-editor": "0.6.14-staging.e15392e",
-    "@dxos/util": "0.6.14-staging.e15392e"
+    "@dxos/lit-grid": "0.7.1-staging.599df14",
+    "@dxos/util": "0.7.1-staging.599df14",
+    "@dxos/react-ui-editor": "0.7.1-staging.599df14"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -39,17 +39,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.6.14-staging.e15392e",
-    "@dxos/react-ui": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-searchlist": "0.6.14-staging.e15392e",
-    "@dxos/storybook-utils": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-theme": "0.6.14-staging.e15392e"
+    "@dxos/react-ui": "0.7.1-staging.599df14",
+    "@dxos/random": "0.7.1-staging.599df14",
+    "@dxos/react-ui-theme": "0.7.1-staging.599df14",
+    "@dxos/storybook-utils": "0.7.1-staging.599df14",
+    "@dxos/react-ui-searchlist": "0.7.1-staging.599df14"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-theme": "0.6.14-staging.e15392e"
+    "@dxos/react-ui-theme": "0.7.1-staging.599df14",
+    "@dxos/react-ui": "0.7.1-staging.599df14"
   },
   "publishConfig": {
     "access": "public"

package/src/CellEditor/CellEditor.tsx

@@ -20,10 +20,15 @@ import { type GridEditBox } from '../Grid';
 
 export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };
 
+export type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;
+export type EditorBlurHandler = (value: string | undefined) => void;
+export type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;
+
 export type EditorKeysProps = {
-  onClose: (value: string | undefined, event: EditorKeyEvent) => void;
-  onNav?: (value: string | undefined, event: EditorKeyEvent) => void;
+  onClose: EditorKeyHandler;
+  onNav?: EditorKeyHandler;
 };
+
 // TODO(Zan): Should each consumer be responsible for defining these?
 export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
   return keymap.of([
@@ -110,35 +115,11 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
 export type CellEditorProps = {
   value?: string;
   extension?: Extension;
-  variant?: keyof typeof editorVariants;
   box?: GridEditBox;
   gridId?: string;
-} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: (value?: string) => void };
-
-const editorVariants = {
-  // TODO(thure): remove when legacy is no longer used.
-  legacy: {
-    root: 'flex w-full',
-    editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',
-    content: '!px-2 !py-1',
-  },
-  grid: {
-    root: 'absolute z-[1]',
-    editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',
-    // This must match cell styling in `dx-grid.pcss`.
-    content: '!border !border-transparent !pli-[3px] !plb-0.5',
-  },
-};
+} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };
 
-export const CellEditor = ({
-  value,
-  extension,
-  autoFocus,
-  onBlur,
-  variant = 'legacy',
-  box,
-  gridId,
-}: CellEditorProps) => {
+export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -159,22 +140,25 @@ export const CellEditor = ({
           themeMode,
           slots: {
             editor: {
-              className: editorVariants[variant].editor,
+              className: '[&>.cm-scroller]:scrollbar-none tabular-nums',
             },
             content: {
-              className: editorVariants[variant].content,
+              className: '!border !border-transparent !pli-[4px] !plb-0.5',
             },
           },
         }),
       ],
     };
-  }, [extension, autoFocus, value, variant, onBlur]);
+  }, [extension, autoFocus, value, onBlur]);
 
   return (
     <div
       ref={parentRef}
-      className={editorVariants[variant].root}
-      style={box}
+      className='absolute z-[1]'
+      style={{
+        ...box,
+        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
+      }}
       {...(gridId && { 'data-grid': gridId })}
     />
   );

package/src/CellEditor/GridCellEditor.tsx

@@ -2,28 +2,32 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { CellEditor, type CellEditorProps } from './CellEditor';
 import { type GridScopedProps, useGridContext } from '../Grid';
 
-export const GridCellEditor = ({
-  extension,
-  getCellContent,
-  onBlur,
-  __gridScope,
-}: GridScopedProps<
+export type GridCellEditorProps = GridScopedProps<
   Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }
->) => {
-  const { id, editing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
+>;
+
+export const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {
+  const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
+
+  const handleBlur = useCallback(
+    (value?: string) => {
+      setEditing(null);
+      onBlur?.(value);
+    },
+    [onBlur],
+  );
 
   return editing ? (
     <CellEditor
-      variant='grid'
       value={editing.initialContent ?? getCellContent(editing.index)}
       autoFocus
       box={editBox}
-      onBlur={onBlur}
+      onBlur={handleBlur}
       extension={extension}
       gridId={id}
     />

package/src/Grid/Grid.stories.tsx

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { type StoryObj } from '@storybook/react';
 import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, useState } from 'react';
 
+import { defaultSizeRow } from '@dxos/lit-grid';
 import { faker } from '@dxos/random';
 import { DropdownMenu } from '@dxos/react-ui';
 import { PopoverCombobox } from '@dxos/react-ui-searchlist';
@@ -14,6 +15,8 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Grid, type GridContentProps, type GridRootProps } from './Grid';
 
+export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
+
 type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
 
 const storybookItems = faker.helpers.uniqueArray(faker.commerce.productName, 16);
@@ -114,7 +117,7 @@ export const Basic: StoryObj<StoryGridProps> = {
     },
     rowDefault: {
       grid: {
-        size: 32,
+        size: defaultSizeRow,
         resizeable: true,
       },
     },

package/src/Grid/Grid.tsx

@@ -12,12 +12,11 @@ import React, {
   forwardRef,
   type PropsWithChildren,
   useCallback,
-  useLayoutEffect,
+  useEffect,
   useState,
 } from 'react';
 
 import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
-import { useForwardedRef } from '@dxos/react-ui';
 
 type DxGridElement = NaturalDxGrid;
 
@@ -41,7 +40,10 @@ const initialBox = {
   blockSize: 0,
 } satisfies GridEditBox;
 
-type GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;
+type GridEditing = {
+  index: DxEditRequest['cellIndex'];
+  initialContent: DxEditRequest['initialContent'];
+} | null;
 
 type GridContextValue = {
   id: string;
@@ -90,7 +92,9 @@ const GridRoot = ({
       setEditBox={setEditBox}
       scope={__gridScope}
     >
-      {children}
+      <div className='dx-grid-host' style={{ display: 'contents' }}>
+        {children}
+      </div>
     </GridProvider>
   );
 };
@@ -106,22 +110,38 @@ const GRID_CONTENT_NAME = 'GridContent';
 
 const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {
   const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
-  const dxGrid = useForwardedRef(forwardedRef);
+  const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);
+
+  // TODO(burdon): Can we use useImperativeHandle here?
+  // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
+  // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
+  const setDxGrid = useCallback(
+    (nextDxGrid: NaturalDxGrid | null) => {
+      setDxGridInternal(nextDxGrid);
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          forwardedRef?.(nextDxGrid);
+        } else {
+          forwardedRef.current = nextDxGrid;
+        }
+      }
+    },
+    [forwardedRef, dxGrid],
+  );
 
-  // Needed instead of `useEffect` to ensure the DxGrid ref is defined.
-  useLayoutEffect(() => {
-    if (dxGrid.current && props.getCells) {
-      dxGrid.current.getCells = props.getCells;
-      dxGrid.current.requestUpdate('initialCells');
+  useEffect(() => {
+    if (dxGrid && props.getCells) {
+      dxGrid.getCells = props.getCells;
+      dxGrid.requestUpdate('initialCells');
     }
-  }, [props.getCells]);
+  }, [props.getCells, dxGrid]);
 
   const handleEdit = useCallback((event: DxEditRequest) => {
     setEditBox(event.cellBox);
     setEditing({ index: event.cellIndex, initialContent: event.initialContent });
   }, []);
 
-  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;
+  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;
 });
 
 GridContent.displayName = GRID_CONTENT_NAME;
@@ -148,4 +168,5 @@ export type {
   DxGridCellValue,
   DxGridPlane,
   DxGridPosition,
+  DxGridAxis,
 } from '@dxos/lit-grid';

package/src/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
+
 export * from './Grid';
 export * from './CellEditor';