@rowsncolumns/grid 9.0.4 → 13.2.33

package/dist/cjs/index.d.ts

@@ -0,0 +1,19 @@
+import { Cell, CellRenderer } from "./Cell";
+import { CellOverlay, CellRenderer as CellOverlayRenderer } from "./CellOverlay";
+import Grid from "./Grid";
+import useFilter from "./hooks/useFilter";
+import useUndo from "./hooks/useUndo";
+import { Image } from "./Image";
+import Selection from "./Selection";
+export { Grid, CellRenderer, Cell, CellOverlay, useUndo, useFilter, CellOverlayRenderer, Image, Selection, };
+export * from "./Grid";
+export * from "./helpers";
+export * from "./hooks/useFilter";
+export * from "./hooks/useUndo";
+export * from "./hooks/useTooltip";
+export * from "./hooks/useEditable";
+export * from "./types";
+export type { ImageProps } from "./Image";
+export * from "./utils";
+export * from "./Context";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,YAAY,IAAI,mBAAmB,EACpC,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,KAAK,EACL,SAAS,GACV,CAAC;AACF,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = exports.Image = exports.CellOverlayRenderer = exports.useFilter = exports.useUndo = exports.CellOverlay = exports.Cell = exports.CellRenderer = exports.Grid = void 0;
+var tslib_1 = require("tslib");
+var Cell_1 = require("./Cell");
+Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return Cell_1.Cell; } });
+Object.defineProperty(exports, "CellRenderer", { enumerable: true, get: function () { return Cell_1.CellRenderer; } });
+var CellOverlay_1 = require("./CellOverlay");
+Object.defineProperty(exports, "CellOverlay", { enumerable: true, get: function () { return CellOverlay_1.CellOverlay; } });
+Object.defineProperty(exports, "CellOverlayRenderer", { enumerable: true, get: function () { return CellOverlay_1.CellRenderer; } });
+var Grid_1 = tslib_1.__importDefault(require("./Grid"));
+exports.Grid = Grid_1.default;
+var useFilter_1 = tslib_1.__importDefault(require("./hooks/useFilter"));
+exports.useFilter = useFilter_1.default;
+var useUndo_1 = tslib_1.__importDefault(require("./hooks/useUndo"));
+exports.useUndo = useUndo_1.default;
+var Image_1 = require("./Image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
+var Selection_1 = tslib_1.__importDefault(require("./Selection"));
+exports.Selection = Selection_1.default;
+tslib_1.__exportStar(require("./Grid"), exports);
+tslib_1.__exportStar(require("./helpers"), exports);
+tslib_1.__exportStar(require("./hooks/useFilter"), exports);
+tslib_1.__exportStar(require("./hooks/useUndo"), exports);
+tslib_1.__exportStar(require("./hooks/useTooltip"), exports);
+tslib_1.__exportStar(require("./hooks/useEditable"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./Context"), exports);

package/dist/cjs/tsconfig.cjs.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../cell.tsx","../../celloverlay.tsx","../../context.tsx","../../fillhandle.tsx","../../grid.tsx","../../gridline.tsx","../../image.tsx","../../memoizedgrid.tsx","../../selection.tsx","../../helpers.ts","../../index.tsx","../../types.ts","../../utils.tsx","../../vitest.config.ts","../../hooks/usecopypaste.ts","../../hooks/useeditable.tsx","../../hooks/usefilter.tsx","../../hooks/useimage.ts","../../hooks/usepagination.tsx","../../hooks/usesizer.ts","../../hooks/usetooltip.tsx","../../hooks/useundo.ts"],"version":"5.8.3"}

package/dist/{types.d.ts → cjs/types.d.ts}

@@ -58,8 +58,13 @@ export declare enum MimeType {
     json = "application/json"
 }
 export declare enum MouseButtonCodes {
-    "left" = 1,
-    "middle" = 2,
-    "right" = 3
+    "left" = 0,
+    "middle" = 1,
+    "right" = 2
 }
 export type SelectionPolicy = "single" | "range" | "multiple";
+export type RowRange = {
+    start: number;
+    end: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../types.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,KAAK;IACV,IAAI,KAAK;IACT,EAAE,KAAK;IACP,IAAI,KAAK;IACT,MAAM,KAAK;IACX,GAAG,IAAI;IACP,IAAI,KAAK;IACT,MAAM,KAAK;IACX,SAAS,IAAI;IACb,KAAK,KAAK;IACV,CAAC,KAAK;IACN,KAAK,KAAK;IACV,GAAG,KAAK;IACR,CAAC,KAAK;IACN,IAAI,KAAK;IACT,GAAG,KAAK;IACR,QAAQ,KAAK;IACb,MAAM,KAAK;IACX,CAAC,KAAK;IACN,QAAQ,KAAK;IACb,KAAK,KAAK;IACV,KAAK,KAAK;IACV,KAAK,KAAK;IACV,KAAK,KAAK;IACV,KAAK,KAAK;IACV,KAAK,KAAK;IACV,KAAK,KAAK;IACV,UAAU,MAAM;IAChB,KAAK,KAAK;IACV,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,KAAK,KAAK;IACV,MAAM,KAAK;IACX,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,GAAG,MAAM;IACT,GAAG,MAAM;IACT,GAAG,MAAM;CACV;AAED,oBAAY,SAAS;IACnB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,QAAQ;IAClB,IAAI,cAAc;IAClB,GAAG,aAAa;IAChB,KAAK,eAAe;IACpB,IAAI,qBAAqB;CAC1B;AAED,oBAAY,gBAAgB;IAC1B,MAAM,IAAI;IACV,QAAQ,IAAI;IACZ,OAAO,IAAI;CACZ;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC"}

package/dist/{types.js → cjs/types.js}

@@ -48,25 +48,24 @@ var KeyCodes;
     KeyCodes[KeyCodes["F10"] = 121] = "F10";
     KeyCodes[KeyCodes["F11"] = 122] = "F11";
     KeyCodes[KeyCodes["F12"] = 123] = "F12";
-})(KeyCodes = exports.KeyCodes || (exports.KeyCodes = {}));
+})(KeyCodes || (exports.KeyCodes = KeyCodes = {}));
 var Direction;
 (function (Direction) {
     Direction["Up"] = "UP";
     Direction["Down"] = "DOWN";
     Direction["Left"] = "LEFT";
     Direction["Right"] = "RIGHT";
-})(Direction = exports.Direction || (exports.Direction = {}));
+})(Direction || (exports.Direction = Direction = {}));
 var MimeType;
 (function (MimeType) {
     MimeType["html"] = "text/html";
     MimeType["csv"] = "text/csv";
     MimeType["plain"] = "text/plain";
     MimeType["json"] = "application/json";
-})(MimeType = exports.MimeType || (exports.MimeType = {}));
+})(MimeType || (exports.MimeType = MimeType = {}));
 var MouseButtonCodes;
 (function (MouseButtonCodes) {
-    MouseButtonCodes[MouseButtonCodes["left"] = 1] = "left";
-    MouseButtonCodes[MouseButtonCodes["middle"] = 2] = "middle";
-    MouseButtonCodes[MouseButtonCodes["right"] = 3] = "right";
-})(MouseButtonCodes = exports.MouseButtonCodes || (exports.MouseButtonCodes = {}));
-//# sourceMappingURL=types.js.map
+    MouseButtonCodes[MouseButtonCodes["left"] = 0] = "left";
+    MouseButtonCodes[MouseButtonCodes["middle"] = 1] = "middle";
+    MouseButtonCodes[MouseButtonCodes["right"] = 2] = "right";
+})(MouseButtonCodes || (exports.MouseButtonCodes = MouseButtonCodes = {}));

