react-konva-grid - npm Package Compare versions

Comparing version 2.8.8 to 2.8.9

dist/Grid.js

@@ -61,3 +61,3 @@ "use strict";
 const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
-    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = true, shadowSettings = defaultShadowSettings, borderStyles = [], children, stageProps, wrapper = (children) => children, cellAreas = [] } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "activeCellStrokeWidth", "activeCell", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles", "children", "stageProps", "wrapper", "cellAreas"]);
+    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = false, shadowSettings = defaultShadowSettings, borderStyles = [], children, stageProps, wrapper = (children) => children, cellAreas = [] } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "activeCellStrokeWidth", "activeCell", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles", "children", "stageProps", "wrapper", "cellAreas"]);
     tiny_invariant_1.default(!(children && typeof children !== "function"), "Children should be a function");
@@ -77,3 +77,3 @@ /* Expose some methods in ref */
             getCellOffsetFromCoords,
-            focus: () => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+            focus: focusContainer,
             resizeColumns,
@@ -106,2 +106,7 @@ resizeRows,
     const { scrollTop, scrollLeft, isScrolling } = scrollState;
+    /* Focus container */
+    const focusContainer = react_1.useCallback(() => {
+        var _a;
+        return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     /**
@@ -432,8 +437,9 @@ * Snaps vertical scrollbar to the next/prev visible row
             : void 0;
+        const coords = {
+            scrollLeft: newScrollLeft,
+            scrollTop: newScrollTop,
+        };
         /* Scroll in the next frame, Useful when user wants to jump from 1st column to last */
         window.requestAnimationFrame(() => {
-            scrollTo({
-                scrollLeft: newScrollLeft,
-                scrollTop: newScrollTop,
-            });
+            scrollTo(coords);
         });
@@ -727,4 +733,2 @@ }, [
     const frozenColumnShadow = react_1.useMemo(() => {
-        if (showFrozenShadow == false || frozenColumns === 0 || scrollLeft === 0)
-            return null;
         const frozenColumnLineX = helpers_1.getColumnOffset({
@@ -737,9 +741,3 @@ index: frozenColumns,
         return (react_1.default.createElement(ReactKonvaCore_1.Line, Object.assign({ points: [frozenColumnLineX, 0, frozenColumnLineX, containerHeight], offsetX: 1 }, shadowSettings)));
-    }, [
-        shadowSettings,
-        showFrozenShadow,
-        frozenColumns,
-        containerHeight,
-        scrollLeft,
-    ]);
+    }, [shadowSettings, frozenColumns, containerHeight]);
     /**
@@ -749,4 +747,2 @@ * Frozen row shadow
     const frozenRowShadow = react_1.useMemo(() => {
-        if (showFrozenShadow === false || frozenRows === 0 || scrollTop === 0)
-            return null;
         const frozenRowLineY = helpers_1.getRowOffset({
@@ -759,9 +755,3 @@ index: frozenRows,
         return (react_1.default.createElement(ReactKonvaCore_1.Line, Object.assign({ points: [0, frozenRowLineY, containerWidth, frozenRowLineY], offsetY: 1 }, shadowSettings)));
-    }, [
-        shadowSettings,
-        showFrozenShadow,
-        frozenRows,
-        containerWidth,
-        scrollTop,
-    ]);
+    }, [shadowSettings, frozenRows, containerWidth]);
     /* Draw frozen intersection cells */
@@ -1006,2 +996,10 @@ const frozenIntersectionCells = [];
     const listenToEvents = !isScrolling;
+    /* Frozen row shadow */
+    const frozenRowShadowComponent = showFrozenShadow && frozenRows !== 0 && scrollTop !== 0
+        ? frozenRowShadow
+        : null;
+    /* Frozen column shadow */
+    const frozenColumnShadowComponent = showFrozenShadow && frozenColumns !== 0 && scrollLeft !== 0
+        ? frozenColumnShadow
+        : null;
     const stageChildren = (react_1.default.createElement(react_1.default.Fragment, null,
@@ -1018,4 +1016,4 @@ react_1.default.createElement(ReactKonvaCore_1.Layer, null,
                 activeCellSelection),
-            frozenColumnShadow,
-            frozenRowShadow,
+            frozenRowShadowComponent,
+            frozenColumnShadowComponent,
             react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: scrollLeft },
@@ -1022,0 +1020,0 @@ frozenRowCells,

dist/hooks/useEditable.js

@@ -97,3 +97,3 @@ "use strict";
                 onSubmit &&
-                    onSubmit(value, cell, nextFocusableCell(cell, types_1.Direction.Right));
+                    onSubmit(value, cell, nextFocusableCell(cell, isShiftKey ? types_1.Direction.Left : types_1.Direction.Right));
             }
@@ -212,2 +212,8 @@ } }, rest)));
                 break;
+            case types_1.Direction.Left:
+                nextActiveCell = {
+                    rowIndex: currentCell.rowIndex,
+                    columnIndex: currentCell.columnIndex - 1,
+                };
+                break;
             default:
@@ -214,0 +220,0 @@ nextActiveCell = {

package.json

 {
   "name": "react-konva-grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "main": "dist/index.js",
@@ -14,3 +14,3 @@ "license": "MIT",
     "check:types": "tsc --noEmit",
-    "storybook": "start-storybook -p 9002",
+    "storybook": "start-storybook -p 9002 -s ./public",
     "build-storybook": "build-storybook -c .storybook -o .out",
@@ -17,0 +17,0 @@ "deploy-storybook": "storybook-to-ghpages",

No alert changes

Improved metrics

Total package byte prevSize

366034

increased by0.34%

Lines of code

7954

increased by0.2%

No dependency changes