@dxos/react-ui-grid 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/dist/lib/browser/index.mjs

@@ -1,15 +1,14 @@
-// packages/ui/react-ui-grid/src/index.ts
+// src/index.ts
 import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
 
-// packages/ui/react-ui-grid/src/Grid/Grid.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import "@dxos/lit-grid/dx-grid.pcss";
+// src/Grid/Grid.tsx
 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, useEffect, useState } from "react";
+import "@dxos/lit-grid/dx-grid.pcss";
 import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
-import { colToA1Notation, rowToA1Notation, closestCell, commentedClassName, toPlaneCellIndex, parseCellIndex, cellQuery } from "@dxos/lit-grid";
+import { colToA1Notation, rowToA1Notation, closestCell, commentedClassName, toPlaneCellIndex, parseCellIndex, cellQuery, DxEditRequest } from "@dxos/lit-grid";
 var DxGrid = createComponent({
   tagName: "dx-grid",
   elementClass: NaturalDxGrid,
@@ -29,95 +28,86 @@ var initialBox = {
 var GRID_NAME = "Grid";
 var [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
 var [GridProvider, useGridContext] = createGridContext(GRID_NAME);
-var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope }) => {
-  var _effect = _useSignals();
-  try {
-    const [editing = null, setEditing] = useControllableState({
-      prop: propsEditing,
-      defaultProp: defaultEditing,
-      onChange: onEditingChange
-    });
-    const [editBox, setEditBox] = useState(initialBox);
-    return /* @__PURE__ */ React.createElement(GridProvider, {
-      id,
-      editing,
-      setEditing,
-      editBox,
-      setEditBox,
-      scope: __gridScope
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "dx-grid-host",
-      style: {
-        display: "contents"
-      }
-    }, children));
-  } finally {
-    _effect.f();
-  }
+var GridRoot = ({ __gridScope, children, id, editing: propsEditing, defaultEditing, onEditingChange }) => {
+  const [editing = null, setEditing] = useControllableState({
+    prop: propsEditing,
+    defaultProp: defaultEditing,
+    onChange: onEditingChange
+  });
+  const [editBox, setEditBox] = useState(initialBox);
+  return /* @__PURE__ */ React.createElement(GridProvider, {
+    id,
+    editing,
+    setEditing,
+    editBox,
+    setEditBox,
+    scope: __gridScope
+  }, /* @__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) => {
-  var _effect = _useSignals();
-  try {
-    const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
-    const [dxGrid, setDxGridInternal] = useState(null);
-    const setDxGrid = useCallback((nextDxGrid) => {
-      setDxGridInternal(nextDxGrid);
-      if (forwardedRef) {
-        if (typeof forwardedRef === "function") {
-          forwardedRef?.(nextDxGrid);
-        } else {
-          forwardedRef.current = nextDxGrid;
-        }
-      }
-    }, [
-      forwardedRef,
-      dxGrid
-    ]);
-    useEffect(() => {
-      if (dxGrid && props.getCells) {
-        dxGrid.getCells = props.getCells;
-        dxGrid.requestUpdate("initialCells");
+  const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
+  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,
-      dxGrid
-    ]);
-    const handleEdit = useCallback((event) => {
-      setEditBox(event.cellBox);
-      setEditing({
-        index: event.cellIndex,
-        cellElement: event.cellElement,
-        initialContent: event.initialContent
-      });
-    }, []);
-    return /* @__PURE__ */ React.createElement(DxGrid, {
-      ...props,
-      gridId: id,
-      mode: editing ? "edit" : "browse",
-      onEdit: handleEdit,
-      ref: setDxGrid
+    }
+  }, [
+    forwardedRef,
+    dxGrid
+  ]);
+  useEffect(() => {
+    if (dxGrid && props.getCells) {
+      dxGrid.getCells = props.getCells;
+      dxGrid.requestUpdate("initialCells");
+    }
+  }, [
+    props.getCells,
+    dxGrid
+  ]);
+  const handleEdit = useCallback((event) => {
+    setEditBox(event.cellBox);
+    setEditing({
+      index: event.cellIndex,
+      cellElement: event.cellElement,
+      initialContent: event.initialContent
     });
-  } finally {
-    _effect.f();
-  }
+  }, []);
+  return /* @__PURE__ */ React.createElement(DxGrid, {
+    ...props,
+    gridId: id,
+    mode: editing ? "edit" : "browse",
+    onEdit: handleEdit,
+    ref: setDxGrid
+  });
 });
 GridContent.displayName = GRID_CONTENT_NAME;
