react-data-grid-temp - npm Package Compare versions

Comparing version 7.0.0-canary.18.2 to 7.0.0-canary.20

CHANGELOG.md

@@ -17,2 +17,4 @@ # Changelog
     - `rowClass`
+    - `defaultColumnOptions`
+      - ⚠️ This replaces the `minColumnWidth` and `defaultFormatter` props
   - `column.cellClass(row)` function support:
@@ -25,2 +27,5 @@ - `column = { ..., cellClass(row) { return string; } }`
     - More info in [#2104](https://github.com/adazzle/react-data-grid/pull/2104)
+  - `column.editor2`
+  - `column.editorOptions`
+    - More info in [#2102](https://github.com/adazzle/react-data-grid/pull/2102)
   - `scrollToRow` method
@@ -73,2 +78,3 @@ - ⚠️ This replaces the `scrollToRowIndex` prop
   - ⚠️ `column.getRowMetaData`
+  - ⚠️ `column.minColumnWidth`
   - ⚠️ `column.filterable`
@@ -75,0 +81,0 @@ - ⚠️ `column.draggable`

lib/Cell.d.ts

@@ -0,3 +1,6 @@
+import React from 'react';
 import { CellRendererProps } from './types';
-declare const _default: <R, SR = unknown>(props: CellRendererProps<R, SR>) => JSX.Element;
+declare const _default: <R, SR = unknown>(props: CellRendererProps<R, SR> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}) => JSX.Element;
 export default _default;

lib/Cell.js

@@ -25,10 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import clsx from 'clsx';
-import { EditorContainer, EditorPortal } from './editors';
 import { wrapEvent } from './utils';
 import { useCombinedRefs } from './hooks';
 function Cell(_a, ref) {
-    var className = _a.className, column = _a.column, isCopied = _a.isCopied, isDraggedOver = _a.isDraggedOver, isRowSelected = _a.isRowSelected, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, row = _a.row, rowIdx = _a.rowIdx, eventBus = _a.eventBus, selectedCellProps = _a.selectedCellProps, onRowClick = _a.onRowClick, onKeyDown = _a.onKeyDown, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, onContextMenu = _a.onContextMenu, props = __rest(_a, ["className", "column", "isCopied", "isDraggedOver", "isRowSelected", "lastFrozenColumnIndex", "row", "rowIdx", "eventBus", "selectedCellProps", "onRowClick", "onKeyDown", "onClick", "onDoubleClick", "onContextMenu"]);
+    var className = _a.className, column = _a.column, isCellSelected = _a.isCellSelected, isCopied = _a.isCopied, isDraggedOver = _a.isDraggedOver, isRowSelected = _a.isRowSelected, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, row = _a.row, rowIdx = _a.rowIdx, eventBus = _a.eventBus, dragHandleProps = _a.dragHandleProps, onRowClick = _a.onRowClick, onKeyDown = _a.onKeyDown, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, onContextMenu = _a.onContextMenu, props = __rest(_a, ["className", "column", "isCellSelected", "isCopied", "isDraggedOver", "isRowSelected", "lastFrozenColumnIndex", "row", "rowIdx", "eventBus", "dragHandleProps", "onRowClick", "onKeyDown", "onClick", "onDoubleClick", "onContextMenu"]);
     var cellRef = useRef(null);
-    var isSelected = selectedCellProps !== undefined;
-    var isEditing = (selectedCellProps === null || selectedCellProps === void 0 ? void 0 : selectedCellProps.mode) === 'EDIT';
     var cellClass = column.cellClass;
@@ -38,3 +35,3 @@ className = clsx('rdg-cell', {
         'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex,
-        'rdg-cell-selected': isSelected,
+        'rdg-cell-selected': isCellSelected,
         'rdg-cell-copied': isCopied,
@@ -47,3 +44,4 @@ 'rdg-cell-dragged-over': isDraggedOver
     function handleClick() {
-        selectCell();
+        var _a;
+        selectCell((_a = column.editorOptions) === null || _a === void 0 ? void 0 : _a.editOnClick);
         onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowIdx, row, column);
@@ -60,28 +58,10 @@ }
     }
-    function getCellContent() {
-        var render = (React.createElement(column.formatter, { column: column, rowIdx: rowIdx, row: row, isCellSelected: isSelected, isRowSelected: isRowSelected, onRowSelectionChange: onRowSelectionChange }));
-        if (selectedCellProps && selectedCellProps.mode === 'SELECT') {
-            render = (React.createElement(React.Fragment, null,
-                React.createElement(column.formatter, { column: column, rowIdx: rowIdx, row: row, isCellSelected: isSelected, isRowSelected: isRowSelected, onRowSelectionChange: onRowSelectionChange }),
-                (selectedCellProps === null || selectedCellProps === void 0 ? void 0 : selectedCellProps.dragHandleProps) && (React.createElement("div", __assign({ className: "rdg-cell-drag-handle" }, selectedCellProps.dragHandleProps)))));
-        }
-        if (selectedCellProps && selectedCellProps.mode === 'EDIT') {
-            var _a = selectedCellProps.editorContainerProps, editorPortalTarget = _a.editorPortalTarget, editorProps = __rest(_a, ["editorPortalTarget"]);
-            var _b = document.scrollingElement || document.documentElement, docTop = _b.scrollTop, docLeft = _b.scrollLeft;
-            if (cellRef.current) {
-                var _c = cellRef.current.getBoundingClientRect(), left = _c.left, top_1 = _c.top;
-                var gridLeft = left + docLeft;
-                var gridTop = top_1 + docTop;
-                render = (React.createElement(EditorPortal, { target: editorPortalTarget },
-                    React.createElement(EditorContainer, __assign({}, editorProps, { rowIdx: rowIdx, row: row, column: column, left: gridLeft, top: gridTop }))));
-            }
-        }
-        return render;
-    }
-    return (React.createElement("div", __assign({ role: "gridcell", "aria-colindex": column.idx + 1, "aria-selected": isSelected, ref: useCombinedRefs(cellRef, ref), className: className, style: {
+    return (React.createElement("div", __assign({ role: "gridcell", "aria-colindex": column.idx + 1, "aria-selected": isCellSelected, ref: useCombinedRefs(cellRef, ref), className: className, style: {
             width: column.width,
             left: column.left
-        }, onKeyDown: selectedCellProps ? wrapEvent(selectedCellProps.onKeyDown, onKeyDown) : onKeyDown, onClick: isEditing ? onClick : wrapEvent(handleClick, onClick), onDoubleClick: isEditing ? onDoubleClick : wrapEvent(handleDoubleClick, onDoubleClick), onContextMenu: isEditing ? onContextMenu : wrapEvent(handleContextMenu, onContextMenu) }, props), getCellContent()));
+        }, onKeyDown: onKeyDown, onClick: wrapEvent(handleClick, onClick), onDoubleClick: wrapEvent(handleDoubleClick, onDoubleClick), onContextMenu: wrapEvent(handleContextMenu, onContextMenu) }, props),
+        React.createElement(column.formatter, { column: column, rowIdx: rowIdx, row: row, isCellSelected: isCellSelected, isRowSelected: isRowSelected, onRowSelectionChange: onRowSelectionChange }),
+        dragHandleProps && (React.createElement("div", __assign({ className: "rdg-cell-drag-handle" }, dragHandleProps)))));
 }
 export default memo(forwardRef(Cell));
 //# sourceMappingURL=Cell.js.map

lib/Columns.js

@@ -10,2 +10,3 @@ import React from 'react';
     maxWidth: 35,
+    resizable: false,
     frozen: true,
@@ -12,0 +13,0 @@ headerRenderer: function (props) {

lib/DataGrid.d.ts

 import React from 'react';
-import { CalculatedColumn, CheckCellIsEditableEvent, Column, Filters, FormatterProps, Position, RowRendererProps, RowsUpdateEvent, SortColumn } from './types';
+import { CalculatedColumn, CheckCellIsEditableEvent, Column, Filters, Position, RowRendererProps, RowsUpdateEvent, SortColumn } from './types';
 import { CellNavigationMode, SortDirection } from './enums';
+declare type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'formatter' | 'minWidth' | 'resizable' | 'sortable'>;
 export interface DataGridHandle {
@@ -8,2 +9,3 @@ scrollToColumn: (colIdx: number) => void;
     selectCell: (position: Position, openEditor?: boolean) => void;
+    commitChanges: () => void;
 }
@@ -35,2 +37,3 @@ declare type SharedDivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;
     onRowsUpdate?: <E extends RowsUpdateEvent>(event: E) => void;
+    onRowsChange?: (rows: R[]) => void;
     /**
@@ -43,4 +46,2 @@ * Dimensions props
     height?: number;
-    /** Minimum column width in pixels */
-    minColumnWidth?: number;
     /** The height of each row in pixels */
@@ -67,6 +68,6 @@ rowHeight?: number;
     onFiltersChange?: (filters: Filters) => void;
+    defaultColumnOptions?: DefaultColumnOptions<R, SR>;
     /**
      * Custom renderers
      */
-    defaultFormatter?: React.ComponentType<FormatterProps<R, SR>>;
     rowRenderer?: React.ComponentType<RowRendererProps<R, SR>>;
@@ -73,0 +74,0 @@ emptyRowsRenderer?: React.ComponentType;

lib/DataGrid.js

@@ -28,2 +28,6 @@ var __assign = (this && this.__assign) || function () {
 };
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
 import React, { forwardRef, useState, useRef, useLayoutEffect, useEffect, useImperativeHandle, useCallback, createElement } from 'react';
@@ -37,5 +41,3 @@ import clsx from 'clsx';
 import SummaryRow from './SummaryRow';
-import { ValueFormatter } from './formatters';
-import { legacyCellInput } from './editors';
-import { assertIsValidKey, getColumnScrollPosition, getScrollbarSize, getVerticalRangeToRender, getNextSelectedCellPosition, isSelectedCellEditable, canExitGrid, isCtrlKeyHeldDown } from './utils';
+import { assertIsValidKey, getColumnScrollPosition, getScrollbarSize, getVerticalRangeToRender, getNextSelectedCellPosition, isSelectedCellEditable, canExitGrid, isCtrlKeyHeldDown, isDefaultCellInput } from './utils';
 import { CellNavigationMode, UpdateActions } from './enums';
@@ -53,21 +55,21 @@ /**
     // Grid and data Props
-    rawColumns = _a.columns, rows = _a.rows, summaryRows = _a.summaryRows, rowKey = _a.rowKey, onRowsUpdate = _a.onRowsUpdate, 
+    rawColumns = _a.columns, rows = _a.rows, summaryRows = _a.summaryRows, rowKey = _a.rowKey, onRowsUpdate = _a.onRowsUpdate, onRowsChange = _a.onRowsChange, 
     // Dimensions props
-    width = _a.width, _c = _a.height, height = _c === void 0 ? 350 : _c, _d = _a.minColumnWidth, minColumnWidth = _d === void 0 ? 80 : _d, _e = _a.rowHeight, rowHeight = _e === void 0 ? 35 : _e, _f = _a.headerRowHeight, headerRowHeight = _f === void 0 ? rowHeight : _f, _g = _a.headerFiltersHeight, headerFiltersHeight = _g === void 0 ? 45 : _g, 
+    width = _a.width, _c = _a.height, height = _c === void 0 ? 350 : _c, _d = _a.rowHeight, rowHeight = _d === void 0 ? 35 : _d, _e = _a.headerRowHeight, headerRowHeight = _e === void 0 ? rowHeight : _e, _f = _a.headerFiltersHeight, headerFiltersHeight = _f === void 0 ? 45 : _f, 
     // Feature props
-    selectedRows = _a.selectedRows, onSelectedRowsChange = _a.onSelectedRowsChange, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, onSort = _a.onSort, filters = _a.filters, onFiltersChange = _a.onFiltersChange, 
+    selectedRows = _a.selectedRows, onSelectedRowsChange = _a.onSelectedRowsChange, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, onSort = _a.onSort, filters = _a.filters, onFiltersChange = _a.onFiltersChange, defaultColumnOptions = _a.defaultColumnOptions, 
     // Custom renderers
-    _h = _a.defaultFormatter, 
+    _g = _a.rowRenderer, 
     // Custom renderers
-    defaultFormatter = _h === void 0 ? ValueFormatter : _h, _j = _a.rowRenderer, RowRenderer = _j === void 0 ? Row : _j, emptyRowsRenderer = _a.emptyRowsRenderer, 
+    RowRenderer = _g === void 0 ? Row : _g, emptyRowsRenderer = _a.emptyRowsRenderer, 
     // Event props
     onRowClick = _a.onRowClick, onScroll = _a.onScroll, onColumnResize = _a.onColumnResize, onSelectedCellChange = _a.onSelectedCellChange, onCheckCellIsEditable = _a.onCheckCellIsEditable, 
     // Toggles and modes
-    _k = _a.enableFilters, 
+    _h = _a.enableFilters, 
     // Toggles and modes
-    enableFilters = _k === void 0 ? false : _k, _l = _a.enableCellCopyPaste, enableCellCopyPaste = _l === void 0 ? false : _l, _m = _a.enableCellDragAndDrop, enableCellDragAndDrop = _m === void 0 ? false : _m, _o = _a.cellNavigationMode, cellNavigationMode = _o === void 0 ? CellNavigationMode.NONE : _o, 
+    enableFilters = _h === void 0 ? false : _h, _j = _a.enableCellCopyPaste, enableCellCopyPaste = _j === void 0 ? false : _j, _k = _a.enableCellDragAndDrop, enableCellDragAndDrop = _k === void 0 ? false : _k, _l = _a.cellNavigationMode, cellNavigationMode = _l === void 0 ? CellNavigationMode.NONE : _l, 
     // Miscellaneous
-    _p = _a.editorPortalTarget, 
+    _m = _a.editorPortalTarget, 
     // Miscellaneous
-    editorPortalTarget = _p === void 0 ? document.body : _p, rowClass = _a.rowClass, 
+    editorPortalTarget = _m === void 0 ? document.body : _m, rowClass = _a.rowClass, 
     // ARIA
@@ -78,10 +80,10 @@ ariaLabel = _a["aria-label"], ariaLabelledBy = _a["aria-labelledby"], ariaDescribedBy = _a["aria-describedby"];
      */
-    var _q = __read(useState(function () { return new EventBus(); }), 1), eventBus = _q[0];
-    var _r = __read(useState(0), 2), scrollTop = _r[0], setScrollTop = _r[1];
-    var _s = __read(useState(0), 2), scrollLeft = _s[0], setScrollLeft = _s[1];
-    var _t = __read(useState(function () { return new Map(); }), 2), columnWidths = _t[0], setColumnWidths = _t[1];
-    var _u = __read(useState({ idx: -1, rowIdx: -1, mode: 'SELECT' }), 2), selectedPosition = _u[0], setSelectedPosition = _u[1];
-    var _v = __read(useState(null), 2), copiedPosition = _v[0], setCopiedPosition = _v[1];
-    var _w = __read(useState(false), 2), isDragging = _w[0], setDragging = _w[1];
-    var _x = __read(useState(undefined), 2), draggedOverRowIdx = _x[0], setOverRowIdx = _x[1];
+    var _o = __read(useState(function () { return new EventBus(); }), 1), eventBus = _o[0];
+    var _p = __read(useState(0), 2), scrollTop = _p[0], setScrollTop = _p[1];
+    var _q = __read(useState(0), 2), scrollLeft = _q[0], setScrollLeft = _q[1];
+    var _r = __read(useState(function () { return new Map(); }), 2), columnWidths = _r[0], setColumnWidths = _r[1];
+    var _s = __read(useState({ idx: -1, rowIdx: -1, mode: 'SELECT' }), 2), selectedPosition = _s[0], setSelectedPosition = _s[1];
+    var _t = __read(useState(null), 2), copiedPosition = _t[0], setCopiedPosition = _t[1];
+    var _u = __read(useState(false), 2), isDragging = _u[0], setDragging = _u[1];
+    var _v = __read(useState(undefined), 2), draggedOverRowIdx = _v[0], setOverRowIdx = _v[1];
     var setDraggedOverRowIdx = useCallback(function (rowIdx) {
@@ -101,3 +103,3 @@ setOverRowIdx(rowIdx);
      */
-    var _y = __read(useGridWidth(width), 2), gridRef = _y[0], gridWidth = _y[1];
+    var _w = __read(useGridWidth(width), 2), gridRef = _w[0], gridWidth = _w[1];
     var viewportWidth = gridWidth - 2; // 2 for border width;
@@ -107,10 +109,9 @@ var headerRowsCount = enableFilters ? 2 : 1;
     var isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
-    var _z = useViewportColumns({
+    var _x = useViewportColumns({
         columns: rawColumns,
-        minColumnWidth: minColumnWidth,
         columnWidths: columnWidths,
-        defaultFormatter: defaultFormatter,
         scrollLeft: scrollLeft,
-        viewportWidth: viewportWidth
-    }), columns = _z.columns, viewportColumns = _z.viewportColumns, totalColumnWidth = _z.totalColumnWidth, lastFrozenColumnIndex = _z.lastFrozenColumnIndex;
+        viewportWidth: viewportWidth,
+        defaultColumnOptions: defaultColumnOptions
+    }), columns = _x.columns, viewportColumns = _x.viewportColumns, totalColumnWidth = _x.totalColumnWidth, lastFrozenColumnIndex = _x.lastFrozenColumnIndex;
     var totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
@@ -122,3 +123,3 @@ var clientHeight = height
         - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
-    var _0 = __read(getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length), 2), rowOverscanStartIdx = _0[0], rowOverscanEndIdx = _0[1];
+    var _y = __read(getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length), 2), rowOverscanStartIdx = _y[0], rowOverscanEndIdx = _y[1];
     /**
@@ -128,3 +129,2 @@ * effects
     useLayoutEffect(function () {
-        var _a;
         if (selectedPosition === prevSelectedPosition.current || selectedPosition.mode === 'EDIT' || !isCellWithinBounds(selectedPosition))
@@ -134,6 +134,6 @@ return;
         scrollToCell(selectedPosition);
-        var column = columns[selectedPosition.idx];
-        if ((_a = column.formatterOptions) === null || _a === void 0 ? void 0 : _a.focusable)
-            return; // Let the formatter handle focus
-        focusSinkRef.current.focus();
+        // fix 360 浏览器 9.5.0.136 兼容性问题修复, 采用其他方式进行聚焦
+        // const column = columns[selectedPosition.idx];
+        // if (column.formatterOptions?.focusable) return; // Let the formatter handle focus
+        // focusSinkRef.current!.focus();
     });
@@ -180,3 +180,4 @@ useEffect(function () {
         },
-        selectCell: selectCell
+        selectCell: selectCell,
+        commitChanges: handleCommit2
     }); });
@@ -202,2 +203,3 @@ /**
                 setCopiedPosition(null);
+                closeEditor();
                 return;
@@ -216,5 +218,3 @@ case 'ArrowUp':
             default:
-                if (isCellWithinBounds(selectedPosition)) {
-                    handleCellInput(event);
-                }
+                handleCellInput(event);
                 break;
@@ -244,4 +244,20 @@ }
         });
-        closeEditor();
+        // closeEditor();
     }
+    function handleRowsChange(row) {
+        var updatedRows = __spread(rows);
+        updatedRows[selectedPosition.rowIdx] = row;
+        onRowsChange === null || onRowsChange === void 0 ? void 0 : onRowsChange(updatedRows);
+        // closeEditor();
+    }
+    function handleCommit2() {
+        var idx = selectedPosition.idx, rowIdx = selectedPosition.rowIdx;
+        var column = columns[idx];
+        if (selectedPosition.mode === 'SELECT'
+            || (column === null || column === void 0 ? void 0 : column.editor2) === undefined
+            || selectedPosition.row === rows[rowIdx]) {
+            return;
+        }
+        handleRowsChange(selectedPosition.row);
+    }
     function handleCopy() {
@@ -273,12 +289,28 @@ var idx = selectedPosition.idx, rowIdx = selectedPosition.rowIdx;
     function handleCellInput(event) {
-        var _a;
+        var _a, _b;
+        if (!isCellWithinBounds(selectedPosition))
+            return;
         var key = event.key;
         var column = columns[selectedPosition.idx];
-        var row = rows[selectedPosition.rowIdx];
-        var canOpenEditor = selectedPosition.mode === 'SELECT' && isCellEditable(selectedPosition);
-        var isActivatedByUser = ((_a = column.unsafe_onCellInput) !== null && _a !== void 0 ? _a : legacyCellInput)(event, row) === true;
-        if (canOpenEditor && (key === 'Enter' || isActivatedByUser)) {
+        if (selectedPosition.mode === 'EDIT') {
+            if (column.editor2 !== undefined && key === 'Enter') {
+                // Custom editors can listen for the event and stop propagation to prevent commit
+                // handleCommit2();
+            }
+            return;
+        }
+        (_b = (_a = column.editorOptions) === null || _a === void 0 ? void 0 : _a.onCellKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        if (event.isDefaultPrevented())
+            return;
+        if (isCellEditable(selectedPosition) && isDefaultCellInput(event)) {
             setSelectedPosition(function (_a) {
                 var idx = _a.idx, rowIdx = _a.rowIdx;
-                return ({ idx: idx, rowIdx: rowIdx, key: key, mode: 'EDIT' });
+                return ({
+                    idx: idx,
+                    rowIdx: rowIdx,
+                    key: key,
+                    mode: 'EDIT',
+                    row: rows[rowIdx],
+                    originalRow: rows[rowIdx]
+                });
             });
@@ -338,2 +370,20 @@ }
     }
+    function handleRowChange(row, commitChanges) {
+        if (selectedPosition.mode === 'SELECT')
+            return;
+        if (commitChanges) {
+            handleRowsChange(row);
+        }
+        else {
+            setSelectedPosition(function (position) { return (__assign(__assign({}, position), { row: row })); });
+        }
+    }
+    function handleOnClose(commitChanges) {
+        if (selectedPosition.mode === 'SELECT')
+            return;
+        if (commitChanges) {
+            handleRowsChange(selectedPosition.row);
+        }
+        closeEditor();
+    }
     /**
@@ -354,4 +404,6 @@ * utils
             return;
+        handleCommit2();
         if (enableEditor && isCellEditable(position)) {
-            setSelectedPosition(__assign(__assign({}, position), { mode: 'EDIT', key: null }));
+            var row = rows[position.rowIdx];
+            setSelectedPosition(__assign(__assign({}, position), { mode: 'EDIT', key: null, row: row, originalRow: row }));
         }
@@ -364,2 +416,4 @@ else {
     function closeEditor() {
+        if (selectedPosition.mode === 'SELECT')
+            return;
         setSelectedPosition(function (_a) {
@@ -472,4 +526,4 @@ var idx = _a.idx, rowIdx = _a.rowIdx;
                 onKeyDown: handleKeyDown,
+                editorPortalTarget: editorPortalTarget,
                 editorContainerProps: {
-                    editorPortalTarget: editorPortalTarget,
                     rowHeight: rowHeight,
@@ -481,2 +535,8 @@ scrollLeft: scrollLeft,
                     onCommitCancel: closeEditor
+                },
+                editor2Props: {
+                    rowHeight: rowHeight,
+                    row: selectedPosition.row,
+                    onRowChange: handleRowChange,
+                    onClose: handleOnClose
                 }
@@ -518,2 +578,6 @@ };
     }
+    if (selectedPosition.mode === 'EDIT' && rows[selectedPosition.rowIdx] !== selectedPosition.originalRow) {
+        // Discard changes if rows are updated from outside
+        closeEditor();
+    }
     return (React.createElement("div", { role: "grid", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-multiselectable": isSelectable ? true : undefined, "aria-colcount": columns.length, "aria-rowcount": headerRowsCount + rows.length + summaryRowsCount, className: clsx('rdg', { 'rdg-viewport-dragging': isDragging }), style: {
@@ -520,0 +584,0 @@ width: width,

lib/editors/EditorContainer.d.ts

@@ -1,3 +0,3 @@
-import { CalculatedColumn, Omit, SharedEditorContainerProps } from '../types';
-export interface EditorContainerProps<R, SR> extends Omit<SharedEditorContainerProps, 'editorPortalTarget'> {
+import { CalculatedColumn, SharedEditorContainerProps } from '../types';
+export interface EditorContainerProps<R, SR> extends SharedEditorContainerProps {
     rowIdx: number;
@@ -4,0 +4,0 @@ row: R;

lib/editors/EditorContainer.js

@@ -66,3 +66,3 @@ var __read = (this && this.__read) || function (o, n) {
         }
-        if (key === 'Enter') {
+        if (key === 'Enter' || key === 'F2') {
             return value;
@@ -69,0 +69,0 @@ }

lib/editors/index.d.ts

 export { default as SimpleTextEditor } from './SimpleTextEditor';
 export { default as EditorPortal } from './EditorPortal';
 export { default as EditorContainer } from './EditorContainer';
-export * from './CellInputHandlers';
+export { default as EditorContainer2 } from './Editor2Container';

lib/editors/index.js

 export { default as SimpleTextEditor } from './SimpleTextEditor';
 export { default as EditorPortal } from './EditorPortal';
 export { default as EditorContainer } from './EditorContainer';
-export * from './CellInputHandlers';
+export { default as EditorContainer2 } from './Editor2Container';
 //# sourceMappingURL=index.js.map

lib/hooks/useClickOutside.d.ts

@@ -49,2 +49,2 @@ /**
  */
-export declare function useClickOutside(onClickOutside: () => void): () => void;
+export declare function useClickOutside(onClick: () => void): () => void;

lib/hooks/useClickOutside.js

@@ -50,11 +50,20 @@ import { useRef, useEffect } from 'react';
  */
-export function useClickOutside(onClickOutside) {
-    var isClickedInside = useRef(false);
+export function useClickOutside(onClick) {
+    var clickedInsideRef = useRef(false);
+    // We need to prevent the `useEffect` from cleaning up between re-renders,
+    // as `handleDocumentClick` might otherwise miss valid click events.
+    // To that end we instead access the latest `onClick` prop via a ref.
+    var onClickRef = useRef(function () {
+        throw new Error('Cannot call an event handler while rendering.');
+    });
     useEffect(function () {
+        onClickRef.current = onClick;
+    });
+    useEffect(function () {
         function handleDocumentClick() {
-            if (isClickedInside.current) {
-                isClickedInside.current = false;
+            if (clickedInsideRef.current) {
+                clickedInsideRef.current = false;
             }
             else {
-                onClickOutside();
+                onClickRef.current();
             }
@@ -66,7 +75,7 @@ }
         };
-    });
+    }, []);
     return function onClickCapture() {
-        isClickedInside.current = true;
+        clickedInsideRef.current = true;
     };
 }
 //# sourceMappingURL=useClickOutside.js.map

lib/hooks/useViewportColumns.d.ts

 import { CalculatedColumn } from '../types';
 import { DataGridProps } from '../DataGrid';
-declare type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>, 'columns'> & Required<Required<Pick<DataGridProps<R, K, SR>, 'minColumnWidth' | 'defaultFormatter'>>>;
+declare type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>, 'columns' | 'defaultColumnOptions'>;
 interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridProps<R, K, SR> {
@@ -9,3 +9,3 @@ viewportWidth: number;
 }
-export declare function useViewportColumns<R, K extends keyof R, SR>({ columns: rawColumns, minColumnWidth, columnWidths, viewportWidth, defaultFormatter, scrollLeft }: ViewportColumnsArgs<R, K, SR>): {
+export declare function useViewportColumns<R, K extends keyof R, SR>({ columns: rawColumns, columnWidths, viewportWidth, scrollLeft, defaultColumnOptions }: ViewportColumnsArgs<R, K, SR>): {
     columns: readonly CalculatedColumn<R, SR>[];
@@ -12,0 +12,0 @@ viewportColumns: readonly CalculatedColumn<R, SR>[];

lib/hooks/useViewportColumns.js

@@ -19,5 +19,11 @@ var __read = (this && this.__read) || function (o, n) {
 import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
+import { ValueFormatter } from '../formatters';
 export function useViewportColumns(_a) {
-    var rawColumns = _a.columns, minColumnWidth = _a.minColumnWidth, columnWidths = _a.columnWidths, viewportWidth = _a.viewportWidth, defaultFormatter = _a.defaultFormatter, scrollLeft = _a.scrollLeft;
-    var _b = useMemo(function () {
+    var _b, _c, _d, _e;
+    var rawColumns = _a.columns, columnWidths = _a.columnWidths, viewportWidth = _a.viewportWidth, scrollLeft = _a.scrollLeft, defaultColumnOptions = _a.defaultColumnOptions;
+    var minColumnWidth = (_b = defaultColumnOptions === null || defaultColumnOptions === void 0 ? void 0 : defaultColumnOptions.minWidth) !== null && _b !== void 0 ? _b : 80;
+    var defaultFormatter = (_c = defaultColumnOptions === null || defaultColumnOptions === void 0 ? void 0 : defaultColumnOptions.formatter) !== null && _c !== void 0 ? _c : ValueFormatter;
+    var defaultSortable = (_d = defaultColumnOptions === null || defaultColumnOptions === void 0 ? void 0 : defaultColumnOptions.sortable) !== null && _d !== void 0 ? _d : false;
+    var defaultResizable = (_e = defaultColumnOptions === null || defaultColumnOptions === void 0 ? void 0 : defaultColumnOptions.resizable) !== null && _e !== void 0 ? _e : false;
+    var _f = useMemo(function () {
         return getColumnMetrics({
@@ -28,8 +34,10 @@ columns: rawColumns,
             columnWidths: columnWidths,
+            defaultSortable: defaultSortable,
+            defaultResizable: defaultResizable,
             defaultFormatter: defaultFormatter
         });
-    }, [columnWidths, rawColumns, defaultFormatter, minColumnWidth, viewportWidth]), columns = _b.columns, lastFrozenColumnIndex = _b.lastFrozenColumnIndex, totalColumnWidth = _b.totalColumnWidth;
-    var _c = __read(useMemo(function () {
+    }, [columnWidths, defaultFormatter, defaultResizable, defaultSortable, minColumnWidth, rawColumns, viewportWidth]), columns = _f.columns, lastFrozenColumnIndex = _f.lastFrozenColumnIndex, totalColumnWidth = _f.totalColumnWidth;
+    var _g = __read(useMemo(function () {
         return getHorizontalRangeToRender(columns, lastFrozenColumnIndex, viewportWidth, scrollLeft);
-    }, [scrollLeft, columns, lastFrozenColumnIndex, viewportWidth]), 2), colOverscanStartIdx = _c[0], colOverscanEndIdx = _c[1];
+    }, [scrollLeft, columns, lastFrozenColumnIndex, viewportWidth]), 2), colOverscanStartIdx = _g[0], colOverscanEndIdx = _g[1];
     var viewportColumns = useMemo(function () {
@@ -36,0 +44,0 @@ return getViewportColumns(columns, colOverscanStartIdx, colOverscanEndIdx);

lib/Row.d.ts

@@ -0,3 +1,6 @@
+import React from 'react';
 import { RowRendererProps } from './types';
-declare const _default: <R, SR>(props: RowRendererProps<R, SR>) => JSX.Element;
+declare const _default: <R, SR = unknown>(props: RowRendererProps<R, SR> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}) => JSX.Element;
 export default _default;

lib/Row.js

@@ -23,7 +23,8 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { memo } from 'react';
+import React, { memo, forwardRef } from 'react';
 import clsx from 'clsx';
 import Cell from './Cell';
+import EditCell from './EditCell';
 import { wrapEvent } from './utils';
-function Row(_a) {
+function Row(_a, ref) {
     var _b = _a.cellRenderer, CellRenderer = _b === void 0 ? Cell : _b, className = _a.className, eventBus = _a.eventBus, rowIdx = _a.rowIdx, isRowSelected = _a.isRowSelected, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, copiedCellIdx = _a.copiedCellIdx, draggedOverCellIdx = _a.draggedOverCellIdx, row = _a.row, viewportColumns = _a.viewportColumns, selectedCellProps = _a.selectedCellProps, onRowClick = _a.onRowClick, rowClass = _a.rowClass, setDraggedOverRowIdx = _a.setDraggedOverRowIdx, onMouseEnter = _a.onMouseEnter, top = _a.top, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], props = __rest(_a, ["cellRenderer", "className", "eventBus", "rowIdx", "isRowSelected", "lastFrozenColumnIndex", "copiedCellIdx", "draggedOverCellIdx", "row", "viewportColumns", "selectedCellProps", "onRowClick", "rowClass", "setDraggedOverRowIdx", "onMouseEnter", "top", 'aria-rowindex', 'aria-selected']);
@@ -34,5 +35,11 @@ function handleDragEnter() {
     className = clsx('rdg-row', "rdg-row-" + (rowIdx % 2 === 0 ? 'even' : 'odd'), { 'rdg-row-selected': isRowSelected }, rowClass === null || rowClass === void 0 ? void 0 : rowClass(row), className);
-    return (React.createElement("div", __assign({ role: "row", "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, className: className, onMouseEnter: wrapEvent(handleDragEnter, onMouseEnter), style: { top: top } }, props), viewportColumns.map(function (column) { return (React.createElement(CellRenderer, { key: column.key, rowIdx: rowIdx, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row, isCopied: copiedCellIdx === column.idx, isDraggedOver: draggedOverCellIdx === column.idx, isRowSelected: isRowSelected, eventBus: eventBus, selectedCellProps: (selectedCellProps === null || selectedCellProps === void 0 ? void 0 : selectedCellProps.idx) === column.idx ? selectedCellProps : undefined, onRowClick: onRowClick })); })));
+    return (React.createElement("div", __assign({ role: "row", "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, ref: ref, className: className, onMouseEnter: wrapEvent(handleDragEnter, onMouseEnter), style: { top: top } }, props), viewportColumns.map(function (column) {
+        var isCellSelected = (selectedCellProps === null || selectedCellProps === void 0 ? void 0 : selectedCellProps.idx) === column.idx;
+        if ((selectedCellProps === null || selectedCellProps === void 0 ? void 0 : selectedCellProps.mode) === 'EDIT' && isCellSelected) {
+            return (React.createElement(EditCell, { key: column.key, rowIdx: rowIdx, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row, onKeyDown: selectedCellProps.onKeyDown, editorPortalTarget: selectedCellProps.editorPortalTarget, editorContainerProps: selectedCellProps.editorContainerProps, editor2Props: selectedCellProps.editor2Props }));
+        }
+        return (React.createElement(CellRenderer, { key: column.key, rowIdx: rowIdx, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row, isCopied: copiedCellIdx === column.idx, isDraggedOver: draggedOverCellIdx === column.idx, isCellSelected: isCellSelected, isRowSelected: isRowSelected, eventBus: eventBus, dragHandleProps: isCellSelected ? selectedCellProps.dragHandleProps : undefined, onKeyDown: isCellSelected ? selectedCellProps.onKeyDown : undefined, onRowClick: onRowClick }));
+    })));
 }
-export default memo(Row);
+export default memo(forwardRef(Row));
 //# sourceMappingURL=Row.js.map

lib/types.d.ts

@@ -36,5 +36,13 @@ import { KeyboardEvent } from 'react';
     sortDescendingFirst?: boolean;
-    unsafe_onCellInput?: (event: React.KeyboardEvent<HTMLDivElement>, row: TRow) => unknown;
     /** Editor to be rendered when cell of column is being edited. If set, then the column is automatically set to be editable */
     editor?: React.ComponentType<EditorProps<TRow[keyof TRow], TRow, TSummaryRow>>;
+    editor2?: React.ComponentType<Editor2Props<TRow, TSummaryRow>>;
+    editorOptions?: {
+        /** Default: true for editor1 and false for editor2 */
+        createPortal?: boolean;
+        /** Default: false */
+        editOnClick?: boolean;
+        /** Prevent default to cancel editing */
+        onCellKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    };
     /** Header renderer for each header cell */
@@ -49,2 +57,4 @@ headerRenderer?: React.ComponentType<HeaderRendererProps<TRow, TSummaryRow>>;
     left: number;
+    resizable: boolean;
+    sortable: boolean;
     formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
@@ -88,2 +98,15 @@ }
 }
+export interface SharedEditor2Props<TRow> {
+    row: Readonly<TRow>;
+    rowHeight: number;
+    onRowChange: (row: Readonly<TRow>, commitChanges?: boolean) => void;
+    onClose: (commitChanges?: boolean) => void;
+}
+export interface Editor2Props<TRow, TSummaryRow = unknown> extends SharedEditor2Props<TRow> {
+    rowIdx: number;
+    column: Readonly<CalculatedColumn<TRow, TSummaryRow>>;
+    top: number;
+    left: number;
+    editorPortalTarget: Element;
+}
 export interface HeaderRendererProps<TRow, TSummaryRow = unknown> {
@@ -95,3 +118,2 @@ column: CalculatedColumn<TRow, TSummaryRow>;
 export interface SharedEditorContainerProps {
-    editorPortalTarget: Element;
     firstEditorKeyPress: string | null;
@@ -108,11 +130,12 @@ scrollLeft: number;
 }
-interface SelectedCellPropsEdit extends SelectedCellPropsBase {
+export interface EditCellProps<TRow> extends SelectedCellPropsBase {
     mode: 'EDIT';
+    editorPortalTarget: Element;
     editorContainerProps: SharedEditorContainerProps;
+    editor2Props: SharedEditor2Props<TRow>;
 }
-export interface SelectedCellPropsSelect extends SelectedCellPropsBase {
+export interface SelectedCellProps extends SelectedCellPropsBase {
     mode: 'SELECT';
     dragHandleProps?: Pick<React.HTMLAttributes<HTMLDivElement>, 'onMouseDown' | 'onDoubleClick'>;
 }
-export declare type SelectedCellProps = SelectedCellPropsEdit | SelectedCellPropsSelect;
 export interface CellRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
@@ -123,7 +146,8 @@ rowIdx: number;
     row: TRow;
-    isRowSelected: boolean;
     isCopied: boolean;
     isDraggedOver: boolean;
+    isCellSelected: boolean;
+    isRowSelected: boolean;
     eventBus: EventBus;
-    selectedCellProps?: SelectedCellProps;
+    dragHandleProps?: Pick<React.HTMLAttributes<HTMLDivElement>, 'onMouseDown' | 'onDoubleClick'>;
     onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
@@ -142,3 +166,3 @@ }
     top: number;
-    selectedCellProps?: SelectedCellProps;
+    selectedCellProps?: EditCellProps<TRow> | SelectedCellProps;
     onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
@@ -145,0 +169,0 @@ rowClass?: (row: TRow) => string | undefined;

lib/utils/columnUtils.d.ts

@@ -7,2 +7,4 @@ import { Column, CalculatedColumn, FormatterProps } from '../types';
     viewportWidth: number;
+    defaultResizable: boolean;
+    defaultSortable: boolean;
     defaultFormatter: React.ComponentType<FormatterProps<R, SR>>;
@@ -9,0 +11,0 @@ }

lib/utils/columnUtils.js

@@ -63,3 +63,3 @@ var __assign = (this && this.__assign) || function () {
     var calculatedColumns = columns.map(function (column, idx) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         // Every column should have a valid width as this stage
@@ -69,3 +69,3 @@ var width = (_a = column.width) !== null && _a !== void 0 ? _a : clampColumnWidth(unallocatedColumnWidth, column, metrics.minColumnWidth);
             width: width,
-            left: left, formatter: (_b = column.formatter) !== null && _b !== void 0 ? _b : metrics.defaultFormatter });
+            left: left, sortable: (_b = column.resizable) !== null && _b !== void 0 ? _b : metrics.defaultSortable, resizable: (_c = column.resizable) !== null && _c !== void 0 ? _c : metrics.defaultResizable, formatter: (_d = column.formatter) !== null && _d !== void 0 ? _d : metrics.defaultFormatter });
         totalWidth += width;
@@ -109,3 +109,3 @@ left += width;
     }
-    return Boolean(column.editor || column.editable);
+    return Boolean(column.editor || column.editor2 || column.editable);
 }
@@ -112,0 +112,0 @@ export function getColumnScrollPosition(columns, idx, currentScrollLeft, currentClientWidth) {

lib/utils/keyboardUtils.d.ts

 export declare function isKeyPrintable(keycode: number): boolean;
 export declare function isCtrlKeyHeldDown(e: React.KeyboardEvent): boolean;
+export declare function isDefaultCellInput(event: React.KeyboardEvent<HTMLDivElement>): boolean;

lib/utils/keyboardUtils.js

@@ -12,2 +12,5 @@ export function isKeyPrintable(keycode) {
 }
+export function isDefaultCellInput(event) {
+    return isKeyPrintable(event.keyCode) || ['Enter', 'F2', 'Backspace', 'Delete'].includes(event.key);
+}
 //# sourceMappingURL=keyboardUtils.js.map

package.json

 {
   "name": "react-data-grid-temp",
-  "version": "7.0.0-canary.18.2",
+  "version": "7.0.0-canary.20",
   "license": "MIT",
@@ -33,6 +33,6 @@ "description": "Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like",
     "eslint": "eslint --ext mjs,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories jest tools",
-    "eslint:fix": "npm run eslint -- --fix",
+    "eslint:fix": "yarn run eslint -- --fix",
     "typecheck": "tsc -p tsconfig.all.json",
     "build-storybook": "build-storybook --quiet",
-    "prepublishOnly": "npm install && npm run build",
+    "prepublishOnly": "yarn install && yarn run build",
     "postpublish": "git push --follow-tags origin HEAD"
@@ -39,0 +39,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

371427

increased by6.95%

Number of package files

134

increased by4.69%

Lines of code

3281

increased by7.75%

No dependency changes