@dxos/react-ui-grid 0.8.2-staging.7ac8446 → 0.8.2
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 +151 -123
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/CellEditor/CellEditor.d.ts.map +1 -1
- package/dist/types/src/CellEditor/GridCellEditor.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.d.ts +4 -1
- package/dist/types/src/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +12 -11
- package/src/Grid/Grid.stories.tsx +4 -4
- package/src/Grid/Grid.tsx +18 -3
- package/src/index.ts +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// packages/ui/react-ui-grid/src/index.ts
|
|
2
|
-
import {
|
|
2
|
+
import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
|
|
3
3
|
|
|
4
4
|
// packages/ui/react-ui-grid/src/Grid/Grid.tsx
|
|
5
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
5
6
|
import "@dxos/lit-grid/dx-grid.pcss";
|
|
6
7
|
import { createComponent } from "@lit/react";
|
|
7
8
|
import { createContextScope } from "@radix-ui/react-context";
|
|
@@ -29,75 +30,89 @@ var GRID_NAME = "Grid";
|
|
|
29
30
|
var [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
|
|
30
31
|
var [GridProvider, useGridContext] = createGridContext(GRID_NAME);
|
|
31
32
|
var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope }) => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
33
|
+
var _effect = _useSignals();
|
|
34
|
+
try {
|
|
35
|
+
const [editing = null, setEditing] = useControllableState({
|
|
36
|
+
prop: propsEditing,
|
|
37
|
+
defaultProp: defaultEditing,
|
|
38
|
+
onChange: onEditingChange
|
|
39
|
+
});
|
|
40
|
+
const [editBox, setEditBox] = useState(initialBox);
|
|
41
|
+
return /* @__PURE__ */ React.createElement(GridProvider, {
|
|
42
|
+
id,
|
|
43
|
+
editing,
|
|
44
|
+
setEditing,
|
|
45
|
+
editBox,
|
|
46
|
+
setEditBox,
|
|
47
|
+
scope: __gridScope
|
|
48
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
49
|
+
className: "dx-grid-host",
|
|
50
|
+
style: {
|
|
51
|
+
display: "contents"
|
|
52
|
+
}
|
|
53
|
+
}, children));
|
|
54
|
+
} finally {
|
|
55
|
+
_effect.f();
|
|
56
|
+
}
|
|
51
57
|
};
|
|
52
58
|
GridRoot.displayName = GRID_NAME;
|
|
53
59
|
var GRID_CONTENT_NAME = "GridContent";
|
|
54
60
|
var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
setDxGridInternal(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
var _effect = _useSignals();
|
|
62
|
+
try {
|
|
63
|
+
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
64
|
+
const [dxGrid, setDxGridInternal] = useState(null);
|
|
65
|
+
const setDxGrid = useCallback((nextDxGrid) => {
|
|
66
|
+
setDxGridInternal(nextDxGrid);
|
|
67
|
+
if (forwardedRef) {
|
|
68
|
+
if (typeof forwardedRef === "function") {
|
|
69
|
+
forwardedRef?.(nextDxGrid);
|
|
70
|
+
} else {
|
|
71
|
+
forwardedRef.current = nextDxGrid;
|
|
72
|
+
}
|
|
64
73
|
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
74
|
+
}, [
|
|
75
|
+
forwardedRef,
|
|
76
|
+
dxGrid
|
|
77
|
+
]);
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (dxGrid && props.getCells) {
|
|
80
|
+
dxGrid.getCells = props.getCells;
|
|
81
|
+
dxGrid.requestUpdate("initialCells");
|
|
82
|
+
}
|
|
83
|
+
}, [
|
|
84
|
+
props.getCells,
|
|
85
|
+
dxGrid
|
|
86
|
+
]);
|
|
87
|
+
const handleEdit = useCallback((event) => {
|
|
88
|
+
setEditBox(event.cellBox);
|
|
89
|
+
setEditing({
|
|
90
|
+
index: event.cellIndex,
|
|
91
|
+
cellElement: event.cellElement,
|
|
92
|
+
initialContent: event.initialContent
|
|
93
|
+
});
|
|
94
|
+
}, []);
|
|
95
|
+
return /* @__PURE__ */ React.createElement(DxGrid, {
|
|
96
|
+
...props,
|
|
97
|
+
gridId: id,
|
|
98
|
+
mode: editing ? "edit" : "browse",
|
|
99
|
+
onEdit: handleEdit,
|
|
100
|
+
ref: setDxGrid
|
|
84
101
|
});
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
gridId: id,
|
|
89
|
-
mode: editing ? "edit" : "browse",
|
|
90
|
-
onEdit: handleEdit,
|
|
91
|
-
ref: setDxGrid
|
|
92
|
-
});
|
|
102
|
+
} finally {
|
|
103
|
+
_effect.f();
|
|
104
|
+
}
|
|
93
105
|
});
|
|
94
106
|
GridContent.displayName = GRID_CONTENT_NAME;
|
|
107
|
+
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-separator";
|
|
108
|
+
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-separator";
|
|
95
109
|
var Grid = {
|
|
96
110
|
Root: GridRoot,
|
|
97
111
|
Content: GridContent
|
|
98
112
|
};
|
|
99
113
|
|
|
100
114
|
// packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx
|
|
115
|
+
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
101
116
|
import { completionStatus } from "@codemirror/autocomplete";
|
|
102
117
|
import { EditorView, keymap } from "@codemirror/view";
|
|
103
118
|
import React2 from "react";
|
|
@@ -205,79 +220,90 @@ var editorKeys = ({ onNav, onClose }) => {
|
|
|
205
220
|
]);
|
|
206
221
|
};
|
|
207
222
|
var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
223
|
+
var _effect = _useSignals2();
|
|
224
|
+
try {
|
|
225
|
+
const { themeMode } = useThemeContext();
|
|
226
|
+
const { parentRef } = useTextEditor(() => {
|
|
227
|
+
return {
|
|
228
|
+
autoFocus,
|
|
229
|
+
initialValue: value,
|
|
230
|
+
selection: {
|
|
231
|
+
anchor: value?.length ?? 0
|
|
232
|
+
},
|
|
233
|
+
extensions: [
|
|
234
|
+
extension ?? [],
|
|
235
|
+
preventNewline,
|
|
236
|
+
EditorView.focusChangeEffect.of((state, focusing) => {
|
|
237
|
+
if (!focusing) {
|
|
238
|
+
onBlur?.(state.doc.toString());
|
|
239
|
+
}
|
|
240
|
+
return null;
|
|
241
|
+
}),
|
|
242
|
+
createBasicExtensions({
|
|
243
|
+
lineWrapping: false
|
|
244
|
+
}),
|
|
245
|
+
createThemeExtensions({
|
|
246
|
+
themeMode,
|
|
247
|
+
slots: {
|
|
248
|
+
editor: {
|
|
249
|
+
className: "[&>.cm-scroller]:scrollbar-none tabular-nums"
|
|
250
|
+
},
|
|
251
|
+
content: {
|
|
252
|
+
className: "!border !border-transparent !pli-[var(--dx-grid-cell-padding-inline)] !plb-[var(--dx-grid-cell-padding-block)]"
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
})
|
|
256
|
+
]
|
|
257
|
+
};
|
|
258
|
+
}, [
|
|
259
|
+
extension,
|
|
211
260
|
autoFocus,
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
261
|
+
value,
|
|
262
|
+
onBlur
|
|
263
|
+
]);
|
|
264
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
265
|
+
"data-testid": "grid.cell-editor",
|
|
266
|
+
ref: parentRef,
|
|
267
|
+
className: "absolute z-[1]",
|
|
268
|
+
style: {
|
|
269
|
+
...box,
|
|
270
|
+
...{
|
|
271
|
+
"--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
|
|
272
|
+
}
|
|
215
273
|
},
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
preventNewline,
|
|
219
|
-
EditorView.focusChangeEffect.of((state, focusing) => {
|
|
220
|
-
if (!focusing) {
|
|
221
|
-
onBlur?.(state.doc.toString());
|
|
222
|
-
}
|
|
223
|
-
return null;
|
|
224
|
-
}),
|
|
225
|
-
createBasicExtensions({
|
|
226
|
-
lineWrapping: false
|
|
227
|
-
}),
|
|
228
|
-
createThemeExtensions({
|
|
229
|
-
themeMode,
|
|
230
|
-
slots: {
|
|
231
|
-
editor: {
|
|
232
|
-
className: "[&>.cm-scroller]:scrollbar-none tabular-nums"
|
|
233
|
-
},
|
|
234
|
-
content: {
|
|
235
|
-
className: "!border !border-transparent !pli-[var(--dx-grid-cell-padding-inline)] !plb-[var(--dx-grid-cell-padding-block)]"
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
})
|
|
239
|
-
]
|
|
240
|
-
};
|
|
241
|
-
}, [
|
|
242
|
-
extension,
|
|
243
|
-
autoFocus,
|
|
244
|
-
value,
|
|
245
|
-
onBlur
|
|
246
|
-
]);
|
|
247
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
248
|
-
"data-testid": "grid.cell-editor",
|
|
249
|
-
ref: parentRef,
|
|
250
|
-
className: "absolute z-[1]",
|
|
251
|
-
style: {
|
|
252
|
-
...box,
|
|
253
|
-
...{
|
|
254
|
-
"--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
|
|
274
|
+
...gridId && {
|
|
275
|
+
"data-grid": gridId
|
|
255
276
|
}
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
});
|
|
277
|
+
});
|
|
278
|
+
} finally {
|
|
279
|
+
_effect.f();
|
|
280
|
+
}
|
|
261
281
|
};
|
|
262
282
|
|
|
263
283
|
// packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx
|
|
284
|
+
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
264
285
|
import React3, { useCallback as useCallback2 } from "react";
|
|
265
286
|
var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
setEditing(
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
287
|
+
var _effect = _useSignals3();
|
|
288
|
+
try {
|
|
289
|
+
const { id, editing, setEditing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
|
|
290
|
+
const handleBlur = useCallback2((value) => {
|
|
291
|
+
setEditing(null);
|
|
292
|
+
onBlur?.(value);
|
|
293
|
+
}, [
|
|
294
|
+
onBlur
|
|
295
|
+
]);
|
|
296
|
+
return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
|
|
297
|
+
value: editing.initialContent ?? getCellContent(editing.index),
|
|
298
|
+
autoFocus: true,
|
|
299
|
+
box: editBox,
|
|
300
|
+
onBlur: handleBlur,
|
|
301
|
+
extension,
|
|
302
|
+
gridId: id
|
|
303
|
+
}) : null;
|
|
304
|
+
} finally {
|
|
305
|
+
_effect.f();
|
|
306
|
+
}
|
|
281
307
|
};
|
|
282
308
|
export {
|
|
283
309
|
CellEditor,
|
|
@@ -290,9 +316,11 @@ export {
|
|
|
290
316
|
colToA1Notation,
|
|
291
317
|
commentedClassName,
|
|
292
318
|
createGridScope,
|
|
293
|
-
|
|
294
|
-
|
|
319
|
+
defaultColSize,
|
|
320
|
+
defaultRowSize,
|
|
295
321
|
editorKeys,
|
|
322
|
+
gridSeparatorBlockEnd,
|
|
323
|
+
gridSeparatorInlineEnd,
|
|
296
324
|
parseCellIndex,
|
|
297
325
|
rowToA1Notation,
|
|
298
326
|
toPlaneCellIndex,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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?: 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 {\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"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,gBAAgBC,sBAAsB
|
|
6
|
-
"names": ["
|
|
4
|
+
"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-separator';\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-separator';\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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"]
|
|
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":16972,"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":18851},"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":3673},"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":9217}}}
|
|
@@ -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,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,
|
|
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"}
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -12,6 +12,7 @@ declare const DxGrid: import("@lit/react").ReactWebComponent<NaturalDxGrid, {
|
|
|
12
12
|
type GridEditBox = DxEditRequest['cellBox'];
|
|
13
13
|
type GridEditing = {
|
|
14
14
|
index: DxEditRequest['cellIndex'];
|
|
15
|
+
cellElement: DxEditRequest['cellElement'];
|
|
15
16
|
initialContent: DxEditRequest['initialContent'];
|
|
16
17
|
} | null;
|
|
17
18
|
type GridContextValue = {
|
|
@@ -42,6 +43,8 @@ type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
|
|
|
42
43
|
activeRefs?: string;
|
|
43
44
|
};
|
|
44
45
|
declare const GridContent: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
|
|
46
|
+
declare const 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-separator";
|
|
47
|
+
declare const 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-separator";
|
|
45
48
|
export declare const Grid: {
|
|
46
49
|
Root: {
|
|
47
50
|
({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
|
|
@@ -49,7 +52,7 @@ export declare const Grid: {
|
|
|
49
52
|
};
|
|
50
53
|
Content: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
|
|
51
54
|
};
|
|
52
|
-
export { GridRoot, GridContent, useGridContext, createGridScope };
|
|
55
|
+
export { GridRoot, GridContent, useGridContext, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd };
|
|
53
56
|
export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
|
|
54
57
|
export { colToA1Notation, rowToA1Notation, closestCell, commentedClassName, toPlaneCellIndex, parseCellIndex, cellQuery, } from '@dxos/lit-grid';
|
|
55
58
|
export type { DxGridRange, DxGridAxisMeta, DxAxisResize, DxGridCells, DxGridPlaneRange, DxGridPlaneCells, DxGridCellIndex, DxGridPlaneCellIndex, DxGridCellValue, DxGridPlane, DxGridPosition, DxGridPlanePosition, DxGridAxis, } from '@dxos/lit-grid';
|
|
@@ -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;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,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,QAAA,MAAM,WAAW,
|
|
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,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,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,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,QAAA,MAAM,WAAW,sHAiCf,CAAC;AAUH,QAAA,MAAM,sBAAsB,kLACqJ,CAAC;AAClL,QAAA,MAAM,qBAAqB,uLAC2J,CAAC;AAMvL,eAAO,MAAM,IAAI;;iGApFd,eAAe,CAAC,aAAa,CAAC;;;;CAuFhC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,CAAC;AAEjH,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAE1G,OAAO,EACL,eAAe,EACf,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,SAAS,GACV,MAAM,gBAAgB,CAAC;AAExB,YAAY,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,UAAU,GACX,MAAM,gBAAgB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-grid",
|
|
3
|
-
"version": "0.8.2
|
|
3
|
+
"version": "0.8.2",
|
|
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",
|
|
@@ -27,12 +27,13 @@
|
|
|
27
27
|
"@codemirror/state": "^6.4.1",
|
|
28
28
|
"@codemirror/view": "^6.34.1",
|
|
29
29
|
"@lit/react": "^1.0.5",
|
|
30
|
+
"@preact-signals/safe-react": "^0.9.0",
|
|
30
31
|
"@radix-ui/react-context": "1.1.1",
|
|
31
32
|
"@radix-ui/react-popper": "1.2.2",
|
|
32
33
|
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
33
|
-
"@dxos/lit-grid": "0.8.2
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/
|
|
34
|
+
"@dxos/lit-grid": "0.8.2",
|
|
35
|
+
"@dxos/react-ui-editor": "0.8.2",
|
|
36
|
+
"@dxos/util": "0.8.2"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
39
|
"@types/react": "~18.2.0",
|
|
@@ -40,17 +41,17 @@
|
|
|
40
41
|
"react": "~18.2.0",
|
|
41
42
|
"react-dom": "~18.2.0",
|
|
42
43
|
"vite": "5.4.7",
|
|
43
|
-
"@dxos/react-ui": "0.8.2
|
|
44
|
-
"@dxos/random": "0.8.2
|
|
45
|
-
"@dxos/react-ui-searchlist": "0.8.2
|
|
46
|
-
"@dxos/react-ui-theme": "0.8.2
|
|
47
|
-
"@dxos/storybook-utils": "0.8.2
|
|
44
|
+
"@dxos/react-ui": "0.8.2",
|
|
45
|
+
"@dxos/random": "0.8.2",
|
|
46
|
+
"@dxos/react-ui-searchlist": "0.8.2",
|
|
47
|
+
"@dxos/react-ui-theme": "0.8.2",
|
|
48
|
+
"@dxos/storybook-utils": "0.8.2"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
50
51
|
"react": "~18.2.0",
|
|
51
52
|
"react-dom": "~18.2.0",
|
|
52
|
-
"@dxos/react-ui": "0.8.2
|
|
53
|
-
"@dxos/react-ui-theme": "0.8.2
|
|
53
|
+
"@dxos/react-ui": "0.8.2",
|
|
54
|
+
"@dxos/react-ui-theme": "0.8.2"
|
|
54
55
|
},
|
|
55
56
|
"publishConfig": {
|
|
56
57
|
"access": "public"
|
|
@@ -7,7 +7,7 @@ import '@dxos-theme';
|
|
|
7
7
|
import { type Meta, type StoryObj } from '@storybook/react';
|
|
8
8
|
import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, useState } from 'react';
|
|
9
9
|
|
|
10
|
-
import {
|
|
10
|
+
import { defaultRowSize } from '@dxos/lit-grid';
|
|
11
11
|
import { faker } from '@dxos/random';
|
|
12
12
|
import { DropdownMenu } from '@dxos/react-ui';
|
|
13
13
|
import { PopoverCombobox, type PopoverComboboxRootProps } from '@dxos/react-ui-searchlist';
|
|
@@ -27,7 +27,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
|
|
|
27
27
|
const [editing, setEditing] = useState<GridEditing>(null);
|
|
28
28
|
const handleEditingChange = useCallback<NonNullable<GridRootProps['onEditingChange']>>((event) => {
|
|
29
29
|
// TODO(burdon): Not working?
|
|
30
|
-
setEditing(event ? { index: event.index, initialContent: '' } : null);
|
|
30
|
+
setEditing(event ? { index: event.index, initialContent: '', cellElement: event.cellElement } : null);
|
|
31
31
|
}, []);
|
|
32
32
|
|
|
33
33
|
// Multiselect
|
|
@@ -123,7 +123,7 @@ export const Basic: Story = {
|
|
|
123
123
|
},
|
|
124
124
|
rowDefault: {
|
|
125
125
|
grid: {
|
|
126
|
-
size:
|
|
126
|
+
size: defaultRowSize,
|
|
127
127
|
resizeable: true,
|
|
128
128
|
},
|
|
129
129
|
},
|
|
@@ -170,7 +170,7 @@ export const SingleColumn: Story = {
|
|
|
170
170
|
},
|
|
171
171
|
rowDefault: {
|
|
172
172
|
grid: {
|
|
173
|
-
size:
|
|
173
|
+
size: defaultRowSize,
|
|
174
174
|
resizeable: false,
|
|
175
175
|
},
|
|
176
176
|
},
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -42,6 +42,7 @@ const initialBox = {
|
|
|
42
42
|
|
|
43
43
|
type GridEditing = {
|
|
44
44
|
index: DxEditRequest['cellIndex'];
|
|
45
|
+
cellElement: DxEditRequest['cellElement'];
|
|
45
46
|
initialContent: DxEditRequest['initialContent'];
|
|
46
47
|
} | null;
|
|
47
48
|
|
|
@@ -112,7 +113,6 @@ const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>
|
|
|
112
113
|
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
113
114
|
const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);
|
|
114
115
|
|
|
115
|
-
// TODO(burdon): Can we use useImperativeHandle here?
|
|
116
116
|
// NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
|
|
117
117
|
// a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
|
|
118
118
|
const setDxGrid = useCallback(
|
|
@@ -138,7 +138,7 @@ const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>
|
|
|
138
138
|
|
|
139
139
|
const handleEdit = useCallback((event: DxEditRequest) => {
|
|
140
140
|
setEditBox(event.cellBox);
|
|
141
|
-
setEditing({ index: event.cellIndex, initialContent: event.initialContent });
|
|
141
|
+
setEditing({ index: event.cellIndex, cellElement: event.cellElement, initialContent: event.initialContent });
|
|
142
142
|
}, []);
|
|
143
143
|
|
|
144
144
|
return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;
|
|
@@ -146,12 +146,27 @@ const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>
|
|
|
146
146
|
|
|
147
147
|
GridContent.displayName = GRID_CONTENT_NAME;
|
|
148
148
|
|
|
149
|
+
//
|
|
150
|
+
// Fragments
|
|
151
|
+
//
|
|
152
|
+
|
|
153
|
+
// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
|
|
154
|
+
// These are offset by 1px to avoid double borders in planks.
|
|
155
|
+
const gridSeparatorInlineEnd =
|
|
156
|
+
'[&>.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-separator';
|
|
157
|
+
const gridSeparatorBlockEnd =
|
|
158
|
+
'[&>.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-separator';
|
|
159
|
+
|
|
160
|
+
//
|
|
161
|
+
// Exports
|
|
162
|
+
//
|
|
163
|
+
|
|
149
164
|
export const Grid = {
|
|
150
165
|
Root: GridRoot,
|
|
151
166
|
Content: GridContent,
|
|
152
167
|
};
|
|
153
168
|
|
|
154
|
-
export { GridRoot, GridContent, useGridContext, createGridScope };
|
|
169
|
+
export { GridRoot, GridContent, useGridContext, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd };
|
|
155
170
|
|
|
156
171
|
export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
|
|
157
172
|
|