@rowsncolumns/grid 8.0.7 → 9.0.0

package/src/FillHandle.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ShapeConfig } from "konva/types/Shape";
+import { ShapeConfig } from "konva/lib/Shape";
 
 /**
  * Fill handle component
@@ -25,7 +25,7 @@ const FillHandle: React.FC<ShapeConfig> = ({
         border: `${strokeWidth}px ${borderColor} solid`,
         borderRightWidth: 0,
         borderBottomWidth: 0,
-        background: stroke,
+        background: stroke as string,
         cursor: "crosshair",
         pointerEvents: "all",
       }}

package/src/Grid.tsx

@@ -9,8 +9,9 @@ import React, {
   memo,
   useEffect,
   Key,
+  UIEvent,
 } from "react";
-import { Stage, Layer, Group, Line } from "react-konva/lib/ReactKonvaCore";
+import { Stage, Layer, Group, Line } from "react-konva";
 import {
   getRowStartIndexForOffset,
   getRowStopIndexForStartIndex,
@@ -35,7 +36,7 @@ import {
   clampIndex,
   canUseDOM,
 } from "./helpers";
-import { ShapeConfig } from "konva/types/Shape";
+import type { ShapeConfig } from "konva/lib/Shape";
 import { CellRenderer as defaultItemRenderer } from "./Cell";
 import { CellRenderer as defaultOverlayRenderer } from "./CellOverlay";
 import Selection from "./Selection";
@@ -43,12 +44,12 @@ import FillHandle from "./FillHandle";
 import GridLine from "./GridLine";
 import { createHTMLBox } from "./utils";
 import invariant from "tiny-invariant";
-import { StageConfig } from "konva/types/Stage";
+import type { StageConfig } from "konva/lib/Stage";
 import { Direction } from "./types";
 import Konva from "konva";
 
 export interface GridProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onScroll"> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onScroll" | "children"> {
   /**
    * Width of the grid
    */
@@ -304,8 +305,10 @@ export interface ScrollState extends ScrollCoords {
 }
 
 export type RenderComponent = React.FC<RendererProps>;
-export interface CellPosition
-  extends Pick<ShapeConfig, "x" | "y" | "width" | "height"> {}
+export interface CellPosition extends Pick<ShapeConfig, "x" | "y"> {
+  width?: ShapeConfig["width"];
+  height?: ShapeConfig["height"];
+}
 export interface RendererProps
   extends CellInterface,
     CellPosition,