package/dist/cjs/utils.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { SelectionProps } from "./Grid";
+/**
+ * Create Pure HTML boxes
+ * @param param0
+ * @returns
+ */
+export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, index, strokeStyle, fillOpacity, draggable, isDragging, borderCoverWidth, children, ...props }: SelectionProps) => React.JSX.Element;
+//# sourceMappingURL=utils.d.ts.map

package/dist/cjs/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,8RAwB3B,cAAc,sBA4IhB,CAAC"}

package/dist/cjs/utils.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHTMLBox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+/**
+ * Create Pure HTML boxes
+ * @param param0
+ * @returns
+ */
+var createHTMLBox = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, fill = _a.fill, stroke = _a.stroke, _f = _a.strokeLeftColor, strokeLeftColor = _f === void 0 ? stroke : _f, _g = _a.strokeTopColor, strokeTopColor = _g === void 0 ? stroke : _g, _h = _a.strokeRightColor, strokeRightColor = _h === void 0 ? stroke : _h, _j = _a.strokeBottomColor, strokeBottomColor = _j === void 0 ? stroke : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 0 : _k, _l = _a.strokeTopWidth, strokeTopWidth = _l === void 0 ? strokeWidth : _l, _m = _a.strokeRightWidth, strokeRightWidth = _m === void 0 ? strokeWidth : _m, _o = _a.strokeBottomWidth, strokeBottomWidth = _o === void 0 ? strokeWidth : _o, _p = _a.strokeLeftWidth, strokeLeftWidth = _p === void 0 ? strokeWidth : _p, index = _a.index, _q = _a.strokeStyle, strokeStyle = _q === void 0 ? "solid" : _q, _r = _a.fillOpacity, fillOpacity = _r === void 0 ? 1 : _r, draggable = _a.draggable, isDragging = _a.isDragging, _s = _a.borderCoverWidth, borderCoverWidth = _s === void 0 ? 5 : _s, children = _a.children, props = tslib_1.__rest(_a, ["x", "y", "width", "height", "fill", "stroke", "strokeLeftColor", "strokeTopColor", "strokeRightColor", "strokeBottomColor", "strokeWidth", "strokeTopWidth", "strokeRightWidth", "strokeBottomWidth", "strokeLeftWidth", "index", "strokeStyle", "fillOpacity", "draggable", "isDragging", "borderCoverWidth", "children"]);
+    var lineStyles = {
+        borderWidth: 0,
+        position: "absolute",
+        pointerEvents: "none",
+    };
+    /**
+     * Border cover is so that there is enough
+     * draggable handle area for the user.
+     * Default is 5px
+     */
+    var showBorderCover = draggable;
+    var borderCoverStyle = {
+        position: "absolute",
+        pointerEvents: draggable ? "auto" : "none",
+        cursor: draggable ? (isDragging ? "grabbing" : "grab") : "initial",
+    };
+    width = width - Math.floor(strokeWidth / 2);
+    height = height - Math.floor(strokeWidth / 2);
+    var lines = [
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, lineStyles), { transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"), width: width, height: strokeTopWidth, borderColor: strokeTopColor, borderTopWidth: strokeTopWidth, borderStyle: strokeStyle }), key: "top" }, props)),
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, lineStyles), { transform: "translate3d(".concat(x + width, "px, ").concat(y, "px, 0)"), width: strokeRightWidth, height: height, borderColor: strokeRightColor, borderRightWidth: strokeRightWidth, borderStyle: strokeStyle }), key: "right" }, props)),
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, lineStyles), { transform: "translate3d(".concat(x, "px, ").concat(y + height, "px, 0)"), width: width + strokeTopWidth, height: strokeBottomWidth, borderColor: strokeBottomColor, borderBottomWidth: strokeBottomWidth, borderStyle: strokeStyle }), key: "bottom" }, props)),
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, lineStyles), { transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"), width: strokeLeftWidth, height: height, borderColor: strokeLeftColor, borderLeftWidth: strokeLeftWidth, borderStyle: strokeStyle }), key: "left" }, props)),
+    ];
+    var borderCovers = [
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"), width: width, height: 5 }), key: "top" }, props)),
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x + width - borderCoverWidth + strokeRightWidth, "px, ").concat(y, "px, 0)"), width: borderCoverWidth, height: height }), key: "right" }, props)),
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x, "px, ").concat(y + height - borderCoverWidth + strokeBottomWidth, "px, 0)"), width: width + strokeTopWidth, height: borderCoverWidth }), key: "bottom" }, props)),
+        react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"), width: borderCoverWidth, height: height }), key: "left" }, props)),
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+        fill && (react_1.default.createElement("div", { style: {
+                position: "absolute",
+                transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"),
+                height: height,
+                width: width,
+                backgroundColor: fill,
+                opacity: fillOpacity,
+                userSelect: "none",
+                pointerEvents: "none",
+            } })),
+        lines,
+        showBorderCover && borderCovers,
+        children));
+};
+exports.createHTMLBox = createHTMLBox;

