@dxos/react-ui-grid 0.6.14-main.f49f251 → 0.6.14-staging.3e2eaca
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +51 -19
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/CellEditor/CellEditor.d.ts +15 -10
- package/dist/types/src/CellEditor/CellEditor.d.ts.map +1 -1
- package/dist/types/src/CellEditor/GridCellEditor.d.ts +3 -2
- package/dist/types/src/CellEditor/GridCellEditor.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.d.ts +1 -1
- package/dist/types/src/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.stories.d.ts +1 -0
- package/dist/types/src/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/package.json +11 -11
- package/src/CellEditor/CellEditor.tsx +22 -16
- package/src/CellEditor/GridCellEditor.tsx +15 -7
- package/src/Grid/Grid.stories.tsx +4 -1
- package/src/Grid/Grid.tsx +33 -12
- package/src/index.ts +2 -0
|
@@ -1,11 +1,13 @@
|
|
|
1
|
+
// packages/ui/react-ui-grid/src/index.ts
|
|
2
|
+
import { defaultSizeCol, defaultSizeRow } from "@dxos/lit-grid";
|
|
3
|
+
|
|
1
4
|
// packages/ui/react-ui-grid/src/Grid/Grid.tsx
|
|
2
5
|
import "@dxos/lit-grid/dx-grid.pcss";
|
|
3
6
|
import { createComponent } from "@lit/react";
|
|
4
7
|
import { createContextScope } from "@radix-ui/react-context";
|
|
5
8
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
6
|
-
import React, { forwardRef, useCallback,
|
|
9
|
+
import React, { forwardRef, useCallback, useEffect, useState } from "react";
|
|
7
10
|
import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
|
|
8
|
-
import { useForwardedRef } from "@dxos/react-ui";
|
|
9
11
|
import { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from "@dxos/lit-grid";
|
|
10
12
|
var DxGrid = createComponent({
|
|
11
13
|
tagName: "dx-grid",
|
|
@@ -40,20 +42,39 @@ var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, ch
|
|
|
40
42
|
editBox,
|
|
41
43
|
setEditBox,
|
|
42
44
|
scope: __gridScope
|
|
43
|
-
},
|
|
45
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
46
|
+
className: "dx-grid-host",
|
|
47
|
+
style: {
|
|
48
|
+
display: "contents"
|
|
49
|
+
}
|
|
50
|
+
}, children));
|
|
44
51
|
};
|
|
45
52
|
GridRoot.displayName = GRID_NAME;
|
|
46
53
|
var GRID_CONTENT_NAME = "GridContent";
|
|
47
54
|
var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
48
55
|
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
49
|
-
const dxGrid =
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
const [dxGrid, setDxGridInternal] = useState(null);
|
|
57
|
+
const setDxGrid = useCallback((nextDxGrid) => {
|
|
58
|
+
setDxGridInternal(nextDxGrid);
|
|
59
|
+
if (forwardedRef) {
|
|
60
|
+
if (typeof forwardedRef === "function") {
|
|
61
|
+
forwardedRef?.(nextDxGrid);
|
|
62
|
+
} else {
|
|
63
|
+
forwardedRef.current = nextDxGrid;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}, [
|
|
67
|
+
forwardedRef,
|
|
68
|
+
dxGrid
|
|
69
|
+
]);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
if (dxGrid && props.getCells) {
|
|
72
|
+
dxGrid.getCells = props.getCells;
|
|
73
|
+
dxGrid.requestUpdate("initialCells");
|
|
54
74
|
}
|
|
55
75
|
}, [
|
|
56
|
-
props.getCells
|
|
76
|
+
props.getCells,
|
|
77
|
+
dxGrid
|
|
57
78
|
]);
|
|
58
79
|
const handleEdit = useCallback((event) => {
|
|
59
80
|
setEditBox(event.cellBox);
|
|
@@ -67,7 +88,7 @@ var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
|
67
88
|
gridId: id,
|
|
68
89
|
mode: editing ? "edit" : "browse",
|
|
69
90
|
onEdit: handleEdit,
|
|
70
|
-
ref:
|
|
91
|
+
ref: setDxGrid
|
|
71
92
|
});
|
|
72
93
|
});
|
|
73
94
|
GridContent.displayName = GRID_CONTENT_NAME;
|
|
@@ -194,7 +215,7 @@ var editorVariants = {
|
|
|
194
215
|
root: "absolute z-[1]",
|
|
195
216
|
editor: "[&>.cm-scroller]:scrollbar-none tabular-nums",
|
|
196
217
|
// This must match cell styling in `dx-grid.pcss`.
|
|
197
|
-
content: "!border !border-transparent !pli-[
|
|
218
|
+
content: "!border !border-transparent !pli-[4px] !plb-0.5"
|
|
198
219
|
}
|
|
199
220
|
};
|
|
200
221
|
var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box, gridId }) => {
|
|
@@ -209,11 +230,9 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
209
230
|
extensions: [
|
|
210
231
|
extension ?? [],
|
|
211
232
|
preventNewline,
|
|
212
|
-
EditorView.focusChangeEffect.of((
|
|
233
|
+
EditorView.focusChangeEffect.of((state, focusing) => {
|
|
213
234
|
if (!focusing) {
|
|
214
|
-
onBlur?.(
|
|
215
|
-
type: "blur"
|
|
216
|
-
});
|
|
235
|
+
onBlur?.(state.doc.toString());
|
|
217
236
|
}
|
|
218
237
|
return null;
|
|
219
238
|
}),
|
|
@@ -243,7 +262,12 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
243
262
|
return /* @__PURE__ */ React2.createElement("div", {
|
|
244
263
|
ref: parentRef,
|
|
245
264
|
className: editorVariants[variant].root,
|
|
246
|
-
style:
|
|
265
|
+
style: {
|
|
266
|
+
...box,
|
|
267
|
+
...{
|
|
268
|
+
"--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
|
|
269
|
+
}
|
|
270
|
+
},
|
|
247
271
|
...gridId && {
|
|
248
272
|
"data-grid": gridId
|
|
249
273
|
}
|
|
@@ -251,15 +275,21 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
251
275
|
};
|
|
252
276
|
|
|
253
277
|
// packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx
|
|
254
|
-
import React3 from "react";
|
|
255
|
-
var GridCellEditor = ({ extension, getCellContent, __gridScope }) => {
|
|
278
|
+
import React3, { useCallback as useCallback2 } from "react";
|
|
279
|
+
var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
|
|
256
280
|
const { id, editing, setEditing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
|
|
281
|
+
const handleBlur = useCallback2((value) => {
|
|
282
|
+
setEditing(null);
|
|
283
|
+
onBlur?.(value);
|
|
284
|
+
}, [
|
|
285
|
+
onBlur
|
|
286
|
+
]);
|
|
257
287
|
return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
|
|
258
288
|
variant: "grid",
|
|
259
289
|
value: editing.initialContent ?? getCellContent(editing.index),
|
|
260
290
|
autoFocus: true,
|
|
261
291
|
box: editBox,
|
|
262
|
-
onBlur:
|
|
292
|
+
onBlur: handleBlur,
|
|
263
293
|
extension,
|
|
264
294
|
gridId: id
|
|
265
295
|
}) : null;
|
|
@@ -274,6 +304,8 @@ export {
|
|
|
274
304
|
colToA1Notation,
|
|
275
305
|
commentedClassName,
|
|
276
306
|
createGridScope,
|
|
307
|
+
defaultSizeCol,
|
|
308
|
+
defaultSizeRow,
|
|
277
309
|
editorKeys,
|
|
278
310
|
rowToA1Notation,
|
|
279
311
|
useGridContext
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
|
|
4
|
-
"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 DOMAttributes, 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\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'> &\n Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;\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((_, focusing) => {\n if (!focusing) {\n onBlur?.({ type: 'blur' } as any);\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 __gridScope,\n}: GridScopedProps<Pick<CellEditorProps, 'extension'> & { getCellContent: (index: string) => string | undefined }>) => {\n const { id, editing, setEditing, 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={() => setEditing(null)}\n extension={extension}\n gridId={id}\n />\n ) : null;\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,OAAO;AAEP,
|
|
6
|
-
"names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
|
|
4
|
+
"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\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-[4px] !plb-0.5',\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?: EditorBlurHandler };\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={{\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 variant='grid'\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "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", "inlineSize", "React", "useCallback", "GridCellEditor", "extension", "getCellContent", "onBlur", "__gridScope", "id", "editing", "setEditing", "editBox", "useGridContext", "handleBlur", "useCallback", "value", "React", "CellEditor", "variant", "initialContent", "index", "autoFocus", "box", "gridId"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":
|
|
1
|
+
{"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":17302,"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":3475,"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":18468},"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":4169},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":621}},"bytes":8173}}}
|
|
@@ -1,22 +1,18 @@
|
|
|
1
1
|
import { type Extension } from '@codemirror/state';
|
|
2
|
-
import React, { type
|
|
2
|
+
import React, { type KeyboardEvent } from 'react';
|
|
3
3
|
import { type UseTextEditorProps } from '@dxos/react-ui-editor';
|
|
4
4
|
import { type GridEditBox } from '../Grid';
|
|
5
5
|
export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & {
|
|
6
6
|
shift?: boolean;
|
|
7
7
|
};
|
|
8
|
+
export type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;
|
|
9
|
+
export type EditorBlurHandler = (value: string | undefined) => void;
|
|
10
|
+
export type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;
|
|
8
11
|
export type EditorKeysProps = {
|
|
9
|
-
onClose:
|
|
10
|
-
onNav?:
|
|
12
|
+
onClose: EditorKeyHandler;
|
|
13
|
+
onNav?: EditorKeyHandler;
|
|
11
14
|
};
|
|
12
15
|
export declare const editorKeys: ({ onNav, onClose }: EditorKeysProps) => Extension;
|
|
13
|
-
export type CellEditorProps = {
|
|
14
|
-
value?: string;
|
|
15
|
-
extension?: Extension;
|
|
16
|
-
variant?: keyof typeof editorVariants;
|
|
17
|
-
box?: GridEditBox;
|
|
18
|
-
gridId?: string;
|
|
19
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> & Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
|
|
20
16
|
declare const editorVariants: {
|
|
21
17
|
legacy: {
|
|
22
18
|
root: string;
|
|
@@ -29,6 +25,15 @@ declare const editorVariants: {
|
|
|
29
25
|
content: string;
|
|
30
26
|
};
|
|
31
27
|
};
|
|
28
|
+
export type CellEditorProps = {
|
|
29
|
+
value?: string;
|
|
30
|
+
extension?: Extension;
|
|
31
|
+
variant?: keyof typeof editorVariants;
|
|
32
|
+
box?: GridEditBox;
|
|
33
|
+
gridId?: string;
|
|
34
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & {
|
|
35
|
+
onBlur?: EditorBlurHandler;
|
|
36
|
+
};
|
|
32
37
|
export declare const CellEditor: ({ value, extension, autoFocus, onBlur, variant, box, gridId, }: CellEditorProps) => React.JSX.Element;
|
|
33
38
|
export {};
|
|
34
39
|
//# sourceMappingURL=CellEditor.d.ts.map
|
|
@@ -1 +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,
|
|
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,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;CAanB,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,iBAAiB,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,UAAU,mEAQpB,eAAe,sBA2CjB,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type CellEditorProps } from './CellEditor';
|
|
3
3
|
import { type GridScopedProps } from '../Grid';
|
|
4
|
-
export
|
|
4
|
+
export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur'> & {
|
|
5
5
|
getCellContent: (index: string) => string | undefined;
|
|
6
|
-
}
|
|
6
|
+
}>;
|
|
7
|
+
export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
|
|
7
8
|
//# sourceMappingURL=GridCellEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
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,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,6BAsBrG,CAAC"}
|
|
@@ -52,5 +52,5 @@ export declare const Grid: {
|
|
|
52
52
|
export { GridRoot, GridContent, useGridContext, createGridScope };
|
|
53
53
|
export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
|
|
54
54
|
export { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';
|
|
55
|
-
export type { DxGridRange, DxGridAxisMeta, DxAxisResize, DxGridCells, DxGridPlaneRange, DxGridPlaneCells, DxGridCellIndex, DxGridCellValue, DxGridPlane, DxGridPosition, } from '@dxos/lit-grid';
|
|
55
|
+
export type { DxGridRange, DxGridAxisMeta, DxAxisResize, DxGridCells, DxGridPlaneRange, DxGridPlaneCells, DxGridCellIndex, DxGridCellValue, DxGridPlane, DxGridPosition, DxGridAxis, } from '@dxos/lit-grid';
|
|
56
56
|
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -2,6 +2,7 @@ import '@dxos-theme';
|
|
|
2
2
|
import { type StoryObj } from '@storybook/react';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { type GridContentProps, type GridRootProps } from './Grid';
|
|
5
|
+
export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
|
|
5
6
|
type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
|
|
6
7
|
declare const _default: {
|
|
7
8
|
title: string;
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-grid",
|
|
3
|
-
"version": "0.6.14-
|
|
3
|
+
"version": "0.6.14-staging.3e2eaca",
|
|
4
4
|
"description": "React component which manages a `dx-grid` Lit web component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"@radix-ui/react-context": "^1.0.0",
|
|
30
30
|
"@radix-ui/react-popper": "^1.1.2",
|
|
31
31
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/util": "0.6.14-
|
|
34
|
-
"@dxos/
|
|
32
|
+
"@dxos/react-ui-editor": "0.6.14-staging.3e2eaca",
|
|
33
|
+
"@dxos/util": "0.6.14-staging.3e2eaca",
|
|
34
|
+
"@dxos/lit-grid": "0.6.14-staging.3e2eaca"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~18.2.0",
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
"react": "~18.2.0",
|
|
40
40
|
"react-dom": "~18.2.0",
|
|
41
41
|
"vite": "5.4.7",
|
|
42
|
-
"@dxos/random": "0.6.14-
|
|
43
|
-
"@dxos/react-ui": "0.6.14-
|
|
44
|
-
"@dxos/react-ui-searchlist": "0.6.14-
|
|
45
|
-
"@dxos/react-ui-theme": "0.6.14-
|
|
46
|
-
"@dxos/storybook-utils": "0.6.14-
|
|
42
|
+
"@dxos/random": "0.6.14-staging.3e2eaca",
|
|
43
|
+
"@dxos/react-ui": "0.6.14-staging.3e2eaca",
|
|
44
|
+
"@dxos/react-ui-searchlist": "0.6.14-staging.3e2eaca",
|
|
45
|
+
"@dxos/react-ui-theme": "0.6.14-staging.3e2eaca",
|
|
46
|
+
"@dxos/storybook-utils": "0.6.14-staging.3e2eaca"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "~18.2.0",
|
|
50
50
|
"react-dom": "~18.2.0",
|
|
51
|
-
"@dxos/react-ui": "0.6.14-
|
|
52
|
-
"@dxos/react-ui-theme": "0.6.14-
|
|
51
|
+
"@dxos/react-ui": "0.6.14-staging.3e2eaca",
|
|
52
|
+
"@dxos/react-ui-theme": "0.6.14-staging.3e2eaca"
|
|
53
53
|
},
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { completionStatus } from '@codemirror/autocomplete';
|
|
6
6
|
import { type Extension } from '@codemirror/state';
|
|
7
7
|
import { EditorView, keymap } from '@codemirror/view';
|
|
8
|
-
import React, { type
|
|
8
|
+
import React, { type KeyboardEvent } from 'react';
|
|
9
9
|
|
|
10
10
|
import { useThemeContext } from '@dxos/react-ui';
|
|
11
11
|
import {
|
|
@@ -20,9 +20,13 @@ import { type GridEditBox } from '../Grid';
|
|
|
20
20
|
|
|
21
21
|
export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };
|
|
22
22
|
|
|
23
|
+
export type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;
|
|
24
|
+
export type EditorBlurHandler = (value: string | undefined) => void;
|
|
25
|
+
export type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;
|
|
26
|
+
|
|
23
27
|
export type EditorKeysProps = {
|
|
24
|
-
onClose:
|
|
25
|
-
onNav?:
|
|
28
|
+
onClose: EditorKeyHandler;
|
|
29
|
+
onNav?: EditorKeyHandler;
|
|
26
30
|
};
|
|
27
31
|
|
|
28
32
|
// TODO(Zan): Should each consumer be responsible for defining these?
|
|
@@ -108,15 +112,6 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
|
|
|
108
112
|
]);
|
|
109
113
|
};
|
|
110
114
|
|
|
111
|
-
export type CellEditorProps = {
|
|
112
|
-
value?: string;
|
|
113
|
-
extension?: Extension;
|
|
114
|
-
variant?: keyof typeof editorVariants;
|
|
115
|
-
box?: GridEditBox;
|
|
116
|
-
gridId?: string;
|
|
117
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> &
|
|
118
|
-
Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
|
|
119
|
-
|
|
120
115
|
const editorVariants = {
|
|
121
116
|
// TODO(thure): remove when legacy is no longer used.
|
|
122
117
|
legacy: {
|
|
@@ -128,10 +123,18 @@ const editorVariants = {
|
|
|
128
123
|
root: 'absolute z-[1]',
|
|
129
124
|
editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',
|
|
130
125
|
// This must match cell styling in `dx-grid.pcss`.
|
|
131
|
-
content: '!border !border-transparent !pli-[
|
|
126
|
+
content: '!border !border-transparent !pli-[4px] !plb-0.5',
|
|
132
127
|
},
|
|
133
128
|
};
|
|
134
129
|
|
|
130
|
+
export type CellEditorProps = {
|
|
131
|
+
value?: string;
|
|
132
|
+
extension?: Extension;
|
|
133
|
+
variant?: keyof typeof editorVariants;
|
|
134
|
+
box?: GridEditBox;
|
|
135
|
+
gridId?: string;
|
|
136
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };
|
|
137
|
+
|
|
135
138
|
export const CellEditor = ({
|
|
136
139
|
value,
|
|
137
140
|
extension,
|
|
@@ -150,9 +153,9 @@ export const CellEditor = ({
|
|
|
150
153
|
extensions: [
|
|
151
154
|
extension ?? [],
|
|
152
155
|
preventNewline,
|
|
153
|
-
EditorView.focusChangeEffect.of((
|
|
156
|
+
EditorView.focusChangeEffect.of((state, focusing) => {
|
|
154
157
|
if (!focusing) {
|
|
155
|
-
onBlur?.(
|
|
158
|
+
onBlur?.(state.doc.toString());
|
|
156
159
|
}
|
|
157
160
|
return null;
|
|
158
161
|
}),
|
|
@@ -176,7 +179,10 @@ export const CellEditor = ({
|
|
|
176
179
|
<div
|
|
177
180
|
ref={parentRef}
|
|
178
181
|
className={editorVariants[variant].root}
|
|
179
|
-
style={
|
|
182
|
+
style={{
|
|
183
|
+
...box,
|
|
184
|
+
...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
|
|
185
|
+
}}
|
|
180
186
|
{...(gridId && { 'data-grid': gridId })}
|
|
181
187
|
/>
|
|
182
188
|
);
|
|
@@ -2,25 +2,33 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React from 'react';
|
|
5
|
+
import React, { useCallback } from 'react';
|
|
6
6
|
|
|
7
7
|
import { CellEditor, type CellEditorProps } from './CellEditor';
|
|
8
8
|
import { type GridScopedProps, useGridContext } from '../Grid';
|
|
9
9
|
|
|
10
|
-
export
|
|
11
|
-
extension
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
export type GridCellEditorProps = GridScopedProps<
|
|
11
|
+
Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }
|
|
12
|
+
>;
|
|
13
|
+
|
|
14
|
+
export const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {
|
|
15
15
|
const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
|
|
16
16
|
|
|
17
|
+
const handleBlur = useCallback(
|
|
18
|
+
(value?: string) => {
|
|
19
|
+
setEditing(null);
|
|
20
|
+
onBlur?.(value);
|
|
21
|
+
},
|
|
22
|
+
[onBlur],
|
|
23
|
+
);
|
|
24
|
+
|
|
17
25
|
return editing ? (
|
|
18
26
|
<CellEditor
|
|
19
27
|
variant='grid'
|
|
20
28
|
value={editing.initialContent ?? getCellContent(editing.index)}
|
|
21
29
|
autoFocus
|
|
22
30
|
box={editBox}
|
|
23
|
-
onBlur={
|
|
31
|
+
onBlur={handleBlur}
|
|
24
32
|
extension={extension}
|
|
25
33
|
gridId={id}
|
|
26
34
|
/>
|
|
@@ -7,6 +7,7 @@ import '@dxos-theme';
|
|
|
7
7
|
import { type StoryObj } from '@storybook/react';
|
|
8
8
|
import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, useState } from 'react';
|
|
9
9
|
|
|
10
|
+
import { defaultSizeRow } from '@dxos/lit-grid';
|
|
10
11
|
import { faker } from '@dxos/random';
|
|
11
12
|
import { DropdownMenu } from '@dxos/react-ui';
|
|
12
13
|
import { PopoverCombobox } from '@dxos/react-ui-searchlist';
|
|
@@ -14,6 +15,8 @@ import { withTheme } from '@dxos/storybook-utils';
|
|
|
14
15
|
|
|
15
16
|
import { Grid, type GridContentProps, type GridRootProps } from './Grid';
|
|
16
17
|
|
|
18
|
+
export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
|
|
19
|
+
|
|
17
20
|
type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
|
|
18
21
|
|
|
19
22
|
const storybookItems = faker.helpers.uniqueArray(faker.commerce.productName, 16);
|
|
@@ -114,7 +117,7 @@ export const Basic: StoryObj<StoryGridProps> = {
|
|
|
114
117
|
},
|
|
115
118
|
rowDefault: {
|
|
116
119
|
grid: {
|
|
117
|
-
size:
|
|
120
|
+
size: defaultSizeRow,
|
|
118
121
|
resizeable: true,
|
|
119
122
|
},
|
|
120
123
|
},
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -12,12 +12,11 @@ import React, {
|
|
|
12
12
|
forwardRef,
|
|
13
13
|
type PropsWithChildren,
|
|
14
14
|
useCallback,
|
|
15
|
-
|
|
15
|
+
useEffect,
|
|
16
16
|
useState,
|
|
17
17
|
} from 'react';
|
|
18
18
|
|
|
19
19
|
import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
|
|
20
|
-
import { useForwardedRef } from '@dxos/react-ui';
|
|
21
20
|
|
|
22
21
|
type DxGridElement = NaturalDxGrid;
|
|
23
22
|
|
|
@@ -41,7 +40,10 @@ const initialBox = {
|
|
|
41
40
|
blockSize: 0,
|
|
42
41
|
} satisfies GridEditBox;
|
|
43
42
|
|
|
44
|
-
type GridEditing = {
|
|
43
|
+
type GridEditing = {
|
|
44
|
+
index: DxEditRequest['cellIndex'];
|
|
45
|
+
initialContent: DxEditRequest['initialContent'];
|
|
46
|
+
} | null;
|
|
45
47
|
|
|
46
48
|
type GridContextValue = {
|
|
47
49
|
id: string;
|
|
@@ -90,7 +92,9 @@ const GridRoot = ({
|
|
|
90
92
|
setEditBox={setEditBox}
|
|
91
93
|
scope={__gridScope}
|
|
92
94
|
>
|
|
93
|
-
{
|
|
95
|
+
<div className='dx-grid-host' style={{ display: 'contents' }}>
|
|
96
|
+
{children}
|
|
97
|
+
</div>
|
|
94
98
|
</GridProvider>
|
|
95
99
|
);
|
|
96
100
|
};
|
|
@@ -106,22 +110,38 @@ const GRID_CONTENT_NAME = 'GridContent';
|
|
|
106
110
|
|
|
107
111
|
const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {
|
|
108
112
|
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
109
|
-
const dxGrid =
|
|
113
|
+
const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);
|
|
114
|
+
|
|
115
|
+
// TODO(burdon): Can we use useImperativeHandle here?
|
|
116
|
+
// NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
|
|
117
|
+
// a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
|
|
118
|
+
const setDxGrid = useCallback(
|
|
119
|
+
(nextDxGrid: NaturalDxGrid | null) => {
|
|
120
|
+
setDxGridInternal(nextDxGrid);
|
|
121
|
+
if (forwardedRef) {
|
|
122
|
+
if (typeof forwardedRef === 'function') {
|
|
123
|
+
forwardedRef?.(nextDxGrid);
|
|
124
|
+
} else {
|
|
125
|
+
forwardedRef.current = nextDxGrid;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
[forwardedRef, dxGrid],
|
|
130
|
+
);
|
|
110
131
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
dxGrid.
|
|
115
|
-
dxGrid.current.requestUpdate('initialCells');
|
|
132
|
+
useEffect(() => {
|
|
133
|
+
if (dxGrid && props.getCells) {
|
|
134
|
+
dxGrid.getCells = props.getCells;
|
|
135
|
+
dxGrid.requestUpdate('initialCells');
|
|
116
136
|
}
|
|
117
|
-
}, [props.getCells]);
|
|
137
|
+
}, [props.getCells, dxGrid]);
|
|
118
138
|
|
|
119
139
|
const handleEdit = useCallback((event: DxEditRequest) => {
|
|
120
140
|
setEditBox(event.cellBox);
|
|
121
141
|
setEditing({ index: event.cellIndex, initialContent: event.initialContent });
|
|
122
142
|
}, []);
|
|
123
143
|
|
|
124
|
-
return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={
|
|
144
|
+
return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;
|
|
125
145
|
});
|
|
126
146
|
|
|
127
147
|
GridContent.displayName = GRID_CONTENT_NAME;
|
|
@@ -148,4 +168,5 @@ export type {
|
|
|
148
168
|
DxGridCellValue,
|
|
149
169
|
DxGridPlane,
|
|
150
170
|
DxGridPosition,
|
|
171
|
+
DxGridAxis,
|
|
151
172
|
} from '@dxos/lit-grid';
|