@@ -621,7 +624,7 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
      * Get top offset of rowIndex
      */
     const getRowOffset = useCallback(
-      (index) => {
+      (index: number) => {
         return getRowOffsetHelper({
           index,
           rowHeight,
@@ -637,7 +640,7 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
      * Get lefft offset of columnIndex
      */
     const getColumnOffset = useCallback(
-      (index) => {
+      (index: number) => {
         return getColumnOffsetHelper({
           index,
           rowHeight,
@@ -653,7 +656,7 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
      * Get height of rowIndex
      */
     const getRowHeight = useCallback(
-      (index) => {
+      (index: number) => {
         return getRowHeightHelper(index, instanceProps.current);
       },
       [instanceProps.current]
@@ -663,7 +666,7 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
      * Get height of columNiondex
      */
     const getColumnWidth = useCallback(
-      (index) => {
+      (index: number) => {
         return getColumnWidthHelper(index, instanceProps.current);
       },
       [instanceProps.current]
@@ -967,11 +970,8 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
       if (!verticalScrollRef.current || !scrollSnapRefs.current) return;
       if (deltaY !== 0) {
         const direction = deltaY < 0 ? Direction.Up : Direction.Down;
-        const {
-          visibleRowStartIndex,
-          rowCount,
-          isHiddenRow,
-        } = scrollSnapRefs.current;
+        const { visibleRowStartIndex, rowCount, isHiddenRow } =
+          scrollSnapRefs.current;
         let nextRowIndex =
           direction === Direction.Up
             ? // User is scrolling up
@@ -991,11 +991,8 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
     const snapToColumnFn = useCallback(({ deltaX }: SnapColumnProps) => {
       if (!horizontalScrollRef.current || !scrollSnapRefs.current) return;
       if (deltaX !== 0) {
-        const {
-          visibleColumnStartIndex,
-          columnCount,
-          isHiddenColumn,
-        } = scrollSnapRefs.current;
+        const { visibleColumnStartIndex, columnCount, isHiddenColumn } =
+          scrollSnapRefs.current;
         const direction = deltaX < 0 ? Direction.Left : Direction.Right;
         let nextColumnIndex =
           direction === Direction.Left
@@ -1013,9 +1010,8 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
       }
     }, []);
     const snapToRowThrottler = useRef<({ deltaY }: SnapRowProps) => void>();
-    const snapToColumnThrottler = useRef<
-      ({ deltaX }: SnapColumnProps) => void
-    >();
+    const snapToColumnThrottler =
+      useRef<({ deltaX }: SnapColumnProps) => void>();
 
     /**
      * Register snap throttlers
@@ -1247,8 +1243,8 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
 
     /* Handle vertical scroll */
     const handleScroll = useCallback(
-      (e) => {
-        const { scrollTop } = e.target;
+      (e: UIEvent<Element>) => {
+        const { scrollTop } = e.currentTarget;
 
         setScrollState((prev) => ({
           ...prev,
@@ -1269,8 +1265,8 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
 
     /* Handle horizontal scroll */
     const handleScrollLeft = useCallback(
-      (e) => {
-        const { scrollLeft } = e.target;
+      (e: UIEvent<Element>) => {
+        const { scrollLeft } = e.currentTarget;
         setScrollState((prev) => ({
           ...prev,
           isScrolling: true,
@@ -1441,7 +1437,7 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
     /**
      * Fired when user tries to scroll the canvas
      */
-    const handleWheel = useCallback((event: globalThis.MouseWheelEvent) => {
+    const handleWheel = useCallback((event: WheelEvent) => {
       /* If user presses shift key, scroll horizontally */
       const isScrollingHorizontally = event.shiftKey;
 
@@ -1638,11 +1634,11 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
 
     const mergedCellRenderMap = new Set();
     /* Draw all cells */
-    const cells: React.ReactNodeArray = [];
+    const cells: React.ReactNode[] = [];
     /**
      * Lets users draw cells on top of existing canvas
      */
-    const cellOverlays: React.ReactNodeArray = [];
+    const cellOverlays: React.ReactNode[] = [];
 
     if (columnCount > 0 && rowCount) {
       for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
@@ -1770,7 +1766,7 @@ const Grid: React.FC<GridProps & RefAttribute> = memo(
 
     /* Draw frozen rows */
     const frozenRowCells = [];
-    const frozenRowCellOverlays: React.ReactNodeArray = [];
+    const frozenRowCellOverlays: React.ReactNode[] = [];
     for (
       let rowIndex = 0;
       rowIndex < Math.min(rowStopIndex, frozenRows);

package/src/GridLine.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { ShapeConfig } from "konva/types/Shape";
+import { ShapeConfig } from "konva/lib/Shape";
 import { Line } from "react-konva";
 
 const GridLine: React.FC<ShapeConfig> = (props) => {
-  const { points, stroke, strokeWidth, offsetY, offsetX } = props
+  const { points, stroke, strokeWidth, offsetY, offsetX } = props;
   return (
     <Line
       points={points}
@@ -17,7 +17,7 @@ const GridLine: React.FC<ShapeConfig> = (props) => {
       listening={false}
       perfectDrawEnabled={false}
     />
-  )
+  );
 };
 
 export default GridLine;

package/src/Image.tsx

@@ -1,30 +1,43 @@
-import React, { useMemo, memo } from 'react';
-import { Image } from 'react-konva';
-import useImage from './hooks/useImage';
-import { ShapeConfig } from 'konva/types/Shape';
+import React, { useMemo, memo } from "react";
+import { Image } from "react-konva";
+import useImage from "./hooks/useImage";
+import { ShapeConfig } from "konva/lib/Shape";
 
 export interface ImageProps extends ShapeConfig {
   url: string;
-  spacing?: number
+  spacing?: number;
 }
 
 const ImageComponent: React.FC<ImageProps> = memo((props) => {
-  let { url, width = 0, height = 0, x = 0, y = 0, spacing = 1, ...rest } = props
-  const { image, width: imageWidth, height: imageHeight, status } = useImage({ url });  
+  let {
+    url,
+    width = 0,
+    height = 0,
+    x = 0,
+    y = 0,
+    spacing = 1,
+    ...rest
+  } = props;
+  const { image, width: imageWidth, height: imageHeight, status } = useImage({
+    url,
+  });
   const aspectRatio = useMemo(() => {
-    return Math.min((width - spacing) / imageWidth, (height - spacing) / imageHeight)
-  }, [ imageWidth, imageHeight, width, height, spacing])
-  x = x + spacing
-  y = y + spacing
-  
-  width = Math.min(imageWidth, aspectRatio * imageWidth)
-  height = Math.min(imageHeight, aspectRatio * imageHeight)
-  if (status !== 'loaded') {
-    return null
+    return Math.min(
+      (width - spacing) / imageWidth,
+      (height - spacing) / imageHeight
+    );
+  }, [imageWidth, imageHeight, width, height, spacing]);
+  x = x + spacing;
+  y = y + spacing;
+
+  width = Math.min(imageWidth, aspectRatio * imageWidth);
+  height = Math.min(imageHeight, aspectRatio * imageHeight);
+  if (status !== "loaded") {
+    return null;
   }
   return (
     <Image {...rest} x={x} y={y} height={height} width={width} image={image} />
   );
-})
+});
 
-export default ImageComponent
+export default ImageComponent;

package/src/helpers.ts

@@ -1063,7 +1063,7 @@ export const AutoSizerCanvas = (defaults: AutoSizerProps = {}) => {
     }
     return { width: Math.ceil(width), height: Math.ceil(height) };
   };
-  const measureText = (text: React.ReactText) =>
+  const measureText = (text: string | number) =>
     getWidthOfLongestText(castToString(text));
   const reset = () => setFont(defaults);
   /* Set font in constructor */
@@ -1139,7 +1139,7 @@ export const clampIndex = (
   return index;
 };
 
-type ValueGetter = (cell: CellInterface) => React.ReactText | undefined;
+type ValueGetter = (cell: CellInterface) => string | number | undefined;
 
 /**
  * Find a cell with content if the current cell is out of the current dataregion

package/src/hooks/useCopyPaste.ts

@@ -57,7 +57,7 @@ type SupportedType =
   | "text/html"
   | "text/xml";
 
-const defaultGetText = (text: any) => text;
+const defaultGetText = (config: { text: string }) => config.text;
 
 /**
  * Copy paste hook
@@ -134,7 +134,7 @@ const useCopyPaste = ({
             columnIndex: j,
           };
           const config = {
-            ...selectionRef.current.getValue(coords),
+            text: selectionRef.current.getValue(coords),
             sourceCell: coords,
           };
           const value = getText(config);

package/src/hooks/useEditable.tsx

@@ -53,7 +53,7 @@ export interface UseEditableOptions {
    * Callback when user submits a value. Use this to update state
    */
   onSubmit?: (
-    value: React.ReactText,
+    value: string,
     activeCell: CellInterface,
     nextActiveCell?: CellInterface | null
   ) => void;
@@ -211,7 +211,7 @@ export interface EditorProps {
   /**
    * Initial value of the cell
    */
-  value?: React.ReactText;
+  value?: string | number;
   /**
    * Callback when a value has changed.
    */
@@ -220,7 +220,7 @@ export interface EditorProps {
    * Callback to submit the value back to data store
    */
   onSubmit?: (
-    value: React.ReactText,
+    value: string | number,
     activeCell: CellInterface,
     nextActiveCell?: CellInterface | null
   ) => void;
@@ -324,7 +324,7 @@ const DefaultEditor: React.FC<EditorProps> = (props) => {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const { x = 0, y = 0, width = 0, height = 0 } = position;
   const getWidth = useCallback(
-    (text) => {
+    (text: string | number) => {
       const textWidth = autoSizerCanvas.measureText(text)?.width || 0;
       return Math.max(textWidth + padding, width + borderWidth / 2);
     },
@@ -541,10 +541,8 @@ const useEditable = ({
         /**
          * Set max editor ref based on grid container
          */
-        const {
-          containerWidth,
-          containerHeight,
-        } = gridRef.current.getDimensions();
+        const { containerWidth, containerHeight } =
+          gridRef.current.getDimensions();
         maxEditorDimensionsRef.current = {
           height: containerHeight - (cellPosition.y ?? 0),
           width: containerWidth - (cellPosition.x ?? 0),
@@ -784,7 +782,7 @@ const useEditable = ({
   /* Save the value */
   const handleSubmit = useCallback(
     (
-      value: React.ReactText,
+      value: string,
       activeCell: CellInterface,
       nextActiveCell?: CellInterface | null
     ) => {
@@ -834,7 +832,7 @@ const useEditable = ({
   );
 
   const handleChange = useCallback(
-    (newValue: string, activeCell) => {
+    (newValue: string, activeCell: CellInterface) => {
       /**
        * Make sure we dont call onChange if initialValue is set
        * This is to accomodate for editor that fire onChange during initialvalue

package/src/hooks/useFilter.tsx

@@ -16,13 +16,13 @@ export interface FilterView {
 }
 
 export type Filter = Record<string, FilterDefinition>;
-export type FilterDefinition<T = React.ReactText> = {
+export type FilterDefinition<T = string | number> = {
   condition?: FilterConditionDefinition<T>;
   equals?: T[];
   sort?: SortDirection;
 };
 export type FilterOperators = ContainsTextOperators | DataValidationOperator;
-export type FilterConditionDefinition<T = React.ReactText> = {
+export type FilterConditionDefinition<T = string | number> = {
   operator?: FilterOperators;
   values?: T[];
 };
@@ -150,7 +150,7 @@ const useFilter = ({
       const isFrozenRow = coords.rowIndex < frozenRows;
 
       /* Set cell position */
-      setPosition((prev) => {
+      setPosition(() => {
         const left = pos.x as number;
         const top = pos.y as number;
         const cellWidth = pos.width as number;

package/src/hooks/useSelection.ts

@@ -119,7 +119,7 @@ export interface UseSelectionOptions {
   /**
    * Value getter
    */
-  getValue: (cell: CellInterface) => React.ReactText | undefined;
+  getValue: (cell: CellInterface) => string | number | undefined;
   /**
    * New selection mode
    */
@@ -257,9 +257,8 @@ const useSelection = ({
   const [activeCell, setActiveCell] = useState<CellInterface | null>(
     initialActiveCell
   );
-  const [selections, setSelections] = useState<SelectionArea[]>(
-    initialSelections
-  );
+  const [selections, setSelections] =
+    useState<SelectionArea[]>(initialSelections);
   const [fillSelection, setFillSelection] = useState<SelectionArea | null>(
     null
   );
@@ -543,9 +542,8 @@ const useSelection = ({
           const cellIndex = cellIndexInSelection(coords, selections);
           if (cellIndex !== -1) {
             const newSelection = removeSelectionByIndex(cellIndex);
-            const nextActiveCell = getPossibleActiveCellFromSelections(
-              newSelection
-            );
+            const nextActiveCell =
+              getPossibleActiveCellFromSelections(newSelection);
             if (nextActiveCell !== null) {
               setActiveCell(nextActiveCell);
             }
@@ -607,8 +605,7 @@ const useSelection = ({
 
     const coords = gridRef.current.getCellCoordsFromOffset(
       e.clientX,
-      e.clientY,
-      true
+      e.clientY
     );
 
     if (!coords) return;
@@ -909,10 +906,8 @@ const useSelection = ({
   // Page down
   const pageDown = () => {
     if (!activeCell || !gridRef?.current) return;
-    const {
-      visibleRowStartIndex,
-      visibleRowStopIndex,
-    } = gridRef.current.getViewPort();
+    const { visibleRowStartIndex, visibleRowStopIndex } =
+      gridRef.current.getViewPort();
     const pageSize = visibleRowStopIndex - visibleRowStartIndex;
     const rowIndex = Math.min(activeCell.rowIndex + pageSize, rowCount - 1);
     const newActiveCell = {
@@ -927,10 +922,8 @@ const useSelection = ({
   // Page up
   const pageUp = () => {
     if (!activeCell || !gridRef?.current) return;
-    const {
-      visibleRowStartIndex,
-      visibleRowStopIndex,
-    } = gridRef.current.getViewPort();
+    const { visibleRowStartIndex, visibleRowStopIndex } =
+      gridRef.current.getViewPort();
     const pageSize = visibleRowStopIndex - visibleRowStartIndex;
     const rowIndex = Math.max(
       activeCell.rowIndex - pageSize,
@@ -948,10 +941,8 @@ const useSelection = ({
   // Page right
   const pageRight = () => {
     if (!activeCell || !gridRef?.current) return;
-    const {
-      visibleColumnStartIndex,
-      visibleColumnStopIndex,
-    } = gridRef.current.getViewPort();
+    const { visibleColumnStartIndex, visibleColumnStopIndex } =
+      gridRef.current.getViewPort();
     const pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
     const columnIndex = Math.min(
       activeCell.columnIndex + pageSize,
@@ -969,10 +960,8 @@ const useSelection = ({
   // Page left
   const pageLeft = () => {
     if (!activeCell || !gridRef?.current) return;
-    const {
-      visibleColumnStartIndex,
-      visibleColumnStopIndex,
-    } = gridRef.current.getViewPort();
+    const { visibleColumnStartIndex, visibleColumnStopIndex } =
+      gridRef.current.getViewPort();
     const pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
     const columnIndex = Math.max(
       activeCell.columnIndex - pageSize,
@@ -1285,7 +1274,8 @@ const useSelection = ({
       }
       let coords = gridRef.current.getCellCoordsFromOffset(
         e.nativeEvent.clientX,
-        e.nativeEvent.clientY
+        e.nativeEvent.clientY,
+        false // Todo
       );
       if (!coords) {
         return;
@@ -1329,8 +1319,7 @@ const useSelection = ({
     if (!gridRef?.current) return;
     const coords = gridRef.current.getCellCoordsFromOffset(
       e.clientX,
-      e.clientY,
-      false
+      e.clientY
     );
     if (!coords) {
       return;

package/src/hooks/useSizer.ts

@@ -106,7 +106,7 @@ export interface AutoResizerResults {
   /**
    * Text size getter
    */
-  getTextMetrics: (text: React.ReactText) => TextDimensions;
+  getTextMetrics: (text: string | number) => TextDimensions;
 }
 
 export interface TextDimensions {
@@ -194,7 +194,7 @@ const useAutoSizer = ({
     autoSizer.current.setFont({ fontFamily, fontSize, fontWeight, fontStyle });
   }, [fontFamily, fontSize, fontWeight, fontStyle]);
 
-  const getTextMetrics = useCallback((text: React.ReactText) => {
+  const getTextMetrics = useCallback((text: string | number) => {
     return autoSizer.current.measureText(castToString(text) as string);
   }, []);
 

package/src/hooks/useTooltip.tsx

@@ -149,9 +149,8 @@ const useTooltip = ({
   }, []);
 
   /* Raf throttler */
-  const mouseMoveThrottler = useRef<
-    (e: React.MouseEvent<HTMLElement>) => void
-  >();
+  const mouseMoveThrottler =
+    useRef<(e: React.MouseEvent<HTMLElement>) => void>();
   const mouseLeaveThrottler = useRef<() => void>();
   useEffect(() => {
     mouseMoveThrottler.current = throttle(handleMouseMove, 100);

package/src/hooks/useTouch.ts

@@ -53,12 +53,12 @@ const useTouch = ({ gridRef }: TouchProps): TouchResults => {
 
       const dims = gridRef.current?.getDimensions();
       /* Update dimensions */
-      updateScrollDimensions(dims);
+      if (dims) updateScrollDimensions(dims);
     }
   }, []);
 
   /* Scroll to x, y coordinate */
-  const scrollTo = useCallback(({ scrollLeft, scrollTop }) => {
+  const scrollTo = useCallback(({ scrollLeft, scrollTop }: ScrollCoords) => {
     if (scrollerRef.current)
       scrollerRef.current.scrollTo(scrollLeft, scrollTop);
   }, []);
@@ -73,6 +73,11 @@ const useTouch = ({ gridRef }: TouchProps): TouchResults => {
       containerHeight,
       estimatedTotalWidth,
       estimatedTotalHeight,
+    }: {
+      containerWidth: number;
+      containerHeight: number;
+      estimatedTotalWidth: number;
+      estimatedTotalHeight: number;
     }) => {
       scrollerRef.current.setDimensions(
         containerWidth,
@@ -84,9 +89,12 @@ const useTouch = ({ gridRef }: TouchProps): TouchResults => {
     []
   );
 
-  const handleTouchScroll = useCallback((scrollLeft, scrollTop) => {
-    gridRef.current?.scrollTo({ scrollTop, scrollLeft });
-  }, []);
+  const handleTouchScroll = useCallback(
+    (scrollLeft: number, scrollTop: number) => {
+      gridRef.current?.scrollTo({ scrollTop, scrollLeft });
+    },
+    []
+  );
   const handleTouchStart = useCallback((e: globalThis.TouchEvent) => {
     scrollerRef.current.doTouchStart(e.touches, e.timeStamp);
   }, []);
@@ -94,7 +102,7 @@ const useTouch = ({ gridRef }: TouchProps): TouchResults => {
     e.preventDefault();
     scrollerRef.current.doTouchMove(e.touches, e.timeStamp);
   }, []);
-  const handleTouchEnd = useCallback((e) => {
+  const handleTouchEnd = useCallback((e: globalThis.TouchEvent) => {
     scrollerRef.current.doTouchEnd(e.timeStamp);
   }, []);
 

package/src/tests/Grid.spec.tsx

@@ -1,13 +1,12 @@
 // @ts-nocheck
 import React from "react";
 import Grid from "../Grid";
+import "konva/lib/shapes/Rect";
 import { Rect } from "react-konva";
-import { render, fireEvent, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 
 describe("Grid", () => {
   let itemRenderer;
-  let rowCount;
-  let columnCount;
   let rowHeight;
   let columnWidth;
 

package/src/tests/usePagination.test.ts

@@ -11,7 +11,7 @@ describe("usePagination", () => {
   it("throw error if pageSize and total is not provided", () => {
     const { result } = renderHook(() => usePagination());
     expect(result.error.message).toBe(
-      "Cannot read property 'initialCurrentPage' of undefined"
+      "Cannot read properties of undefined (reading 'initialCurrentPage')"
     );
   });
 

package/src/tests/useSelection.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
 import useSelection from "./../hooks/useSelection";
 
 describe("useSelection", () => {
@@ -7,6 +7,7 @@ describe("useSelection", () => {
   });
 
   it("sets initialselection to be empty", () => {
+    // @ts-ignore
     const { result } = renderHook(() => useSelection({}));
     expect(result.current.selections).toStrictEqual([]);
   });
@@ -16,6 +17,7 @@ describe("useSelection", () => {
       { bounds: { top: 0, left: 0, right: 0, bottom: 0 } },
     ];
     const { result } = renderHook(() =>
+      // @ts-ignore
       useSelection({
         initialSelections,
       })

package/src/utils.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useCallback } from "react";
-import { ShapeConfig } from "konva/types/Shape";
+import React from "react";
+import { ShapeConfig } from "konva/lib/Shape";
 import { Line, Rect } from "react-konva";
 import { SelectionProps } from "./Grid";