package/dist/cjs/vitest.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vitest.config.d.ts.map

package/dist/cjs/vitest.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.config.d.ts","sourceRoot":"","sources":["../../vitest.config.ts"],"names":[],"mappings":";AAGA,wBAsBG"}

package/dist/cjs/vitest.config.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// vitest.config.ts
+var config_1 = require("vitest/config");
+exports.default = (0, config_1.defineConfig)({
+    test: {
+        globals: true,
+        environment: "jsdom",
+        // ✅ correct location for deps.inline
+        deps: {
+            inline: ["konva", "react-konva"],
+        },
+    },
+    // Ensure Vite bundles these for SSR-style test runs
+    ssr: {
+        noExternal: ["konva", "react-konva"],
+    },
+    // Prefer the ESM build of react-konva (avoid its CJS wrapper that requires konva)
+    resolve: {
+        alias: {
+            "react-konva": "react-konva/es/ReactKonvaCore.js",
+        },
+    },
+});

package/dist/esm/Cell.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { RendererProps } from "./Grid";
+export interface CellProps extends RendererProps {
+    value?: string;
+    color?: string;
+    padding?: number;
+    bold?: boolean;
+    italic?: boolean;
+    strikethrough?: boolean;
+    underline?: boolean;
+    lineHeight?: number;
+    textDecoration?: string;
+    verticalAlignment?: string;
+    horizontalAlignment?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    wrapStrategy?: string;
+    scale?: number;
+    backgroundColor?: string;
+    image?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Default cell component
+ * @param props
+ */
+declare const Cell: React.FC<CellProps>;
+/**
+ * Default CellRenderer
+ * @param props
+ */
+declare const CellRenderer: (props: RendererProps) => React.JSX.Element;
+export default CellRenderer;
+export { CellRenderer, Cell };
+//# sourceMappingURL=Cell.d.ts.map

package/dist/esm/Cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgD5B,CAAC;AAIH;;;GAGG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,aAAa,sBAEzC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC"}

package/dist/esm/Cell.js

@@ -0,0 +1,24 @@
+import React, { memo } from "react";
+import { Group, Text } from "react-konva";
+import { isNull } from "./helpers";
+/**
+ * Default cell component
+ * @param props
+ */
+const Cell = memo((props) => {
+    const { x = 0, y = 0, width, height, value, horizontalAlignment = "left", verticalAlignment = "bottom", color = "#333", padding = 3, fontFamily = "Arial", fontSize = 12, children, wrapStrategy = "none", bold, italic, textDecoration, lineHeight = 1, } = props;
+    const textStyle = `${bold ? "bold" : "normal"} ${italic ? "italic" : "normal"}`;
+    return (React.createElement(Group, null,
+        isNull(value) ? null : (React.createElement(Text, { x: x, y: y, height: height, width: width, text: value, fill: color, verticalAlign: verticalAlignment, align: horizontalAlignment, fontFamily: fontFamily, fontStyle: textStyle, textDecoration: textDecoration, padding: padding, wrap: wrapStrategy, fontSize: fontSize, hitStrokeWidth: 0, lineHeight: lineHeight })),
+        children));
+});
+Cell.displayName = "Cell";
+/**
+ * Default CellRenderer
+ * @param props
+ */
+const CellRenderer = (props) => {
+    return React.createElement(Cell, { ...props });
+};
+export default CellRenderer;
+export { CellRenderer, Cell };

package/dist/esm/CellOverlay.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { CellProps } from "./Cell";
+import type { RendererProps } from "./Grid";
+export type StrokeCellProps = Omit<CellProps, "key" | "rowIndex" | "columnIndex">;
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+export declare const getOffsetFromWidth: (width: number) => number;
+/**
+ * Only used for strokes
+ */
+declare const CellOverlay: React.FC<StrokeCellProps>;
+/**
+ * Default CellRenderer
+ * @param props
+ */
+declare const CellRenderer: (props: RendererProps) => React.JSX.Element | null;
+export default CellRenderer;
+export { CellRenderer, CellOverlay };
+//# sourceMappingURL=CellOverlay.d.ts.map

package/dist/esm/CellOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellOverlay.d.ts","sourceRoot":"","sources":["../../CellOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAK5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,KAAK,GAAG,UAAU,GAAG,aAAa,CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAE/C,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgJzC,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,aAAa,6BAmEzC,CAAC;AAGF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/esm/CellOverlay.js

@@ -0,0 +1,120 @@
+import React, { memo } from "react";
+import { Shape } from "react-konva";
+/* Array placeholder */
+const EMPTY_ARRAY = [];
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+export const getOffsetFromWidth = (width) => {
+    return width / 2 - 0.5;
+};
+/**
+ * Only used for strokes
+ */
+const CellOverlay = memo((props) => {
+    const { x, y, width, height, strokeTopColor, strokeRightColor, strokeBottomColor, strokeLeftColor, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeTopDash = EMPTY_ARRAY, strokeRightDash = EMPTY_ARRAY, strokeBottomDash = EMPTY_ARRAY, strokeLeftDash = EMPTY_ARRAY, strokeDiagonalUpDash = EMPTY_ARRAY, strokeDiagonalDownDash = EMPTY_ARRAY, strokeTopWidth = 0, strokeRightWidth = 0, strokeBottomWidth = 0, strokeLeftWidth = 0, strokeDiagonalUpWidth = 0, strokeDiagonalDownWidth = 0, lineCap, } = props;
+    const userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke)
+        return null;
+    return (React.createElement(Shape, { x: x, y: y, width: width, height: height, listening: false, perfectDrawEnabled: false, sceneFunc: (context, shape) => {
+            /* Top border */
+            if (strokeTopColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -getOffsetFromWidth(strokeLeftWidth) : 0, 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? getOffsetFromWidth(strokeRightWidth) + 1 : 1), 0.5);
+                context.setAttr("strokeStyle", strokeTopColor);
+                context.setAttr("lineWidth", strokeTopWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeTopDash);
+                context.stroke();
+            }
+            /* Bottom border */
+            if (strokeBottomColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -getOffsetFromWidth(strokeLeftWidth) : 0, shape.height() + 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? getOffsetFromWidth(strokeRightWidth) + 1 : 1), shape.height() + 0.5);
+                context.setAttr("lineWidth", strokeBottomWidth);
+                context.setAttr("strokeStyle", strokeBottomColor);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeBottomDash);
+                context.stroke();
+            }
+            /* Left border */
+            if (strokeLeftColor) {
+                context.beginPath();
+                context.moveTo(0.5, strokeTopColor ? -getOffsetFromWidth(strokeTopWidth) : 0);
+                context.lineTo(0.5, shape.height() +
+                    (strokeBottomColor
+                        ? getOffsetFromWidth(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeLeftColor);
+                context.setAttr("lineWidth", strokeLeftWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeLeftDash);
+                context.stroke();
+            }
+            /* Right border */
+            if (strokeRightColor) {
+                context.beginPath();
+                context.moveTo(shape.width() + 0.5, strokeTopColor ? -getOffsetFromWidth(strokeTopWidth) : 0);
+                context.lineTo(shape.width() + 0.5, shape.height() +
+                    (strokeBottomColor
+                        ? getOffsetFromWidth(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeRightColor);
+                context.setAttr("lineWidth", strokeRightWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeRightDash);
+                context.stroke();
+            }
+            /* Diagonal: top-left to bottom-right (diagonalDown) */
+            if (strokeDiagonalDownColor) {
+                context.beginPath();
+                context.moveTo(0, 0);
+                context.lineTo(shape.width(), shape.height());
+                context.setAttr("strokeStyle", strokeDiagonalDownColor);
+                context.setAttr("lineWidth", strokeDiagonalDownWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalDownDash);
+                context.stroke();
+            }
+            /* Diagonal: bottom-left to top-right (diagonalUp) */
+            if (strokeDiagonalUpColor) {
+                context.beginPath();
+                context.moveTo(0, shape.height());
+                context.lineTo(shape.width(), 0);
+                context.setAttr("strokeStyle", strokeDiagonalUpColor);
+                context.setAttr("lineWidth", strokeDiagonalUpWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalUpDash);
+                context.stroke();
+            }
+        } }));
+});
+/**
+ * Default CellRenderer
+ * @param props
+ */
+const CellRenderer = (props) => {
+    const { x, y, width, height, stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeLeftColor = stroke, strokeDiagonalUpColor, strokeDiagonalDownColor, strokeDash = EMPTY_ARRAY, strokeTopDash = EMPTY_ARRAY, strokeRightDash = EMPTY_ARRAY, strokeBottomDash = EMPTY_ARRAY, strokeLeftDash = EMPTY_ARRAY, strokeDiagonalUpDash = EMPTY_ARRAY, strokeDiagonalDownDash = EMPTY_ARRAY, strokeWidth = 1, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, strokeDiagonalUpWidth = strokeWidth, strokeDiagonalDownWidth = strokeWidth, lineCap = "butt", key, } = props;
+    const userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke)
+        return null;
+    return (React.createElement(CellOverlay, { key: key, x: x, y: y, width: width, height: height, strokeTopColor: strokeTopColor, strokeRightColor: strokeRightColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeDash: strokeDash, strokeTopDash: strokeTopDash, strokeRightDash: strokeRightDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopWidth: strokeTopWidth, strokeRightWidth: strokeRightWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, lineCap: lineCap }));
+};
+CellOverlay.displayName = "CellOverlay";
+export default CellRenderer;
+export { CellRenderer, CellOverlay };

