@gridsheet/react-core 1.4.0-alpha.1 → 1.4.0-alpha.11

package/README.md

@@ -0,0 +1,27 @@
+[![NPM](https://nodei.co/npm/@gridsheet/react-core.png?mini=true)](https://www.npmjs.com/package/@gridsheet/react-core)
+
+![unittest workflow](https://github.com/walkframe/gridsheet/actions/workflows/unittest.yaml/badge.svg?branch=master)
+![e2e workflow](https://github.com/walkframe/gridsheet/actions/workflows/e2e.yaml/badge.svg?branch=master)
+
+## Introduction
+
+@gridsheet/react-core is a simple yet highly functional spreadsheet component for ReactJS.
+
+![gridsheet](https://github.com/walkframe/gridsheet/raw/master/gridsheet.png)
+
+
+## Installation
+
+```sh
+$ npm install @gridsheet/react-core --save
+```
+
+## Docs
+
+- [ReactGridsheet document](https://docs.walkframe.com/gridsheet/react)
+- [Examples](https://docs.walkframe.com/gridsheet/Examples/react-case1)
+- [Histories](https://docs.walkframe.com/gridsheet/history)
+
+## License
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fwalkframe%2Freact-gridsheet.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fwalkframe%2Freact-gridsheet?ref=badge_large)
+

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,7 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/_virtual/dayjs.min.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireDayjs_min } from "../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/dayjs.min.js";
+var dayjs_minExports = requireDayjs_min();
+const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
+export {
+  dayjs as default
+};
+//# sourceMappingURL=dayjs.min.js.map

package/dist/_virtual/dayjs.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayjs.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/dayjs.min2.js

@@ -0,0 +1,5 @@
+var dayjs_min = { exports: {} };
+export {
+  dayjs_min as __module
+};
+//# sourceMappingURL=dayjs.min2.js.map

package/dist/_virtual/dayjs.min2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayjs.min2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/timezone.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireTimezone } from "../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.js";
+var timezoneExports = requireTimezone();
+const timezone = /* @__PURE__ */ getDefaultExportFromCjs(timezoneExports);
+export {
+  timezone as default
+};
+//# sourceMappingURL=timezone.js.map

package/dist/_virtual/timezone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/timezone2.js

@@ -0,0 +1,5 @@
+var timezone = { exports: {} };
+export {
+  timezone as __module
+};
+//# sourceMappingURL=timezone2.js.map

package/dist/_virtual/timezone2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/utc.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireUtc } from "../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.js";
+var utcExports = requireUtc();
+const utc = /* @__PURE__ */ getDefaultExportFromCjs(utcExports);
+export {
+  utc as default
+};
+//# sourceMappingURL=utc.js.map

package/dist/_virtual/utc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/utc2.js

@@ -0,0 +1,5 @@
+var utc = { exports: {} };
+export {
+  utc as __module
+};
+//# sourceMappingURL=utc2.js.map

package/dist/_virtual/utc2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utc2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Cell.js

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { x2c, y2r } from "../lib/converters.js";
+import { zoneToArea, among, areaToRange, areaToZone, zoneShape } from "../lib/structs.js";
+import { setEditorRect, setInputting, setAutofillDraggingTo, drag, updateTable, select, choose, setEditingCell, setContextMenuPosition, write } from "../store/actions.js";
+import { DUMMY_IMG } from "../constants.js";
+import { Context } from "../store/index.js";
+import { FormulaError } from "../formula/evaluator.js";
+import { Autofill } from "../lib/autofill.js";
+import { insertRef, isRefInsertable } from "../lib/input.js";
+import { useSheetContext } from "./SheetProvider.js";
+const Cell = React__default.memo(({ y, x, operationStyle }) => {
+  const rowId = y2r(y);
+  const colId = x2c(x);
+  const address = `${colId}${rowId}`;
+  const { store, dispatch } = React__default.useContext(Context);
+  const isFirstPointed = React__default.useRef(true);
+  const [sheetProvided, sheetContext] = useSheetContext();
+  const cellRef = React__default.useRef(null);
+  const {
+    table,
+    editingCell,
+    choosing,
+    selectingZone,
+    leftHeaderSelecting,
+    topHeaderSelecting,
+    editorRef,
+    showAddress,
+    autofillDraggingTo,
+    lastEdited
+  } = store;
+  const differentSheetFocused = sheetProvided && (sheetContext == null ? void 0 : sheetContext.lastFocusedRef) !== store.lastFocusedRef;
+  const lastFocusedRef = (sheetContext == null ? void 0 : sheetContext.lastFocusedRef) || store.lastFocusedRef;
+  const selectingArea = zoneToArea(selectingZone);
+  const editing = editingCell === address;
+  const pointed = choosing.y === y && choosing.x === x;
+  const _setEditorRect = React__default.useCallback(() => {
+    const rect = cellRef.current.getBoundingClientRect();
+    dispatch(
+      setEditorRect({
+        y: rect.y,
+        x: rect.x,
+        height: rect.height,
+        width: rect.width
+      })
+    );
+  }, []);
+  React__default.useEffect(() => {
+    if (pointed && !isFirstPointed.current) {
+      _setEditorRect();
+      if (!editing) {
+        dispatch(setInputting(table.stringify({ y, x })));
+      }
+      return;
+    }
+    isFirstPointed.current = false;
+  }, [pointed, editing]);
+  const cell = table.getByPoint({ y, x });
+  const writeCell = (value) => {
+    if (lastEdited !== value) {
+      dispatch(write(value));
+      return;
+    }
+  };
+  let errorMessage = "";
+  let rendered;
+  try {
+    rendered = table.render({ y, x }, writeCell);
+  } catch (e) {
+    if (e instanceof FormulaError) {
+      errorMessage = e.message;
+      rendered = e.code;
+    } else {
+      errorMessage = e.message;
+      rendered = "#UNKNOWN";
+      console.error(e);
+    }
+  }
+  const lastInput = lastFocusedRef.current;
+  const input = editorRef.current;
+  if (!input) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref: cellRef,
+      "data-x": x,
+      "data-y": y,
+      "data-address": address,
+      className: `gs-cell ${among(selectingArea, { y, x }) ? "gs-selecting" : ""} ${pointed ? "gs-choosing" : ""} ${editing ? "gs-editing" : ""}`,
+      style: {
+        ...cell == null ? void 0 : cell.style,
+        ...operationStyle
+      },
+      onContextMenu: (e) => {
+        e.preventDefault();
+        dispatch(setContextMenuPosition({ y: e.clientY, x: e.clientX }));
+        return false;
+      },
+      onClick: (e) => {
+        if (autofillDraggingTo) {
+          return false;
+        }
+        const fullAddress = `${table.sheetPrefix(!differentSheetFocused)}${address}`;
+        const editing2 = !!((sheetContext == null ? void 0 : sheetContext.editingCell) || editingCell);
+        if (editing2) {
+          const inserted = insertRef(lastInput, fullAddress);
+          if (inserted) {
+            return false;
+          }
+        }
+        dispatch(setEditingCell(""));
+        dispatch(setContextMenuPosition({ y: -1, x: -1 }));
+        input.focus();
+        if (e.shiftKey) {
+          dispatch(drag({ y, x }));
+          return;
+        } else {
+          dispatch(choose({ y, x }));
+          dispatch(select({ startY: y, startX: x, endY: -1, endX: -1 }));
+          _setEditorRect();
+        }
+        const valueString = table.stringify({ y, x });
+        dispatch(setInputting(valueString));
+      },
+      onDoubleClick: (e) => {
+        e.preventDefault();
+        const dblclick = document.createEvent("MouseEvents");
+        dblclick.initEvent("dblclick", true, true);
+        input.dispatchEvent(dblclick);
+        return false;
+      },
+      draggable: true,
+      onDragStart: (e) => {
+        if (autofillDraggingTo) {
+          return false;
+        }
+        e.dataTransfer.setDragImage(DUMMY_IMG, 0, 0);
+        dispatch(select({ startY: y, startX: x, endY: y, endX: x }));
+        const insertable = isRefInsertable(lastInput);
+        if (insertable) {
+          return true;
+        } else if (insertable != null) {
+          writeCell(input.value);
+        }
+        dispatch(choose({ y, x }));
+        input.focus();
+        dispatch(setInputting(""));
+      },
+      onDragEnd: () => {
+        var _a;
+        if (autofillDraggingTo) {
+          if (autofillDraggingTo.x !== x || autofillDraggingTo.y !== y) {
+            const autofill = new Autofill(store, autofillDraggingTo);
+            dispatch(updateTable(autofill.applied));
+            dispatch(select(areaToZone(autofill.wholeArea)));
+            input.focus();
+          }
+          dispatch(setAutofillDraggingTo(null));
+          return false;
+        }
+        const { height: h, width: w } = zoneShape(selectingZone);
+        if (h + w === 0) {
+          dispatch(select({ startY: -1, startX: -1, endY: -1, endX: -1 }));
+        }
+        if (isRefInsertable(lastInput)) {
+          dispatch(select({ startY: -1, startX: -1, endY: -1, endX: -1 }));
+        }
+        (_a = lastFocusedRef.current) == null ? void 0 : _a.focus();
+      },
+      onDragEnter: () => {
+        var _a;
+        if (autofillDraggingTo) {
+          if (!among(selectingArea, { x, y })) {
+            dispatch(setAutofillDraggingTo({ x, y }));
+          }
+          return false;
+        }
+        if (leftHeaderSelecting) {
+          dispatch(drag({ y: table.getNumRows(), x }));
+          return false;
+        }
+        if (topHeaderSelecting) {
+          dispatch(drag({ y, x: table.getNumCols() }));
+          return false;
+        }
+        dispatch(drag({ y, x }));
+        const newArea = zoneToArea({ ...selectingZone, endY: y, endX: x });
+        const fullRange = `${table.sheetPrefix(!differentSheetFocused)}${areaToRange(newArea)}`;
+        insertRef(lastInput, fullRange);
+        (_a = sheetContext == null ? void 0 : sheetContext.forceRender) == null ? void 0 : _a.call(sheetContext);
+        return true;
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: `gs-cell-inner-wrap`, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "gs-cell-inner",
+            style: {
+              ...cell == null ? void 0 : cell.style,
+              justifyContent: (cell == null ? void 0 : cell.justifyContent) || "left",
+              alignItems: (cell == null ? void 0 : cell.alignItems) || "start"
+            },
+            children: [
+              errorMessage && /* @__PURE__ */ jsx("div", { className: "gs-formula-error-triangle", title: errorMessage }),
+              showAddress && /* @__PURE__ */ jsx("div", { className: "gs-cell-label", children: address }),
+              /* @__PURE__ */ jsx("div", { className: "gs-cell-rendered", children: rendered })
+            ]
+          }
+        ),
+        (!editing && pointed && selectingArea.bottom === -1 || selectingArea.bottom === y && selectingArea.right === x) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "gs-autofill-drag",
+            draggable: true,
+            onDragStart: (e) => {
+              e.dataTransfer.setDragImage(DUMMY_IMG, 0, 0);
+              dispatch(setAutofillDraggingTo({ x, y }));
+              e.stopPropagation();
+            }
+          }
+        )
+      ] })
+    },
+    x
+  );
+});
+export {
+  Cell
+};
+//# sourceMappingURL=Cell.js.map

