@dxos/react-ui-grid 0.6.14-staging.54a8bab → 0.6.14-staging.8758a12
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 +15 -4
- 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 +14 -11
- package/dist/types/src/CellEditor/CellEditor.d.ts.map +1 -1
- package/dist/types/src/CellEditor/GridCellEditor.d.ts +3 -2
- package/dist/types/src/CellEditor/GridCellEditor.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.d.ts.map +1 -1
- package/package.json +11 -11
- package/src/CellEditor/CellEditor.tsx +19 -11
- package/src/CellEditor/GridCellEditor.tsx +15 -10
- package/src/Grid/Grid.tsx +7 -2
|
@@ -259,7 +259,12 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
259
259
|
return /* @__PURE__ */ React2.createElement("div", {
|
|
260
260
|
ref: parentRef,
|
|
261
261
|
className: editorVariants[variant].root,
|
|
262
|
-
style:
|
|
262
|
+
style: {
|
|
263
|
+
...box,
|
|
264
|
+
...{
|
|
265
|
+
"--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
|
|
266
|
+
}
|
|
267
|
+
},
|
|
263
268
|
...gridId && {
|
|
264
269
|
"data-grid": gridId
|
|
265
270
|
}
|
|
@@ -267,15 +272,21 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
267
272
|
};
|
|
268
273
|
|
|
269
274
|
// packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx
|
|
270
|
-
import React3 from "react";
|
|
275
|
+
import React3, { useCallback as useCallback2 } from "react";
|
|
271
276
|
var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
|
|
272
|
-
const { id, editing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
|
|
277
|
+
const { id, editing, setEditing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
|
|
278
|
+
const handleBlur = useCallback2((value) => {
|
|
279
|
+
setEditing(null);
|
|
280
|
+
onBlur?.(value);
|
|
281
|
+
}, [
|
|
282
|
+
onBlur
|
|
283
|
+
]);
|
|
273
284
|
return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
|
|
274
285
|
variant: "grid",
|
|
275
286
|
value: editing.initialContent ?? getCellContent(editing.index),
|
|
276
287
|
autoFocus: true,
|
|
277
288
|
box: editBox,
|
|
278
|
-
onBlur,
|
|
289
|
+
onBlur: handleBlur,
|
|
279
290
|
extension,
|
|
280
291
|
gridId: id
|
|
281
292
|
}) : null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n forwardRef,\n type PropsWithChildren,\n useCallback,\n 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 = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n { id: string } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\nconst GridRoot = ({\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n children,\n __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n <div className='dx-grid-host' style={{ display: 'contents' }}>\n {children}\n </div>\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NonNullable<NaturalDxGrid['getCells']>;\n activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n const setDxGrid = useCallback(\n (nextDxGrid: NaturalDxGrid | null) => {\n setDxGridInternal(nextDxGrid);\n if (forwardedRef) {\n if (typeof forwardedRef === 'function') {\n forwardedRef?.(nextDxGrid);\n } else {\n forwardedRef.current = nextDxGrid;\n }\n }\n },\n [forwardedRef, dxGrid],\n );\n\n useEffect(() => {\n if (dxGrid && props.getCells) {\n dxGrid.getCells = props.getCells;\n dxGrid.requestUpdate('initialCells');\n }\n }, [props.getCells, dxGrid]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n type UseTextEditorProps,\n createBasicExtensions,\n createThemeExtensions,\n preventNewline,\n useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeysProps = {\n onClose: (value: string | undefined, event: EditorKeyEvent) => void;\n onNav?: (value: string | undefined, event: EditorKeyEvent) => void;\n};\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extension?: Extension;\n variant?: keyof typeof editorVariants;\n box?: GridEditBox;\n gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: (value?: string) => void };\n\nconst editorVariants = {\n // TODO(thure): remove when legacy is no longer used.\n legacy: {\n root: 'flex w-full',\n editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',\n content: '!px-2 !py-1',\n },\n grid: {\n root: 'absolute z-[1]',\n editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n // This must match cell styling in `dx-grid.pcss`.\n content: '!border !border-transparent !pli-[3px] !plb-0.5',\n },\n};\n\nexport const CellEditor = ({\n value,\n extension,\n autoFocus,\n onBlur,\n variant = 'legacy',\n box,\n gridId,\n}: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extension ?? [],\n preventNewline,\n EditorView.focusChangeEffect.of((state, focusing) => {\n if (!focusing) {\n onBlur?.(state.doc.toString());\n }\n return null;\n }),\n createBasicExtensions({ lineWrapping: false }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: editorVariants[variant].editor,\n },\n content: {\n className: editorVariants[variant].content,\n },\n },\n }),\n ],\n };\n }, [extension, autoFocus, value, variant, onBlur]);\n\n return (\n <div\n ref={parentRef}\n className={editorVariants[variant].root}\n style={box}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext } from '../Grid';\n\nexport const GridCellEditor = ({\n extension,\n getCellContent,\n onBlur,\n __gridScope,\n}: GridScopedProps<\n Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }\n>) => {\n const { id, editing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n return editing ? (\n <CellEditor\n variant='grid'\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={onBlur}\n extension={extension}\n gridId={id}\n />\n ) : null;\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,SAASC,0BAAsC;AAC/C,SAASC,4BAA4B;AACrC,OAAOC,SAELC,YAEAC,aACAC,WACAC,gBACK;AAEP,SAAwEC,UAAUC,qBAAqB;
|
|
6
|
-
"names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "div", "className", "style", "display", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "dxGrid", "setDxGridInternal", "setDxGrid", "useCallback", "nextDxGrid", "current", "useEffect", "getCells", "requestUpdate", "handleEdit", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "createBasicExtensions", "createThemeExtensions", "preventNewline", "useTextEditor", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "editorVariants", "legacy", "root", "content", "grid", "CellEditor", "extension", "autoFocus", "onBlur", "variant", "box", "gridId", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "focusing", "createBasicExtensions", "lineWrapping", "createThemeExtensions", "slots", "className", "React", "div", "ref", "style", "React", "GridCellEditor", "extension", "getCellContent", "onBlur", "__gridScope", "id", "editing", "editBox", "useGridContext", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n forwardRef,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = {\n index: DxEditRequest['cellIndex'];\n initialContent: DxEditRequest['initialContent'];\n} | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n { id: string } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\nconst GridRoot = ({\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n children,\n __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n <div className='dx-grid-host' style={{ display: 'contents' }}>\n {children}\n </div>\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NonNullable<NaturalDxGrid['getCells']>;\n activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n // TODO(burdon): Can we use useImperativeHandle here?\n // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us\n // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n const setDxGrid = useCallback(\n (nextDxGrid: NaturalDxGrid | null) => {\n setDxGridInternal(nextDxGrid);\n if (forwardedRef) {\n if (typeof forwardedRef === 'function') {\n forwardedRef?.(nextDxGrid);\n } else {\n forwardedRef.current = nextDxGrid;\n }\n }\n },\n [forwardedRef, dxGrid],\n );\n\n useEffect(() => {\n if (dxGrid && props.getCells) {\n dxGrid.getCells = props.getCells;\n dxGrid.requestUpdate('initialCells');\n }\n }, [props.getCells, dxGrid]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n type UseTextEditorProps,\n createBasicExtensions,\n createThemeExtensions,\n preventNewline,\n useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;\nexport type EditorBlurHandler = (value: string | undefined) => void;\nexport type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;\n\nexport type EditorKeysProps = {\n onClose: EditorKeyHandler;\n onNav?: EditorKeyHandler;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nconst editorVariants = {\n // TODO(thure): remove when legacy is no longer used.\n legacy: {\n root: 'flex w-full',\n editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',\n content: '!px-2 !py-1',\n },\n grid: {\n root: 'absolute z-[1]',\n editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n // This must match cell styling in `dx-grid.pcss`.\n content: '!border !border-transparent !pli-[3px] !plb-0.5',\n },\n};\n\nexport type CellEditorProps = {\n value?: string;\n extension?: Extension;\n variant?: keyof typeof editorVariants;\n box?: GridEditBox;\n gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };\n\nexport const CellEditor = ({\n value,\n extension,\n autoFocus,\n onBlur,\n variant = 'legacy',\n box,\n gridId,\n}: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extension ?? [],\n preventNewline,\n EditorView.focusChangeEffect.of((state, focusing) => {\n if (!focusing) {\n onBlur?.(state.doc.toString());\n }\n return null;\n }),\n createBasicExtensions({ lineWrapping: false }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: editorVariants[variant].editor,\n },\n content: {\n className: editorVariants[variant].content,\n },\n },\n }),\n ],\n };\n }, [extension, autoFocus, value, variant, onBlur]);\n\n return (\n <div\n ref={parentRef}\n className={editorVariants[variant].root}\n style={{\n ...box,\n ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },\n }}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext } from '../Grid';\n\nexport type GridCellEditorProps = GridScopedProps<\n Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }\n>;\n\nexport const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {\n const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n const handleBlur = useCallback(\n (value?: string) => {\n setEditing(null);\n onBlur?.(value);\n },\n [onBlur],\n );\n\n return editing ? (\n <CellEditor\n variant='grid'\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={handleBlur}\n extension={extension}\n gridId={id}\n />\n ) : null;\n};\n"],
|
|
5
|
+
"mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,SAASC,0BAAsC;AAC/C,SAASC,4BAA4B;AACrC,OAAOC,SAELC,YAEAC,aACAC,WACAC,gBACK;AAEP,SAAwEC,UAAUC,qBAAqB;AA2IvG,SAASC,iBAAiBC,iBAAiBC,aAAaC,0BAA0B;AAvIlF,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;IACdC,QAAQ;IACRC,UAAU;EACZ;AACF,CAAA;AAIA,IAAMC,aAAa;EACjBC,kBAAkB;EAClBC,iBAAiB;EACjBC,YAAY;EACZC,WAAW;AACb;AAiBA,IAAMC,YAAY;AAElB,IAAM,CAACC,mBAAmBC,eAAAA,IAAmBC,mBAAmBH,WAAW,CAAA,CAAE;AAE7E,IAAM,CAACI,cAAcC,cAAAA,IAAkBJ,kBAAoCD,SAAAA;AAU3E,IAAMM,WAAW,CAAC,EAChBC,IACAC,SAASC,cACTC,gBACAC,iBACAC,UACAC,YAAW,MACoB;AAC/B,QAAM,CAACL,UAAU,MAAMM,UAAAA,IAAcC,qBAAqB;IACxDC,MAAMP;IACNQ,aAAaP;IACbQ,UAAUP;EACZ,CAAA;AACA,QAAM,CAACQ,SAASC,UAAAA,IAAcC,SAAsB1B,UAAAA;AACpD,SACE,sBAAA,cAACS,cAAAA;IACCG;IACAC;IACAM;IACAK;IACAC;IACAE,OAAOT;KAEP,sBAAA,cAACU,OAAAA;IAAIC,WAAU;IAAeC,OAAO;MAAEC,SAAS;IAAW;KACxDd,QAAAA,CAAAA;AAIT;AAEAN,SAASqB,cAAc3B;AAOvB,IAAM4B,oBAAoB;AAE1B,IAAMC,cAAcC,2BAA6D,CAACC,OAAOC,iBAAAA;AACvF,QAAM,EAAEzB,IAAIC,SAASY,YAAYN,WAAU,IAAKT,eAAeuB,mBAAmBG,MAAMlB,WAAW;AACnG,QAAM,CAACoB,QAAQC,iBAAAA,IAAqBb,SAA+B,IAAA;AAKnE,QAAMc,YAAYC,YAChB,CAACC,eAAAA;AACCH,sBAAkBG,UAAAA;AAClB,QAAIL,cAAc;AAChB,UAAI,OAAOA,iBAAiB,YAAY;AACtCA,uBAAeK,UAAAA;MACjB,OAAO;AACLL,qBAAaM,UAAUD;MACzB;IACF;EACF,GACA;IAACL;IAAcC;GAAO;AAGxBM,YAAU,MAAA;AACR,QAAIN,UAAUF,MAAMS,UAAU;AAC5BP,aAAOO,WAAWT,MAAMS;AACxBP,aAAOQ,cAAc,cAAA;IACvB;EACF,GAAG;IAACV,MAAMS;IAAUP;GAAO;AAE3B,QAAMS,aAAaN,YAAY,CAACO,UAAAA;AAC9BvB,eAAWuB,MAAMC,OAAO;AACxB9B,eAAW;MAAE+B,OAAOF,MAAMG;MAAWC,gBAAgBJ,MAAMI;IAAe,CAAA;EAC5E,GAAG,CAAA,CAAE;AAEL,SAAO,sBAAA,cAAC/D,QAAAA;IAAQ,GAAG+C;IAAOiB,QAAQzC;IAAI0C,MAAMzC,UAAU,SAAS;IAAUf,QAAQiD;IAAYQ,KAAKf;;AACpG,CAAA;AAEAN,YAAYF,cAAcC;AAEnB,IAAMuB,OAAO;EAClBC,MAAM9C;EACN+C,SAASxB;AACX;;;ACnJA,SAASyB,wBAAwB;AAEjC,SAASC,YAAYC,cAAc;AACnC,OAAOC,YAAmC;AAE1C,SAASC,uBAAuB;AAChC,SAEEC,uBACAC,uBACAC,gBACAC,qBACK;AAgBA,IAAMC,aAAa,CAAC,EAAEC,OAAOC,QAAO,MAAmB;AAC5D,SAAOC,OAAOC,GAAG;IACf;MACEC,KAAK;MACLC,KAAK,CAACC,WAAAA;AACJ,cAAMC,QAAQD,OAAOE,MAAMC,IAAIC,SAAQ;AACvCV,gBAAQO,OAAO;UAAEH,KAAK;QAAU,CAAA;AAChC,eAAO,CAAC,CAACJ;MACX;IACF;IACA;MACEI,KAAK;MACLC,KAAK,CAACC,WAAAA;AACJ,cAAMC,QAAQD,OAAOE,MAAMC,IAAIC,SAAQ;AACvCV,gBAAQO,OAAO;UAAEH,KAAK;QAAY,CAAA;AAClC,eAAO,CAAC,CAACJ;MACX;IACF;IACA;MACEI,KAAK;MACLC,KAAK,CAACC,WAAAA;AACJ,cAAMC,QAAQD,OAAOE,MAAMC,IAAIC,SAAQ;AACvCV,gBAAQO,OAAO;UAAEH,KAAK;QAAY,CAAA;AAClC,eAAO,CAAC,CAACJ;MACX;IACF;IACA;MACEI,KAAK;MACLC,KAAK,CAACC,WAAAA;AACJ,cAAMC,QAAQD,OAAOE,MAAMC,IAAIC,SAAQ;AACvCV,gBAAQO,OAAO;UAAEH,KAAK;QAAa,CAAA;AACnC,eAAO,CAAC,CAACJ;MACX;IACF;IACA;MACEI,KAAK;MACLC,KAAK,CAACC,WAAAA;AACJ,YAAIK,iBAAiBL,OAAOE,KAAK,GAAG;AAClC,iBAAO;QACT,OAAO;AACLP,kBAAQK,OAAOE,MAAMC,IAAIC,SAAQ,GAAI;YAAEN,KAAK;UAAQ,CAAA;AACpD,iBAAO;QACT;MACF;MACAQ,OAAO,CAACN,WAAAA;AACN,YAAIK,iBAAiBL,OAAOE,KAAK,GAAG;AAClC,iBAAO;QACT,OAAO;AACLP,kBAAQK,OAAOE,MAAMC,IAAIC,SAAQ,GAAI;YAAEN,KAAK;YAASQ,OAAO;UAAK,CAAA;AACjE,iBAAO;QACT;MACF;IACF;IACA;MACER,KAAK;MACLC,KAAK,CAACC,WAAAA;AACJ,YAAIK,iBAAiBL,OAAOE,KAAK,GAAG;AAClC,iBAAO;QACT,OAAO;AACLP,kBAAQK,OAAOE,MAAMC,IAAIC,SAAQ,GAAI;YAAEN,KAAK;UAAM,CAAA;AAClD,iBAAO;QACT;MACF;MACAQ,OAAO,CAACN,WAAAA;AACN,YAAIK,iBAAiBL,OAAOE,KAAK,GAAG;AAClC,iBAAO;QACT,OAAO;AACLP,kBAAQK,OAAOE,MAAMC,IAAIC,SAAQ,GAAI;YAAEN,KAAK;YAAOQ,OAAO;UAAK,CAAA;AAC/D,iBAAO;QACT;MACF;IACF;IACA;MACER,KAAK;MACLC,KAAK,MAAA;AACHJ,gBAAQY,QAAW;UAAET,KAAK;QAAS,CAAA;AACnC,eAAO;MACT;IACF;GACD;AACH;AAEA,IAAMU,iBAAiB;;EAErBC,QAAQ;IACNC,MAAM;IACNV,QAAQ;IACRW,SAAS;EACX;EACAC,MAAM;IACJF,MAAM;IACNV,QAAQ;;IAERW,SAAS;EACX;AACF;AAUO,IAAME,aAAa,CAAC,EACzBZ,OACAa,WACAC,WACAC,QACAC,UAAU,UACVC,KACAC,OAAM,MACU;AAChB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AACtB,QAAM,EAAEC,UAAS,IAAKC,cAAc,MAAA;AAClC,WAAO;MACLR;MACAS,cAAcvB;MACdwB,WAAW;QAAEC,QAAQzB,OAAO0B,UAAU;MAAE;MACxCC,YAAY;QACVd,aAAa,CAAA;QACbe;QACAC,WAAWC,kBAAkBlC,GAAG,CAACK,OAAO8B,aAAAA;AACtC,cAAI,CAACA,UAAU;AACbhB,qBAASd,MAAMC,IAAIC,SAAQ,CAAA;UAC7B;AACA,iBAAO;QACT,CAAA;QACA6B,sBAAsB;UAAEC,cAAc;QAAM,CAAA;QAC5CC,sBAAsB;UACpBf;UACAgB,OAAO;YACLpC,QAAQ;cACNqC,WAAW7B,eAAeS,OAAAA,EAASjB;YACrC;YACAW,SAAS;cACP0B,WAAW7B,eAAeS,OAAAA,EAASN;YACrC;UACF;QACF,CAAA;;IAEJ;EACF,GAAG;IAACG;IAAWC;IAAWd;IAAOgB;IAASD;GAAO;AAEjD,SACE,gBAAAsB,OAAA,cAACC,OAAAA;IACCC,KAAKlB;IACLe,WAAW7B,eAAeS,OAAAA,EAASP;IACnC+B,OAAO;MACL,GAAGvB;MACH,GAAG;QAAE,sBAAsB,GAAGA,KAAKwB,cAAc,GAAA;MAAQ;IAC3D;IACC,GAAIvB,UAAU;MAAE,aAAaA;IAAO;;AAG3C;;;ACxLA,OAAOwB,UAASC,eAAAA,oBAAmB;AAS5B,IAAMC,iBAAiB,CAAC,EAAEC,WAAWC,gBAAgBC,QAAQC,YAAW,MAAuB;AACpG,QAAM,EAAEC,IAAIC,SAASC,YAAYC,QAAO,IAAKC,eAAe,uBAAuBL,WAAAA;AAEnF,QAAMM,aAAaC,aACjB,CAACC,UAAAA;AACCL,eAAW,IAAA;AACXJ,aAASS,KAAAA;EACX,GACA;IAACT;GAAO;AAGV,SAAOG,UACL,gBAAAO,OAAA,cAACC,YAAAA;IACCC,SAAQ;IACRH,OAAON,QAAQU,kBAAkBd,eAAeI,QAAQW,KAAK;IAC7DC,WAAAA;IACAC,KAAKX;IACLL,QAAQO;IACRT;IACAmB,QAAQf;OAER;AACN;",
|
|
6
|
+
"names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "div", "className", "style", "display", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "dxGrid", "setDxGridInternal", "setDxGrid", "useCallback", "nextDxGrid", "current", "useEffect", "getCells", "requestUpdate", "handleEdit", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "createBasicExtensions", "createThemeExtensions", "preventNewline", "useTextEditor", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "editorVariants", "legacy", "root", "content", "grid", "CellEditor", "extension", "autoFocus", "onBlur", "variant", "box", "gridId", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "focusing", "createBasicExtensions", "lineWrapping", "createThemeExtensions", "slots", "className", "React", "div", "ref", "style", "inlineSize", "React", "useCallback", "GridCellEditor", "extension", "getCellContent", "onBlur", "__gridScope", "id", "editing", "setEditing", "editBox", "useGridContext", "handleBlur", "useCallback", "value", "React", "CellEditor", "variant", "initialContent", "index", "autoFocus", "box", "gridId"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":14417,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytes":17302,"imports":[{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytes":3475,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"../Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytes":620,"imports":[{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":583,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"packages/ui/react-ui-grid/src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18212},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","Grid","GridCellEditor","GridContent","GridRoot","closestCell","colToA1Notation","commentedClassName","createGridScope","editorKeys","rowToA1Notation","useGridContext"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytesInOutput":2829},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytesInOutput":4169},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":621}},"bytes":8029}}}
|
|
@@ -5,20 +5,14 @@ import { type GridEditBox } from '../Grid';
|
|
|
5
5
|
export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & {
|
|
6
6
|
shift?: boolean;
|
|
7
7
|
};
|
|
8
|
+
export type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;
|
|
9
|
+
export type EditorBlurHandler = (value: string | undefined) => void;
|
|
10
|
+
export type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;
|
|
8
11
|
export type EditorKeysProps = {
|
|
9
|
-
onClose:
|
|
10
|
-
onNav?:
|
|
12
|
+
onClose: EditorKeyHandler;
|
|
13
|
+
onNav?: EditorKeyHandler;
|
|
11
14
|
};
|
|
12
15
|
export declare const editorKeys: ({ onNav, onClose }: EditorKeysProps) => Extension;
|
|
13
|
-
export type CellEditorProps = {
|
|
14
|
-
value?: string;
|
|
15
|
-
extension?: Extension;
|
|
16
|
-
variant?: keyof typeof editorVariants;
|
|
17
|
-
box?: GridEditBox;
|
|
18
|
-
gridId?: string;
|
|
19
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> & {
|
|
20
|
-
onBlur?: (value?: string) => void;
|
|
21
|
-
};
|
|
22
16
|
declare const editorVariants: {
|
|
23
17
|
legacy: {
|
|
24
18
|
root: string;
|
|
@@ -31,6 +25,15 @@ declare const editorVariants: {
|
|
|
31
25
|
content: string;
|
|
32
26
|
};
|
|
33
27
|
};
|
|
28
|
+
export type CellEditorProps = {
|
|
29
|
+
value?: string;
|
|
30
|
+
extension?: Extension;
|
|
31
|
+
variant?: keyof typeof editorVariants;
|
|
32
|
+
box?: GridEditBox;
|
|
33
|
+
gridId?: string;
|
|
34
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & {
|
|
35
|
+
onBlur?: EditorBlurHandler;
|
|
36
|
+
};
|
|
34
37
|
export declare const CellEditor: ({ value, extension, autoFocus, onBlur, variant, box, gridId, }: CellEditorProps) => React.JSX.Element;
|
|
35
38
|
export {};
|
|
36
39
|
//# sourceMappingURL=CellEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,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,
|
|
1
|
+
{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAEjG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;CAanB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,UAAU,mEAQpB,eAAe,sBA2CjB,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type CellEditorProps } from './CellEditor';
|
|
3
3
|
import { type GridScopedProps } from '../Grid';
|
|
4
|
-
export
|
|
4
|
+
export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur'> & {
|
|
5
5
|
getCellContent: (index: string) => string | undefined;
|
|
6
|
-
}
|
|
6
|
+
}>;
|
|
7
|
+
export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
|
|
7
8
|
//# sourceMappingURL=GridCellEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CAC1G,CAAC;AAEF,eAAO,MAAM,cAAc,uDAAwD,mBAAmB,6BAsBrG,CAAC"}
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EAEnB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAExH,KAAK,aAAa,GAAG,aAAa,CAAC;AAEnC,QAAA,MAAM,MAAM;kBAK0B,SAAS,CAAC,YAAY,CAAC;YAC5B,SAAS,CAAC,aAAa,CAAC;cACjB,SAAS,CAAC,iBAAiB,CAAC;EAElE,CAAC;AAEH,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAS5C,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACjD,GAAG,IAAI,CAAC;AAET,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAItD,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAAqB,cAAc,wFAAkD,CAAC;AAEtF,KAAK,aAAa,GAAG,iBAAiB,CACpC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD,CAAC,CACH,CAAC;AAEF,QAAA,MAAM,QAAQ;6FAOX,eAAe,CAAC,aAAa,CAAC;;CAqBhC,CAAC;AAIF,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,QAAA,MAAM,WAAW,sHAkCf,CAAC;AAIH,eAAO,MAAM,IAAI;;iGAtEd,eAAe,CAAC,aAAa,CAAC;;;;CAyEhC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAElE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAE1G,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEnG,YAAY,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,GACX,MAAM,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-grid",
|
|
3
|
-
"version": "0.6.14-staging.
|
|
3
|
+
"version": "0.6.14-staging.8758a12",
|
|
4
4
|
"description": "React component which manages a `dx-grid` Lit web component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"@radix-ui/react-context": "^1.0.0",
|
|
30
30
|
"@radix-ui/react-popper": "^1.1.2",
|
|
31
31
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
32
|
-
"@dxos/lit-grid": "0.6.14-staging.
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
32
|
+
"@dxos/lit-grid": "0.6.14-staging.8758a12",
|
|
33
|
+
"@dxos/react-ui-editor": "0.6.14-staging.8758a12",
|
|
34
|
+
"@dxos/util": "0.6.14-staging.8758a12"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~18.2.0",
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
"react": "~18.2.0",
|
|
40
40
|
"react-dom": "~18.2.0",
|
|
41
41
|
"vite": "5.4.7",
|
|
42
|
-
"@dxos/
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/react-ui-searchlist": "0.6.14-staging.
|
|
45
|
-
"@dxos/react-ui-theme": "0.6.14-staging.
|
|
46
|
-
"@dxos/storybook-utils": "0.6.14-staging.
|
|
42
|
+
"@dxos/random": "0.6.14-staging.8758a12",
|
|
43
|
+
"@dxos/react-ui": "0.6.14-staging.8758a12",
|
|
44
|
+
"@dxos/react-ui-searchlist": "0.6.14-staging.8758a12",
|
|
45
|
+
"@dxos/react-ui-theme": "0.6.14-staging.8758a12",
|
|
46
|
+
"@dxos/storybook-utils": "0.6.14-staging.8758a12"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "~18.2.0",
|
|
50
50
|
"react-dom": "~18.2.0",
|
|
51
|
-
"@dxos/react-ui": "0.6.14-staging.
|
|
52
|
-
"@dxos/react-ui-theme": "0.6.14-staging.
|
|
51
|
+
"@dxos/react-ui": "0.6.14-staging.8758a12",
|
|
52
|
+
"@dxos/react-ui-theme": "0.6.14-staging.8758a12"
|
|
53
53
|
},
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
@@ -20,10 +20,15 @@ import { type GridEditBox } from '../Grid';
|
|
|
20
20
|
|
|
21
21
|
export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };
|
|
22
22
|
|
|
23
|
+
export type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;
|
|
24
|
+
export type EditorBlurHandler = (value: string | undefined) => void;
|
|
25
|
+
export type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;
|
|
26
|
+
|
|
23
27
|
export type EditorKeysProps = {
|
|
24
|
-
onClose:
|
|
25
|
-
onNav?:
|
|
28
|
+
onClose: EditorKeyHandler;
|
|
29
|
+
onNav?: EditorKeyHandler;
|
|
26
30
|
};
|
|
31
|
+
|
|
27
32
|
// TODO(Zan): Should each consumer be responsible for defining these?
|
|
28
33
|
export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
|
|
29
34
|
return keymap.of([
|
|
@@ -107,14 +112,6 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
|
|
|
107
112
|
]);
|
|
108
113
|
};
|
|
109
114
|
|
|
110
|
-
export type CellEditorProps = {
|
|
111
|
-
value?: string;
|
|
112
|
-
extension?: Extension;
|
|
113
|
-
variant?: keyof typeof editorVariants;
|
|
114
|
-
box?: GridEditBox;
|
|
115
|
-
gridId?: string;
|
|
116
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: (value?: string) => void };
|
|
117
|
-
|
|
118
115
|
const editorVariants = {
|
|
119
116
|
// TODO(thure): remove when legacy is no longer used.
|
|
120
117
|
legacy: {
|
|
@@ -130,6 +127,14 @@ const editorVariants = {
|
|
|
130
127
|
},
|
|
131
128
|
};
|
|
132
129
|
|
|
130
|
+
export type CellEditorProps = {
|
|
131
|
+
value?: string;
|
|
132
|
+
extension?: Extension;
|
|
133
|
+
variant?: keyof typeof editorVariants;
|
|
134
|
+
box?: GridEditBox;
|
|
135
|
+
gridId?: string;
|
|
136
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };
|
|
137
|
+
|
|
133
138
|
export const CellEditor = ({
|
|
134
139
|
value,
|
|
135
140
|
extension,
|
|
@@ -174,7 +179,10 @@ export const CellEditor = ({
|
|
|
174
179
|
<div
|
|
175
180
|
ref={parentRef}
|
|
176
181
|
className={editorVariants[variant].root}
|
|
177
|
-
style={
|
|
182
|
+
style={{
|
|
183
|
+
...box,
|
|
184
|
+
...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
|
|
185
|
+
}}
|
|
178
186
|
{...(gridId && { 'data-grid': gridId })}
|
|
179
187
|
/>
|
|
180
188
|
);
|
|
@@ -2,20 +2,25 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React from 'react';
|
|
5
|
+
import React, { useCallback } from 'react';
|
|
6
6
|
|
|
7
7
|
import { CellEditor, type CellEditorProps } from './CellEditor';
|
|
8
8
|
import { type GridScopedProps, useGridContext } from '../Grid';
|
|
9
9
|
|
|
10
|
-
export
|
|
11
|
-
extension,
|
|
12
|
-
getCellContent,
|
|
13
|
-
onBlur,
|
|
14
|
-
__gridScope,
|
|
15
|
-
}: GridScopedProps<
|
|
10
|
+
export type GridCellEditorProps = GridScopedProps<
|
|
16
11
|
Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
>;
|
|
13
|
+
|
|
14
|
+
export const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {
|
|
15
|
+
const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
|
|
16
|
+
|
|
17
|
+
const handleBlur = useCallback(
|
|
18
|
+
(value?: string) => {
|
|
19
|
+
setEditing(null);
|
|
20
|
+
onBlur?.(value);
|
|
21
|
+
},
|
|
22
|
+
[onBlur],
|
|
23
|
+
);
|
|
19
24
|
|
|
20
25
|
return editing ? (
|
|
21
26
|
<CellEditor
|
|
@@ -23,7 +28,7 @@ export const GridCellEditor = ({
|
|
|
23
28
|
value={editing.initialContent ?? getCellContent(editing.index)}
|
|
24
29
|
autoFocus
|
|
25
30
|
box={editBox}
|
|
26
|
-
onBlur={
|
|
31
|
+
onBlur={handleBlur}
|
|
27
32
|
extension={extension}
|
|
28
33
|
gridId={id}
|
|
29
34
|
/>
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -40,7 +40,10 @@ const initialBox = {
|
|
|
40
40
|
blockSize: 0,
|
|
41
41
|
} satisfies GridEditBox;
|
|
42
42
|
|
|
43
|
-
type GridEditing = {
|
|
43
|
+
type GridEditing = {
|
|
44
|
+
index: DxEditRequest['cellIndex'];
|
|
45
|
+
initialContent: DxEditRequest['initialContent'];
|
|
46
|
+
} | null;
|
|
44
47
|
|
|
45
48
|
type GridContextValue = {
|
|
46
49
|
id: string;
|
|
@@ -109,7 +112,9 @@ const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>
|
|
|
109
112
|
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
110
113
|
const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);
|
|
111
114
|
|
|
112
|
-
//
|
|
115
|
+
// TODO(burdon): Can we use useImperativeHandle here?
|
|
116
|
+
// NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
|
|
117
|
+
// a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
|
|
113
118
|
const setDxGrid = useCallback(
|
|
114
119
|
(nextDxGrid: NaturalDxGrid | null) => {
|
|
115
120
|
setDxGridInternal(nextDxGrid);
|