@dxos/react-ui-grid 0.8.3 → 0.8.4-main.28f8d3d
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 +24 -14
- 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 +3 -4
- package/dist/types/src/CellEditor/CellEditor.d.ts.map +1 -1
- package/dist/types/src/CellEditor/CellEditor.stories.d.ts +8 -0
- package/dist/types/src/CellEditor/CellEditor.stories.d.ts.map +1 -0
- package/dist/types/src/CellEditor/GridCellEditor.d.ts +3 -3
- package/dist/types/src/CellEditor/GridCellEditor.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.stories.d.ts +1 -1
- package/dist/types/src/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +12 -11
- package/src/CellEditor/CellEditor.stories.tsx +90 -0
- package/src/CellEditor/CellEditor.tsx +23 -10
- package/src/CellEditor/GridCellEditor.tsx +8 -4
- package/src/Grid/Grid.stories.tsx +2 -2
- package/src/Grid/Grid.tsx +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
//
|
|
1
|
+
// src/index.ts
|
|
2
2
|
import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
|
|
3
3
|
|
|
4
|
-
//
|
|
4
|
+
// src/Grid/Grid.tsx
|
|
5
5
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
6
6
|
import "@dxos/lit-grid/dx-grid.pcss";
|
|
7
7
|
import { createComponent } from "@lit/react";
|
|
@@ -111,13 +111,14 @@ var Grid = {
|
|
|
111
111
|
Content: GridContent
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
//
|
|
114
|
+
// src/CellEditor/CellEditor.tsx
|
|
115
115
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
116
116
|
import { completionStatus } from "@codemirror/autocomplete";
|
|
117
117
|
import { EditorView, keymap } from "@codemirror/view";
|
|
118
118
|
import React2 from "react";
|
|
119
119
|
import { useThemeContext } from "@dxos/react-ui";
|
|
120
120
|
import { createBasicExtensions, createThemeExtensions, preventNewline, useTextEditor } from "@dxos/react-ui-editor";
|
|
121
|
+
import { mx } from "@dxos/react-ui-theme";
|
|
121
122
|
var editorKeys = ({ onNav, onClose }) => {
|
|
122
123
|
return keymap.of([
|
|
123
124
|
{
|
|
@@ -219,7 +220,7 @@ var editorKeys = ({ onNav, onClose }) => {
|
|
|
219
220
|
}
|
|
220
221
|
]);
|
|
221
222
|
};
|
|
222
|
-
var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
|
|
223
|
+
var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, slots }) => {
|
|
223
224
|
var _effect = _useSignals2();
|
|
224
225
|
try {
|
|
225
226
|
const { themeMode } = useThemeContext();
|
|
@@ -240,16 +241,19 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
|
|
|
240
241
|
return null;
|
|
241
242
|
}),
|
|
242
243
|
createBasicExtensions({
|
|
243
|
-
lineWrapping:
|
|
244
|
+
lineWrapping: true
|
|
244
245
|
}),
|
|
245
246
|
createThemeExtensions({
|
|
246
247
|
themeMode,
|
|
247
248
|
slots: {
|
|
248
249
|
editor: {
|
|
249
|
-
className: "[
|
|
250
|
+
className: mx("!min-is-full !is-min !max-is-[--dx-grid-cell-editor-max-inline-size] !min-bs-full !max-bs-[--dx-grid-cell-editor-max-block-size]", slots?.editor?.className)
|
|
251
|
+
},
|
|
252
|
+
scroller: {
|
|
253
|
+
className: mx("!overflow-x-hidden !plb-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] !pie-0 !pis-[--dx-grid-cell-editor-padding-inline]", slots?.scroller?.className)
|
|
250
254
|
},
|
|
251
255
|
content: {
|
|
252
|
-
className: "!
|
|
256
|
+
className: mx("!break-normal", slots?.content?.className)
|
|
253
257
|
}
|
|
254
258
|
}
|
|
255
259
|
})
|
|
@@ -259,14 +263,19 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
|
|
|
259
263
|
extension,
|
|
260
264
|
autoFocus,
|
|
261
265
|
value,
|
|
262
|
-
onBlur
|
|
266
|
+
onBlur,
|
|
267
|
+
themeMode,
|
|
268
|
+
slots
|
|
263
269
|
]);
|
|
264
270
|
return /* @__PURE__ */ React2.createElement("div", {
|
|
265
271
|
"data-testid": "grid.cell-editor",
|
|
266
272
|
ref: parentRef,
|
|
267
|
-
className: "absolute z-[1]",
|
|
273
|
+
className: "absolute z-[1] dx-grid__cell-editor",
|
|
268
274
|
style: {
|
|
269
|
-
|
|
275
|
+
insetInlineStart: box?.insetInlineStart ?? "0px",
|
|
276
|
+
insetBlockStart: box?.insetBlockStart ?? "0px",
|
|
277
|
+
minInlineSize: box?.inlineSize ?? "180px",
|
|
278
|
+
minBlockSize: box?.blockSize ?? "30px",
|
|
270
279
|
...{
|
|
271
280
|
"--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
|
|
272
281
|
}
|
|
@@ -280,13 +289,13 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }) => {
|
|
|
280
289
|
}
|
|
281
290
|
};
|
|
282
291
|
|
|
283
|
-
//
|
|
292
|
+
// src/CellEditor/GridCellEditor.tsx
|
|
284
293
|
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
285
294
|
import React3, { useCallback as useCallback2 } from "react";
|
|
286
|
-
var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
|
|
295
|
+
var GridCellEditor = ({ extension, getCellContent, onBlur, slots, __gridScope }) => {
|
|
287
296
|
var _effect = _useSignals3();
|
|
288
297
|
try {
|
|
289
|
-
const { id, editing, setEditing, editBox } = useGridContext("
|
|
298
|
+
const { id, editing, setEditing, editBox } = useGridContext("GridCellEditor", __gridScope);
|
|
290
299
|
const handleBlur = useCallback2((value) => {
|
|
291
300
|
setEditing(null);
|
|
292
301
|
onBlur?.(value);
|
|
@@ -299,7 +308,8 @@ var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
|
|
|
299
308
|
box: editBox,
|
|
300
309
|
onBlur: handleBlur,
|
|
301
310
|
extension,
|
|
302
|
-
gridId: id
|
|
311
|
+
gridId: id,
|
|
312
|
+
slots
|
|
303
313
|
}) : null;
|
|
304
314
|
} finally {
|
|
305
315
|
_effect.f();
|
|
@@ -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 { defaultColSize, defaultRowSize } from '@dxos/lit-grid';\n\nexport * from './Grid';\nexport * from './CellEditor';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n forwardRef,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = {\n index: DxEditRequest['cellIndex'];\n cellElement: DxEditRequest['cellElement'];\n initialContent: DxEditRequest['initialContent'];\n} | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n { id: string } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\nconst GridRoot = ({\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n children,\n __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n <div className='dx-grid-host' style={{ display: 'contents' }}>\n {children}\n </div>\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NaturalDxGrid['getCells'];\n activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us\n // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n const setDxGrid = useCallback(\n (nextDxGrid: NaturalDxGrid | null) => {\n setDxGridInternal(nextDxGrid);\n if (forwardedRef) {\n if (typeof forwardedRef === 'function') {\n forwardedRef?.(nextDxGrid);\n } else {\n forwardedRef.current = nextDxGrid;\n }\n }\n },\n [forwardedRef, dxGrid],\n );\n\n useEffect(() => {\n if (dxGrid && props.getCells) {\n dxGrid.getCells = props.getCells;\n dxGrid.requestUpdate('initialCells');\n }\n }, [props.getCells, dxGrid]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, cellElement: event.cellElement, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\n//\n// Fragments\n//\n\n// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.\n// These are offset by 1px to avoid double borders in planks.\nconst gridSeparatorInlineEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-subduedSeparator';\nconst gridSeparatorBlockEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-subduedSeparator';\n\n//\n// Exports\n//\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport {\n colToA1Notation,\n rowToA1Notation,\n closestCell,\n commentedClassName,\n toPlaneCellIndex,\n parseCellIndex,\n cellQuery,\n} from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridPlaneCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n DxGridPlanePosition,\n DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n type UseTextEditorProps,\n createBasicExtensions,\n createThemeExtensions,\n preventNewline,\n useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;\nexport type EditorBlurHandler = (value: string | undefined) => void;\nexport type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;\n\nexport type EditorKeysProps = {\n onClose: EditorKeyHandler;\n onNav?: EditorKeyHandler;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extension?: Extension;\n box?: GridEditBox;\n gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };\n\nexport const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extension ?? [],\n preventNewline,\n EditorView.focusChangeEffect.of((state, focusing) => {\n if (!focusing) {\n onBlur?.(state.doc.toString());\n }\n return null;\n }),\n createBasicExtensions({ lineWrapping: false }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n },\n content: {\n className:\n '!border !border-transparent !pli-[var(--dx-grid-cell-padding-inline)] !plb-[var(--dx-grid-cell-padding-block)]',\n },\n },\n }),\n ],\n };\n }, [extension, autoFocus, value, onBlur]);\n\n return (\n <div\n data-testid='grid.cell-editor'\n ref={parentRef}\n className='absolute z-[1]'\n style={{\n ...box,\n ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },\n }}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext, type DxGridCellIndex } from '../Grid';\n\nexport type GridCellEditorProps = GridScopedProps<\n Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: DxGridCellIndex) => string | undefined }\n>;\n\nexport const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {\n const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n const handleBlur = useCallback(\n (value?: string) => {\n setEditing(null);\n onBlur?.(value);\n },\n [onBlur],\n );\n\n return editing ? (\n <CellEditor\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={handleBlur}\n extension={extension}\n gridId={id}\n />\n ) : null;\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,gBAAgBC,sBAAsB;;;;ACA/C,OAAO;AAEP,
|
|
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", "
|
|
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 { type EventName, createComponent } from '@lit/react';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n type PropsWithChildren,\n forwardRef,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = {\n index: DxEditRequest['cellIndex'];\n cellElement: DxEditRequest['cellElement'];\n initialContent: DxEditRequest['initialContent'];\n} | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n { id: string } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\nconst GridRoot = ({\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n children,\n __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n <div className='dx-grid-host' style={{ display: 'contents' }}>\n {children}\n </div>\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NaturalDxGrid['getCells'];\n activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us\n // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n const setDxGrid = useCallback(\n (nextDxGrid: NaturalDxGrid | null) => {\n setDxGridInternal(nextDxGrid);\n if (forwardedRef) {\n if (typeof forwardedRef === 'function') {\n forwardedRef?.(nextDxGrid);\n } else {\n forwardedRef.current = nextDxGrid;\n }\n }\n },\n [forwardedRef, dxGrid],\n );\n\n useEffect(() => {\n if (dxGrid && props.getCells) {\n dxGrid.getCells = props.getCells;\n dxGrid.requestUpdate('initialCells');\n }\n }, [props.getCells, dxGrid]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, cellElement: event.cellElement, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\n//\n// Fragments\n//\n\n// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.\n// These are offset by 1px to avoid double borders in planks.\nconst gridSeparatorInlineEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-subduedSeparator';\nconst gridSeparatorBlockEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-subduedSeparator';\n\n//\n// Exports\n//\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport {\n colToA1Notation,\n rowToA1Notation,\n closestCell,\n commentedClassName,\n toPlaneCellIndex,\n parseCellIndex,\n cellQuery,\n} from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridPlaneCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n DxGridPlanePosition,\n DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n type ThemeExtensionsOptions,\n type UseTextEditorProps,\n createBasicExtensions,\n createThemeExtensions,\n preventNewline,\n useTextEditor,\n} from '@dxos/react-ui-editor';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;\nexport type EditorBlurHandler = (value: string | undefined) => void;\nexport type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;\n\nexport type EditorKeysProps = {\n onClose: EditorKeyHandler;\n onNav?: EditorKeyHandler;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extension?: Extension;\n box?: GridEditBox;\n gridId?: string;\n onBlur?: EditorBlurHandler;\n} & Pick<UseTextEditorProps, 'autoFocus'> &\n Pick<ThemeExtensionsOptions, 'slots'>;\n\nexport const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, slots }: 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: true }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: mx(\n '!min-is-full !is-min !max-is-[--dx-grid-cell-editor-max-inline-size] !min-bs-full !max-bs-[--dx-grid-cell-editor-max-block-size]',\n slots?.editor?.className,\n ),\n },\n scroller: {\n className: mx(\n '!overflow-x-hidden !plb-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] !pie-0 !pis-[--dx-grid-cell-editor-padding-inline]',\n slots?.scroller?.className,\n ),\n },\n content: { className: mx('!break-normal', slots?.content?.className) },\n },\n }),\n ],\n };\n }, [extension, autoFocus, value, onBlur, themeMode, slots]);\n\n return (\n <div\n data-testid='grid.cell-editor'\n ref={parentRef}\n className='absolute z-[1] dx-grid__cell-editor'\n style={{\n insetInlineStart: box?.insetInlineStart ?? '0px',\n insetBlockStart: box?.insetBlockStart ?? '0px',\n minInlineSize: box?.inlineSize ?? '180px',\n minBlockSize: box?.blockSize ?? '30px',\n ...{ '--dx-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 { type DxGridCellIndex, type GridScopedProps, useGridContext } from '../Grid';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\n\nexport type GridCellEditorProps = GridScopedProps<\n Pick<CellEditorProps, 'extension' | 'onBlur' | 'slots'> & {\n getCellContent: (index: DxGridCellIndex) => string | undefined;\n }\n>;\n\nexport const GridCellEditor = ({ extension, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {\n const { id, editing, setEditing, editBox } = useGridContext('GridCellEditor', __gridScope);\n\n const handleBlur = useCallback(\n (value?: string) => {\n setEditing(null);\n onBlur?.(value);\n },\n [onBlur],\n );\n\n return editing ? (\n <CellEditor\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={handleBlur}\n extension={extension}\n gridId={id}\n slots={slots}\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", "mx", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "CellEditor", "extension", "autoFocus", "onBlur", "box", "gridId", "slots", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "focusing", "createBasicExtensions", "lineWrapping", "createThemeExtensions", "className", "mx", "scroller", "content", "React", "div", "data-testid", "ref", "style", "insetInlineStart", "insetBlockStart", "minInlineSize", "inlineSize", "minBlockSize", "blockSize", "React", "useCallback", "GridCellEditor", "extension", "getCellContent", "onBlur", "slots", "__gridScope", "id", "editing", "setEditing", "editBox", "useGridContext", "handleBlur", "useCallback", "value", "React", "CellEditor", "initialContent", "index", "autoFocus", "box", "gridId"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"
|
|
1
|
+
{"inputs":{"src/Grid/Grid.tsx":{"bytes":16989,"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"},"src/Grid/index.ts":{"bytes":449,"imports":[{"path":"src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/CellEditor/CellEditor.tsx":{"bytes":18224,"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},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/CellEditor/GridCellEditor.tsx":{"bytes":3727,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Grid/index.ts","kind":"import-statement","original":"../Grid"},{"path":"src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"}],"format":"esm"},"src/CellEditor/index.ts":{"bytes":575,"imports":[{"path":"src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"src/index.ts":{"bytes":791,"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":20011},"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":"@dxos/react-ui-theme","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":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":65},"src/Grid/Grid.tsx":{"bytesInOutput":3687},"src/Grid/index.ts":{"bytesInOutput":0},"src/CellEditor/CellEditor.tsx":{"bytesInOutput":4685},"src/CellEditor/index.ts":{"bytesInOutput":0},"src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":802}},"bytes":9726}}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type Extension } from '@codemirror/state';
|
|
2
2
|
import React, { type KeyboardEvent } from 'react';
|
|
3
|
-
import { type UseTextEditorProps } from '@dxos/react-ui-editor';
|
|
3
|
+
import { type ThemeExtensionsOptions, 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;
|
|
@@ -18,8 +18,7 @@ export type CellEditorProps = {
|
|
|
18
18
|
extension?: Extension;
|
|
19
19
|
box?: GridEditBox;
|
|
20
20
|
gridId?: string;
|
|
21
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> & {
|
|
22
21
|
onBlur?: EditorBlurHandler;
|
|
23
|
-
}
|
|
24
|
-
export declare const CellEditor: ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => React.JSX.Element;
|
|
22
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & Pick<ThemeExtensionsOptions, 'slots'>;
|
|
23
|
+
export declare const CellEditor: ({ value, extension, autoFocus, onBlur, box, gridId, slots }: CellEditorProps) => React.JSX.Element;
|
|
25
24
|
//# 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,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;
|
|
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,sBAAsB,EAC3B,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAG/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;IAChB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GACvC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,UAAU,GAAI,6DAA6D,eAAe,sBAsDtG,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import '@dxos-theme';
|
|
2
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
3
|
+
import { type CellEditorProps } from './CellEditor';
|
|
4
|
+
declare const meta: Meta<CellEditorProps>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<CellEditorProps>;
|
|
7
|
+
export declare const Default: Story;
|
|
8
|
+
//# sourceMappingURL=CellEditor.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKjE,OAAO,EAAc,KAAK,eAAe,EAAmC,MAAM,cAAc,CAAC;AA2DjG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type DxGridCellIndex, type GridScopedProps } from '../Grid';
|
|
2
3
|
import { type CellEditorProps } from './CellEditor';
|
|
3
|
-
|
|
4
|
-
export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur'> & {
|
|
4
|
+
export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur' | 'slots'> & {
|
|
5
5
|
getCellContent: (index: DxGridCellIndex) => string | undefined;
|
|
6
6
|
}>;
|
|
7
|
-
export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
|
|
7
|
+
export declare const GridCellEditor: ({ extension, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
|
|
8
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,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,
|
|
1
|
+
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AAErF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAChE,CACF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,2DAA2D,mBAAmB,6BAsB5G,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAErC,OAAO,
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import '@dxos-theme';
|
|
2
|
-
import { type Meta, type StoryObj } from '@storybook/react';
|
|
2
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
3
3
|
import { type GridContentProps, type GridRootProps } from './Grid';
|
|
4
4
|
type GridStoryProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
|
|
5
5
|
declare const meta: Meta<GridStoryProps>;
|
|
@@ -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,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,
|
|
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,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AASjE,OAAO,EAAQ,KAAK,gBAAgB,EAAoB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI3F,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;AAoFhF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAK9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KA4CnB,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC"}
|