-var gridSeparatorInlineEnd = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-subduedSeparator";
-var gridSeparatorBlockEnd = "[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-subduedSeparator";
+var gridSeparatorInlineEnd = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-y-0 [&>.dx-grid]:after:-right-px [&>.dx-grid]:after:w-px [&>.dx-grid]:after:bg-subdued-separator";
+var gridSeparatorBlockEnd = "[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-x-0 [&>.dx-grid]:before:-bottom-px [&>.dx-grid]:before:h-px [&>.dx-grid]:before:bg-subdued-separator";
 var Grid = {
   Root: GridRoot,
   Content: GridContent
 };
 
-// packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+// src/CellEditor/CellEditor.tsx
 import { completionStatus } from "@codemirror/autocomplete";
 import { EditorView, keymap } from "@codemirror/view";
 import React2 from "react";
 import { useThemeContext } from "@dxos/react-ui";
-import { createBasicExtensions, createThemeExtensions, preventNewline, useTextEditor } from "@dxos/react-ui-editor";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, filterChars } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
 var editorKeys = ({ onNav, onClose }) => {
   return keymap.of([
     {
@@ -219,94 +209,93 @@ var editorKeys = ({ onNav, onClose }) => {
     }
   ]);
 };
-var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
-  var _effect = _useSignals2();
-  try {
-    const { themeMode } = useThemeContext();
-    const { parentRef } = useTextEditor(() => {
-      return {
-        autoFocus,
-        initialValue: value,
-        selection: {
-          anchor: value?.length ?? 0
-        },
-        extensions: [
-          extension ?? [],
-          preventNewline,
-          EditorView.focusChangeEffect.of((state, focusing) => {
-            if (!focusing) {
-              onBlur?.(state.doc.toString());
-            }
-            return null;
-          }),
-          createBasicExtensions({
-            lineWrapping: false
-          }),
-          createThemeExtensions({
-            themeMode,
-            slots: {
-              editor: {
-                className: "[&>.cm-scroller]:scrollbar-none tabular-nums"
-              },
-              content: {
-                className: "!border !border-transparent !pli-[var(--dx-grid-cell-padding-inline)] !plb-[var(--dx-grid-cell-padding-block)]"
-              }
-            }
-          })
-        ]
-      };
-    }, [
-      extension,
+var CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur }) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
       autoFocus,
-      value,
-      onBlur
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      "data-testid": "grid.cell-editor",
-      ref: parentRef,
-      className: "absolute z-[1]",
-      style: {
-        ...box,
-        ...{
-          "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
-        }
+      initialValue: value,
+      selection: {
+        anchor: value?.length ?? 0
       },
-      ...gridId && {
-        "data-grid": gridId
+      extensions: [
+        extensions ?? [],
+        filterChars(/[\n\r]+/),
+        EditorView.focusChangeEffect.of((state, focusing) => {
+          if (!focusing) {
+            onBlur?.(state.doc.toString());
+          }
+          return null;
+        }),
+        createBasicExtensions({
+          lineWrapping: true
+        }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            editor: {
+              className: mx("min-w-full! w-min! !max-w-(--dx-grid-cell-editor-max-w-size) min-h-full! !max-h-(--dx-grid-cell-editor-max-h-size)", slots?.editor?.className)
+            },
+            scroller: {
+              className: mx("overflow-x-hidden! !py-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] pe-0! !pl-(--dx-grid-cell-editor-padding-inline)", slots?.scroller?.className)
+            },
+            content: {
+              className: mx("break-normal!", slots?.content?.className)
+            }
+          }
+        })
+      ]
+    };
+  }, [
+    extensions,
+    autoFocus,
+    value,
+    onBlur,
+    themeMode,
+    slots
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    "data-testid": "grid.cell-editor",
+    ref: parentRef,
+    className: "absolute z-[1] dx-grid__cell-editor",
+    style: {
+      insetInlineStart: box?.insetInlineStart ?? "0px",
+      insetBlockStart: box?.insetBlockStart ?? "0px",
+      minInlineSize: box?.inlineSize ?? "180px",
+      minBlockSize: box?.blockSize ?? "30px",
+      ...{
+        "--dx-grid-cell-width": `${box?.inlineSize ?? 200}px`
       }
-    });
-  } finally {
-    _effect.f();
-  }
+    },
+    ...gridId && {
+      "data-grid": gridId
+    }
+  });
 };
 
-// packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+// src/CellEditor/GridCellEditor.tsx
 import React3, { useCallback as useCallback2 } from "react";
-var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
-  var _effect = _useSignals3();
-  try {
-    const { id, editing, setEditing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
-    const handleBlur = useCallback2((value) => {
-      setEditing(null);
-      onBlur?.(value);
-    }, [
-      onBlur
-    ]);
-    return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
-      value: editing.initialContent ?? getCellContent(editing.index),
-      autoFocus: true,
-      box: editBox,
-      onBlur: handleBlur,
-      extension,
-      gridId: id
-    }) : null;
-  } finally {
-    _effect.f();
-  }
+var GridCellEditor = ({ extensions, getCellContent, onBlur, slots, __gridScope }) => {
+  const { id, editing, setEditing, editBox } = useGridContext("GridCellEditor", __gridScope);
+  const handleBlur = useCallback2((value) => {
+    setEditing(null);
+    onBlur?.(value);
+  }, [
+    onBlur
+  ]);
+  return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
+    value: editing.initialContent ?? getCellContent(editing.index),
+    autoFocus: true,
+    box: editBox,
+    onBlur: handleBlur,
+    extensions,
+    gridId: id,
+    slots
+  }) : null;
 };
 export {
   CellEditor,
+  DxEditRequest,
   Grid,
   GridCellEditor,
   GridContent,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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 { defaultColSize, defaultRowSize } 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  cellElement: DxEditRequest['cellElement'];\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?: 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  // 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, cellElement: event.cellElement, 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\n//\n// Fragments\n//\n\n// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.\n// These are offset by 1px to avoid double borders in planks.\nconst gridSeparatorInlineEnd =\n  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-subduedSeparator';\nconst gridSeparatorBlockEnd =\n  '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-subduedSeparator';\n\n//\n// Exports\n//\n\nexport const Grid = {\n  Root: GridRoot,\n  Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport {\n  colToA1Notation,\n  rowToA1Notation,\n  closestCell,\n  commentedClassName,\n  toPlaneCellIndex,\n  parseCellIndex,\n  cellQuery,\n} from '@dxos/lit-grid';\n\nexport type {\n  DxGridRange,\n  DxGridAxisMeta,\n  DxAxisResize,\n  DxGridCells,\n  DxGridPlaneRange,\n  DxGridPlaneCells,\n  DxGridCellIndex,\n  DxGridPlaneCellIndex,\n  DxGridCellValue,\n  DxGridPlane,\n  DxGridPosition,\n  DxGridPlanePosition,\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: 'Mod-ArrowLeft',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowLeft' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'Mod-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:\n                '!border !border-transparent !pli-[var(--dx-grid-cell-padding-inline)] !plb-[var(--dx-grid-cell-padding-block)]',\n            },\n          },\n        }),\n      ],\n    };\n  }, [extension, autoFocus, value, onBlur]);\n\n  return (\n    <div\n      data-testid='grid.cell-editor'\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, type DxGridCellIndex } from '../Grid';\n\nexport type GridCellEditorProps = GridScopedProps<\n  Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: DxGridCellIndex) => 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": ["defaultColSize", "defaultRowSize", "createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "toPlaneCellIndex", "parseCellIndex", "cellQuery", "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", "cellElement", "initialContent", "gridId", "mode", "ref", "gridSeparatorInlineEnd", "gridSeparatorBlockEnd", "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", "data-testid", "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"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nexport { defaultColSize, defaultRowSize } from '@dxos/lit-grid';\n\nexport * from './Grid';\nexport * from './CellEditor';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type EventName, createComponent } from '@lit/react';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n  type ComponentProps,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\n\nimport '@dxos/lit-grid/dx-grid.pcss';\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  cellElement: DxEditRequest['cellElement'];\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  {\n    id: string;\n  } & Partial<{\n    editing: GridEditing;\n    defaultEditing: GridEditing;\n    onEditingChange: (nextEditing: GridEditing) => void;\n  }>\n>;\n\n// TODO(burdon): Make headless.\nconst GridRoot = ({\n  __gridScope,\n  children,\n  id,\n  editing: propsEditing,\n  defaultEditing,\n  onEditingChange,\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\nconst GRID_CONTENT_NAME = 'GridContent';\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n  getCells?: NaturalDxGrid['getCells'];\n  activeRefs?: string;\n};\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  // 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, cellElement: event.cellElement, 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\n//\n// Fragments\n//\n\n// NOTE(Zan): These fragments add border to w-end and h-end of the grid using pseudo-elements.\n// These are offset by 1px to avoid double borders in planks.\nconst gridSeparatorInlineEnd =\n  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-y-0 [&>.dx-grid]:after:-right-px [&>.dx-grid]:after:w-px [&>.dx-grid]:after:bg-subdued-separator';\nconst gridSeparatorBlockEnd =\n  '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-x-0 [&>.dx-grid]:before:-bottom-px [&>.dx-grid]:before:h-px [&>.dx-grid]:before:bg-subdued-separator';\n\n//\n// Exports\n//\n\nexport const Grid = {\n  Root: GridRoot,\n  Content: GridContent,\n};\n\nexport { GridRoot, GridContent, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd, useGridContext };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport {\n  colToA1Notation,\n  rowToA1Notation,\n  closestCell,\n  commentedClassName,\n  toPlaneCellIndex,\n  parseCellIndex,\n  cellQuery,\n  DxEditRequest,\n} from '@dxos/lit-grid';\n\nexport type {\n  DxGridRange,\n  DxGridAxisMeta,\n  DxAxisResize,\n  DxGridCells,\n  DxGridPlaneRange,\n  DxGridPlaneCells,\n  DxGridCellIndex,\n  DxGridPlaneCellIndex,\n  DxGridCellValue,\n  DxGridPlane,\n  DxGridPosition,\n  DxGridPlanePosition,\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 { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';\nimport {\n  type ThemeExtensionsOptions,\n  createBasicExtensions,\n  createThemeExtensions,\n  filterChars,\n} from '@dxos/ui-editor';\nimport { mx } from '@dxos/ui-theme';\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: 'Mod-ArrowLeft',\n      run: (editor) => {\n        const value = editor.state.doc.toString();\n        onNav?.(value, { key: 'ArrowLeft' });\n        return !!onNav;\n      },\n    },\n    {\n      key: 'Mod-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  extensions?: Extension;\n  box?: GridEditBox;\n  gridId?: string;\n  onBlur?: EditorBlurHandler;\n} & Pick<UseTextEditorProps, 'autoFocus'> &\n  Pick<ThemeExtensionsOptions, 'slots'>;\n\nexport const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: 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        extensions ?? [],\n        filterChars(/[\\n\\r]+/),\n        EditorView.focusChangeEffect.of((state, focusing) => {\n          if (!focusing) {\n            onBlur?.(state.doc.toString());\n          }\n          return null;\n        }),\n        createBasicExtensions({ lineWrapping: true }),\n        createThemeExtensions({\n          themeMode,\n          slots: {\n            editor: {\n              className: mx(\n                'min-w-full! w-min! !max-w-(--dx-grid-cell-editor-max-w-size) min-h-full! !max-h-(--dx-grid-cell-editor-max-h-size)',\n                slots?.editor?.className,\n              ),\n            },\n            scroller: {\n              className: mx(\n                'overflow-x-hidden! !py-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] pe-0! !pl-(--dx-grid-cell-editor-padding-inline)',\n                slots?.scroller?.className,\n              ),\n            },\n            content: {\n              className: mx('break-normal!', slots?.content?.className),\n            },\n          },\n        }),\n      ],\n    };\n  }, [extensions, autoFocus, value, onBlur, themeMode, slots]);\n\n  return (\n    <div\n      data-testid='grid.cell-editor'\n      ref={parentRef}\n      className='absolute z-[1] dx-grid__cell-editor'\n      style={{\n        insetInlineStart: box?.insetInlineStart ?? '0px',\n        insetBlockStart: box?.insetBlockStart ?? '0px',\n        minInlineSize: box?.inlineSize ?? '180px',\n        minBlockSize: box?.blockSize ?? '30px',\n        ...{ '--dx-grid-cell-width': `${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 { type DxGridCellIndex, type GridScopedProps, useGridContext } from '../Grid';\nimport { CellEditor, type CellEditorProps } from './CellEditor';\n\nexport type GridCellEditorProps = GridScopedProps<\n  Pick<CellEditorProps, 'extensions' | 'onBlur' | 'slots'> & {\n    getCellContent: (index: DxGridCellIndex) => string | undefined;\n  }\n>;\n\nexport const GridCellEditor = ({ extensions, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {\n  const { id, editing, setEditing, editBox } = useGridContext('GridCellEditor', __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      extensions={extensions}\n      gridId={id}\n      slots={slots}\n    />\n  ) : null;\n};\n"],
+  "mappings": "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",
+  "names": ["defaultColSize", "defaultRowSize", "createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "toPlaneCellIndex", "parseCellIndex", "cellQuery", "DxEditRequest", "tagName", "elementClass", "react", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "GridProvider", "useGridContext", "GridRoot", "__gridScope", "children", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "setEditing", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "scope", "div", "className", "style", "display", "displayName", "GRID_CONTENT_NAME", "GridContent", "props", "forwardedRef", "dxGrid", "setDxGridInternal", "setDxGrid", "nextDxGrid", "current", "getCells", "requestUpdate", "handleEdit", "event", "cellBox", "index", "cellIndex", "cellElement", "initialContent", "gridId", "mode", "ref", "gridSeparatorInlineEnd", "gridSeparatorBlockEnd", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "useTextEditor", "createBasicExtensions", "createThemeExtensions", "filterChars", "mx", "editorKeys", "onNav", "onClose", "of", "key", "run", "editor", "value", "state", "doc", "toString", "shift", "undefined", "CellEditor", "extensions", "box", "gridId", "autoFocus", "slots", "onBlur", "themeMode", "parentRef", "initialValue", "selection", "anchor", "length", "focusChangeEffect", "focusing", "lineWrapping", "className", "scroller", "content", "div", "data-testid", "ref", "style", "insetInlineStart", "insetBlockStart", "minInlineSize", "inlineSize", "minBlockSize", "blockSize", "React", "useCallback", "GridCellEditor", "extensions", "getCellContent", "onBlur", "slots", "__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":17002,"imports":[{"path":"@preact-signals/safe-react/tracking","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}],"format":"esm"},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytes":462,"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":16141,"imports":[{"path":"@preact-signals/safe-react/tracking","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}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytes":3612,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":588,"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":804,"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":18865},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","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":"@preact-signals/safe-react/tracking","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":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","Grid","GridCellEditor","GridContent","GridRoot","cellQuery","closestCell","colToA1Notation","commentedClassName","createGridScope","defaultColSize","defaultRowSize","editorKeys","gridSeparatorBlockEnd","gridSeparatorInlineEnd","parseCellIndex","rowToA1Notation","toPlaneCellIndex","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":3687},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytesInOutput":4101},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":787}},"bytes":9231}}}
+{"inputs":{"src/Grid/Grid.tsx":{"bytes":16514,"imports":[{"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/dx-grid.pcss","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"},"src/Grid/index.ts":{"bytes":368,"imports":[{"path":"src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/CellEditor/CellEditor.tsx":{"bytes":17794,"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},{"path":"@dxos/ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/CellEditor/GridCellEditor.tsx":{"bytes":3399,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/Grid/index.ts","kind":"import-statement","original":"../Grid"},{"path":"src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"}],"format":"esm"},"src/CellEditor/index.ts":{"bytes":484,"imports":[{"path":"src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"src/index.ts":{"bytes":711,"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":19809},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid","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/dx-grid.pcss","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":"@dxos/ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","DxEditRequest","Grid","GridCellEditor","GridContent","GridRoot","cellQuery","closestCell","colToA1Notation","commentedClassName","createGridScope","defaultColSize","defaultRowSize","editorKeys","gridSeparatorBlockEnd","gridSeparatorInlineEnd","parseCellIndex","rowToA1Notation","toPlaneCellIndex","useGridContext"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":65},"src/Grid/Grid.tsx":{"bytesInOutput":3340},"src/CellEditor/CellEditor.tsx":{"bytesInOutput":4427},"src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":615}},"bytes":8951}}}

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

@@ -1,6 +1,7 @@
 import { type Extension } from '@codemirror/state';
 import React, { type KeyboardEvent } from 'react';
 import { type UseTextEditorProps } from '@dxos/react-ui-editor';
+import { type ThemeExtensionsOptions } from '@dxos/ui-editor';
 import { type GridEditBox } from '../Grid';
 export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & {
     shift?: boolean;
@@ -15,11 +16,10 @@ export type EditorKeysProps = {
 export declare const editorKeys: ({ onNav, onClose }: EditorKeysProps) => Extension;
 export type CellEditorProps = {
     value?: string;
-    extension?: Extension;
+    extensions?: Extension;
     box?: GridEditBox;
     gridId?: string;
-} & Pick<UseTextEditorProps, 'autoFocus'> & {
     onBlur?: EditorBlurHandler;
-};
-export declare const CellEditor: ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => React.JSX.Element;
+} & Pick<UseTextEditorProps, 'autoFocus'> & Pick<ThemeExtensionsOptions, 'slots'>;
+export declare const CellEditor: ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: 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,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,GAAI,oBAAoB,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,GAAI,sDAAsD,eAAe,sBA6C/F,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,EAAE,KAAK,kBAAkB,EAAiB,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,iBAAiB,CAAC;AAGzB,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,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GACvC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,UAAU,iEAAkE,eAAe,sBAwDvG,CAAC"}

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

@@ -0,0 +1,16 @@
+import { type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { type CellEditorProps } from './CellEditor';
+declare const meta: {
+    title: string;
+    component: ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: CellEditorProps) => React.JSX.Element;
+    render: (props: CellEditorProps) => React.JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=CellEditor.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAc,KAAK,eAAe,EAAmC,MAAM,cAAc,CAAC;AA2DjG,QAAA,MAAM,IAAI;;;oBAzDmB,eAAe;;;QA+DxC,MAAM;;CAEyB,CAAC;eAErB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,8 +1,8 @@
 import React from 'react';
+import { type DxGridCellIndex, type GridScopedProps } from '../Grid';
 import { type CellEditorProps } from './CellEditor';
-import { type GridScopedProps, type DxGridCellIndex } from '../Grid';
-export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur'> & {
+export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extensions' | 'onBlur' | 'slots'> & {
     getCellContent: (index: DxGridCellIndex) => string | undefined;
 }>;
-export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
+export declare const GridCellEditor: ({ extensions, getCellContent, onBlur, slots, __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,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CACnH,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,oDAAoD,mBAAmB,6BAqBrG,CAAC"}
+{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AACrF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAChE,CACF,CAAC;AAEF,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,6BAsB7G,CAAC"}