package/dist/esm/Context.d.ts

@@ -0,0 +1,8 @@
+import type { CellInterface, CellPosition } from "./Grid";
+type GridContext = {
+    getCellOffsetFromCoords(coords: CellInterface, readonly?: boolean): CellPosition | undefined;
+};
+export declare const GridContext: import("react").Context<GridContext | undefined>;
+export declare const useGridContext: () => GridContext;
+export {};
+//# sourceMappingURL=Context.d.ts.map

package/dist/esm/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../Context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE1D,KAAK,WAAW,GAAG;IACjB,uBAAuB,CACrB,MAAM,EAAE,aAAa,EACrB,QAAQ,CAAC,EAAE,OAAO,GACjB,YAAY,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,kDAAoD,CAAC;AAE7E,eAAO,MAAM,cAAc,mBAM1B,CAAC"}

package/dist/esm/Context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const GridContext = createContext(undefined);
+export const useGridContext = () => {
+    const contextValue = useContext(GridContext);
+    if (!contextValue) {
+        throw "Wrap your grid in GridContext.Provider";
+    }
+    return contextValue;
+};

package/dist/esm/FillHandle.d.ts

@@ -0,0 +1,8 @@
+import type { ShapeConfig } from "konva/lib/Shape";
+import React from "react";
+/**
+ * Fill handle component
+ */
+declare const FillHandle: React.FC<ShapeConfig>;
+export default FillHandle;
+//# sourceMappingURL=FillHandle.d.ts.map

package/dist/esm/FillHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillHandle.d.ts","sourceRoot":"","sources":["../../FillHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4BrC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/{FillHandle.js → esm/FillHandle.js}

@@ -1,19 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+import React from "react";
 /**
  * Fill handle component
  */
 const FillHandle = ({ x = 0, y = 0, stroke, strokeWidth = 1, size = 8, borderColor, ...props }) => {
     if (x === 0 || y === 0)
         return null;
-    return (react_1.default.createElement("div", { style: {
+    return (React.createElement("div", { style: {
             position: "absolute",
-            left: x - size / 2,
-            top: y - size / 2,
+            transform: `translate3d(${x - size / 2}px, ${y - size / 2}px, 0)`,
+            transformOrigin: "0, 0",
             width: size,
             height: size,
             border: `${strokeWidth}px ${borderColor} solid`,
@@ -24,5 +19,4 @@ const FillHandle = ({ x = 0, y = 0, stroke, strokeWidth = 1, size = 8, borderCol
             pointerEvents: "all",
         }, ...props }));
 };
-exports.default = FillHandle;
-//# sourceMappingURL=FillHandle.js.map
+export default FillHandle;