package/dist/components/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport { x2c, y2r } from '../lib/converters';\nimport { zoneToArea, among, zoneShape, areaToZone, areaToRange } from '../lib/structs';\nimport {\n  choose,\n  select,\n  drag,\n  write,\n  setEditorRect,\n  setContextMenuPosition,\n  setAutofillDraggingTo,\n  updateTable,\n  setEditingCell,\n  setInputting,\n} from '../store/actions';\n\nimport { DUMMY_IMG } from '../constants';\n\nimport { Context } from '../store';\nimport { FormulaError } from '../formula/evaluator';\nimport { Autofill } from '../lib/autofill';\nimport { insertRef, isRefInsertable } from '../lib/input';\nimport { useSheetContext } from './SheetProvider';\n\ntype Props = {\n  y: number;\n  x: number;\n  operationStyle?: React.CSSProperties;\n};\n\nexport const Cell: React.FC<Props> = React.memo(({ y, x, operationStyle }) => {\n  const rowId = y2r(y);\n  const colId = x2c(x);\n  const address = `${colId}${rowId}`;\n  const { store, dispatch } = React.useContext(Context);\n  const isFirstPointed = React.useRef(true);\n\n  const [sheetProvided, sheetContext] = useSheetContext();\n\n  const cellRef = React.useRef<HTMLTableCellElement | null>(null);\n  const {\n    table,\n    editingCell,\n    choosing,\n    selectingZone,\n    leftHeaderSelecting,\n    topHeaderSelecting,\n    editorRef,\n    showAddress,\n    autofillDraggingTo,\n    lastEdited,\n  } = store;\n\n  // Whether the focus is on another sheet\n  const differentSheetFocused = sheetProvided && sheetContext?.lastFocusedRef !== store.lastFocusedRef;\n\n  const lastFocusedRef = sheetContext?.lastFocusedRef || store.lastFocusedRef;\n\n  const selectingArea = zoneToArea(selectingZone); // (top, left) -> (bottom, right)\n\n  const editing = editingCell === address;\n  const pointed = choosing.y === y && choosing.x === x;\n  const _setEditorRect = React.useCallback(() => {\n    const rect = cellRef.current!.getBoundingClientRect();\n    dispatch(\n      setEditorRect({\n        y: rect.y,\n        x: rect.x,\n        height: rect.height,\n        width: rect.width,\n      }),\n    );\n  }, []);\n\n  React.useEffect(() => {\n    // Avoid setting coordinates on the initial render to account for shifts caused by redrawing due to virtualization.\n    if (pointed && !isFirstPointed.current) {\n      _setEditorRect();\n      if (!editing) {\n        dispatch(setInputting(table.stringify({ y, x })));\n      }\n      return;\n    }\n    isFirstPointed.current = false;\n  }, [pointed, editing]);\n  const cell = table.getByPoint({ y, x });\n  const writeCell = (value: string) => {\n    if (lastEdited !== value) {\n      dispatch(write(value));\n      return;\n    }\n  };\n\n  let errorMessage = '';\n  let rendered;\n  try {\n    rendered = table.render({ y, x }, writeCell);\n  } catch (e: any) {\n    if (e instanceof FormulaError) {\n      errorMessage = e.message;\n      rendered = e.code;\n    } else {\n      errorMessage = e.message;\n      rendered = '#UNKNOWN';\n      console.error(e);\n    }\n    // TODO: debug flag\n  }\n  const lastInput = lastFocusedRef.current;\n  const input = editorRef.current;\n  if (!input) {\n    return null;\n  }\n\n  return (\n    <td\n      key={x}\n      ref={cellRef}\n      data-x={x}\n      data-y={y}\n      data-address={address}\n      className={`gs-cell ${among(selectingArea, { y, x }) ? 'gs-selecting' : ''} ${pointed ? 'gs-choosing' : ''} ${\n        editing ? 'gs-editing' : ''\n      }`}\n      style={{\n        ...cell?.style,\n        ...operationStyle,\n      }}\n      onContextMenu={(e) => {\n        e.preventDefault();\n        dispatch(setContextMenuPosition({ y: e.clientY, x: e.clientX }));\n        return false;\n      }}\n      onClick={(e) => {\n        if (autofillDraggingTo) {\n          return false;\n        }\n\n        const fullAddress = `${table.sheetPrefix(!differentSheetFocused)}${address}`;\n        const editing = !!(sheetContext?.editingCell || editingCell);\n        if (editing) {\n          const inserted = insertRef(lastInput, fullAddress);\n          if (inserted) {\n            return false;\n          }\n        }\n        dispatch(setEditingCell(''));\n        dispatch(setContextMenuPosition({ y: -1, x: -1 }));\n        input.focus();\n        if (e.shiftKey) {\n          dispatch(drag({ y, x }));\n          return;\n        } else {\n          dispatch(choose({ y, x }));\n          dispatch(select({ startY: y, startX: x, endY: -1, endX: -1 }));\n          _setEditorRect();\n        }\n        const valueString = table.stringify({ y, x });\n        dispatch(setInputting(valueString));\n      }}\n      onDoubleClick={(e) => {\n        e.preventDefault();\n        const dblclick = document.createEvent('MouseEvents');\n        dblclick.initEvent('dblclick', true, true);\n        input.dispatchEvent(dblclick);\n        return false;\n      }}\n      draggable\n      onDragStart={(e) => {\n        if (autofillDraggingTo) {\n          return false;\n        }\n        e.dataTransfer.setDragImage(DUMMY_IMG, 0, 0);\n        dispatch(select({ startY: y, startX: x, endY: y, endX: x }));\n        const insertable = isRefInsertable(lastInput);\n        if (insertable) {\n          return true;\n        } else if (insertable != null) {\n          writeCell(input.value);\n        }\n        dispatch(choose({ y, x }));\n        input.focus();\n        dispatch(setInputting(''));\n      }}\n      onDragEnd={() => {\n        if (autofillDraggingTo) {\n          if (autofillDraggingTo.x !== x || autofillDraggingTo.y !== y) {\n            const autofill = new Autofill(store, autofillDraggingTo);\n            dispatch(updateTable(autofill.applied));\n            dispatch(select(areaToZone(autofill.wholeArea)));\n            input.focus();\n          }\n          dispatch(setAutofillDraggingTo(null));\n          return false;\n        }\n        const { height: h, width: w } = zoneShape(selectingZone);\n        if (h + w === 0) {\n          dispatch(select({ startY: -1, startX: -1, endY: -1, endX: -1 }));\n        }\n        if (isRefInsertable(lastInput)) {\n          dispatch(select({ startY: -1, startX: -1, endY: -1, endX: -1 }));\n        }\n        lastFocusedRef.current?.focus();\n      }}\n      onDragEnter={() => {\n        if (autofillDraggingTo) {\n          if (!among(selectingArea, { x, y })) {\n            dispatch(setAutofillDraggingTo({ x, y }));\n          }\n          return false;\n        }\n        if (leftHeaderSelecting) {\n          dispatch(drag({ y: table.getNumRows(), x }));\n          return false;\n        }\n        if (topHeaderSelecting) {\n          dispatch(drag({ y, x: table.getNumCols() }));\n          return false;\n        }\n        dispatch(drag({ y, x }));\n\n        const newArea = zoneToArea({ ...selectingZone, endY: y, endX: x });\n        const fullRange = `${table.sheetPrefix(!differentSheetFocused)}${areaToRange(newArea)}`;\n        insertRef(lastInput, fullRange);\n        sheetContext?.forceRender?.(); // Force drawing because the formula is not reflected in largeInput\n        return true;\n      }}\n    >\n      <div className={`gs-cell-inner-wrap`}>\n        <div\n          className={'gs-cell-inner'}\n          style={{\n            ...cell?.style,\n            justifyContent: cell?.justifyContent || 'left',\n            alignItems: cell?.alignItems || 'start',\n          }}\n        >\n          {errorMessage && <div className=\"gs-formula-error-triangle\" title={errorMessage} />}\n          {showAddress && <div className=\"gs-cell-label\">{address}</div>}\n          <div className=\"gs-cell-rendered\">{rendered}</div>\n        </div>\n        {((!editing && pointed && selectingArea.bottom === -1) ||\n          (selectingArea.bottom === y && selectingArea.right === x)) && (\n          <div\n            className=\"gs-autofill-drag\"\n            draggable\n            onDragStart={(e) => {\n              e.dataTransfer.setDragImage(DUMMY_IMG, 0, 0);\n              dispatch(setAutofillDraggingTo({ x, y }));\n              e.stopPropagation();\n            }}\n          ></div>\n        )}\n      </div>\n    </td>\n  );\n});\n"],"names":["React","editing"],"mappings":"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"}

package/dist/components/ContextMenu.js

@@ -0,0 +1,297 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { clip } from "../lib/clipboard.js";
+import { cut, copy, paste, updateTable, undo, redo, setContextMenuPosition } from "../store/actions.js";
+import { zoneToArea, zoneShape, areaToZone } from "../lib/structs.js";
+import { Context } from "../store/index.js";
+import { isPrevented, AddRowAbove, AddRowBelow, AddColLeft, AddColRight, DeleteRow, DeleteCol } from "../lib/prevention.js";
+import { Fixed } from "./Fixed.js";
+const ContextMenu = () => {
+  const { store, dispatch } = React__default.useContext(Context);
+  const { table, choosing, selectingZone, leftHeaderSelecting, topHeaderSelecting, editorRef, contextMenuPosition } = store;
+  const { y, x } = choosing;
+  let {
+    top: selectingTop,
+    left: selectingLeft,
+    bottom: selectingBottom,
+    right: selectingRight
+  } = zoneToArea(selectingZone);
+  if (selectingTop === -1) {
+    [selectingTop, selectingLeft, selectingBottom, selectingRight] = [y, x, y, x];
+  }
+  const [tableHeight, tableWidth] = [table.getNumRows(), table.getNumCols()];
+  const { height, width } = zoneShape({ ...selectingZone, base: 1 });
+  const { y: top, x: left } = contextMenuPosition;
+  if (top === -1) {
+    return null;
+  }
+  const selectingTopCell = table.getByPoint({ y: selectingTop, x: 0 });
+  const selectingLeftCell = table.getByPoint({ y: 0, x: selectingLeft });
+  const selectingBottomCell = table.getByPoint({ y: selectingBottom, x: 0 });
+  const selectingRightCell = table.getByPoint({ y: 0, x: selectingRight });
+  const historyIndex = table.getHistoryIndex();
+  return /* @__PURE__ */ jsx(
+    Fixed,
+    {
+      className: "gs-contextmenu-modal",
+      onClick: (e) => {
+        e.preventDefault();
+        dispatch(setContextMenuPosition({ y: -1, x: -1 }));
+        return false;
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "gs-contextmenu",
+          style: {
+            top,
+            left
+          },
+          children: /* @__PURE__ */ jsxs("ul", { children: [
+            /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "gs-enabled",
+                onClick: () => {
+                  const area = clip(store);
+                  dispatch(cut(areaToZone(area)));
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Cut" }),
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-shortcut", children: /* @__PURE__ */ jsx("span", { className: "gs-menu-underline", children: "X" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "gs-enabled",
+                onClick: () => {
+                  const area = clip(store);
+                  dispatch(copy(areaToZone(area)));
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Copy" }),
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-shortcut", children: /* @__PURE__ */ jsx("span", { className: "gs-menu-underline", children: "C" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "gs-enabled",
+                onClick: () => {
+                  var _a;
+                  const text = ((_a = editorRef.current) == null ? void 0 : _a.value) || "";
+                  dispatch(paste({ text }));
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Paste" }),
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-shortcut", children: /* @__PURE__ */ jsx("span", { className: "gs-menu-underline", children: "V" }) })
+                ]
+              }
+            ),
+            (leftHeaderSelecting || topHeaderSelecting) && /* @__PURE__ */ jsx("li", { className: "gs-menu-divider" }),
+            leftHeaderSelecting && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: table.maxNumRows !== -1 && tableHeight + height > table.maxNumRows || isPrevented(selectingTopCell == null ? void 0 : selectingTopCell.prevention, AddRowAbove) ? "gs-disabled" : "gs-enabled",
+                onClick: () => {
+                  const newTable = table.addRows({
+                    y: selectingTop,
+                    numRows: height,
+                    baseY: selectingTop,
+                    reflection: {
+                      selectingZone,
+                      choosing
+                    }
+                  });
+                  dispatch(updateTable(newTable));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "gs-menu-name", children: [
+                  "Insert ",
+                  height,
+                  " row",
+                  height > 1 && "s",
+                  " above"
+                ] })
+              }
+            ),
+            leftHeaderSelecting && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: table.maxNumRows !== -1 && tableHeight + height > table.maxNumRows || isPrevented(selectingBottomCell == null ? void 0 : selectingBottomCell.prevention, AddRowBelow) ? "gs-disabled" : "gs-enabled",
+                onClick: (e) => {
+                  if (e.currentTarget.classList.contains("gs-disabled")) {
+                    return;
+                  }
+                  selectingZone.startY += height;
+                  selectingZone.endY += height;
+                  choosing.y += height;
+                  const newTable = table.addRows({
+                    y: selectingBottom + 1,
+                    numRows: height,
+                    baseY: selectingBottom,
+                    reflection: {
+                      selectingZone,
+                      choosing
+                    }
+                  });
+                  dispatch(updateTable(newTable));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "gs-menu-name", children: [
+                  "Insert ",
+                  height,
+                  " row",
+                  height > 1 && "s",
+                  " below"
+                ] })
+              }
+            ),
+            topHeaderSelecting && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: table.maxNumCols !== -1 && tableWidth + width > table.maxNumCols || isPrevented(selectingLeftCell == null ? void 0 : selectingLeftCell.prevention, AddColLeft) ? "gs-disabled" : "gs-enabled",
+                onClick: (e) => {
+                  if (e.currentTarget.classList.contains("gs-disabled")) {
+                    return;
+                  }
+                  const newTable = table.addCols({
+                    x: selectingLeft,
+                    numCols: width,
+                    baseX: selectingLeft,
+                    reflection: {
+                      selectingZone,
+                      choosing
+                    }
+                  });
+                  dispatch(updateTable(newTable));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "gs-menu-name", children: [
+                  "Insert ",
+                  width,
+                  " column",
+                  width > 1 && "s",
+                  " left"
+                ] })
+              }
+            ),
+            topHeaderSelecting && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: table.maxNumCols !== -1 && tableWidth + width > table.maxNumCols || isPrevented(selectingRightCell == null ? void 0 : selectingRightCell.prevention, AddColRight) ? "gs-disabled" : "gs-enabled",
+                onClick: (e) => {
+                  if (e.currentTarget.classList.contains("gs-disabled")) {
+                    return;
+                  }
+                  selectingZone.startX += width;
+                  selectingZone.endX += width;
+                  choosing.x += width;
+                  const newTable = table.addCols({
+                    x: selectingRight + 1,
+                    numCols: width,
+                    baseX: selectingRight,
+                    reflection: {
+                      selectingZone,
+                      choosing
+                    }
+                  });
+                  dispatch(updateTable(newTable));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "gs-menu-name", children: [
+                  "Insert ",
+                  width,
+                  " column",
+                  width > 1 && "s",
+                  " right"
+                ] })
+              }
+            ),
+            leftHeaderSelecting && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: table.minNumRows !== -1 && tableHeight - height < table.minNumRows || isPrevented(selectingTopCell == null ? void 0 : selectingTopCell.prevention, DeleteRow) ? "gs-disabled" : "gs-enabled",
+                onClick: (e) => {
+                  if (e.currentTarget.classList.contains("gs-disabled")) {
+                    return;
+                  }
+                  const newTable = table.deleteRows({
+                    y: selectingTop,
+                    numRows: height,
+                    operator: "USER",
+                    reflection: {
+                      selectingZone,
+                      choosing
+                    }
+                  });
+                  dispatch(updateTable(newTable));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "gs-menu-name", children: [
+                  "Delete ",
+                  height,
+                  " row",
+                  height > 1 && "s"
+                ] })
+              }
+            ),
+            topHeaderSelecting && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: table.minNumCols !== -1 && tableWidth - width < table.minNumCols || isPrevented(selectingRightCell == null ? void 0 : selectingRightCell.prevention, DeleteCol) ? "gs-disabled" : "gs-enabled",
+                onClick: () => {
+                  const newTable = table.deleteCols({
+                    x: selectingLeft,
+                    numCols: width,
+                    operator: "USER",
+                    reflection: {
+                      selectingZone,
+                      choosing
+                    }
+                  });
+                  dispatch(updateTable(newTable));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "gs-menu-name", children: [
+                  "Delete ",
+                  width,
+                  " column",
+                  width > 0 && "s"
+                ] })
+              }
+            ),
+            (historyIndex > -1 || historyIndex < table.getHistorySize() - 1) && /* @__PURE__ */ jsx("li", { className: "gs-menu-divider" }),
+            historyIndex > -1 && /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "gs-enabled",
+                onClick: () => {
+                  dispatch(undo(null));
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Undo" }),
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-shortcut", children: /* @__PURE__ */ jsx("span", { className: "gs-menu-underline", children: "Z" }) })
+                ]
+              }
+            ),
+            historyIndex < table.getHistorySize() - 1 && /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "gs-enabled",
+                onClick: () => {
+                  dispatch(redo(null));
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Redo" }),
+                  /* @__PURE__ */ jsx("div", { className: "gs-menu-shortcut", children: /* @__PURE__ */ jsx("span", { className: "gs-menu-underline", children: "R" }) })
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+export {
+  ContextMenu
+};
+//# sourceMappingURL=ContextMenu.js.map