sheet-happens 0.0.56 → 0.0.58

package/dist/clipboard.d.ts

@@ -1,15 +1,11 @@
-import { ClipboardPayload, CellPropertyFunction, Change, Rectangle } from './types';
-export declare type ClipboardTable<T = any> = {
-    rows: string[][];
-    payload?: ClipboardPayload<T>;
-};
-export declare const useClipboardTable: () => {
-    peek: ClipboardTable<any> | null | undefined;
+import { ClipboardTable, ClipboardTableCells, CellPropertyFunction, Change, Rectangle } from './types';
+export declare const useClipboardTable: <T extends ClipboardTableCells>(clipboardOrigin: string) => {
+    peek: ClipboardTable<T> | null | undefined;
     canPaste: () => boolean;
-    copyTable: (rows: string[][], payload?: ClipboardPayload<any> | null | undefined) => Promise<void>;
-    pasteTable: () => Promise<ClipboardTable<any> | null | undefined>;
+    copyTable: ({ rows, ...rest }: ClipboardTable<T>) => Promise<void>;
+    pasteTable: () => Promise<ClipboardTable<T> | null>;
 };
-export declare const useClipboardAPI: <T = any>(selection: Rectangle, editData: CellPropertyFunction<string>, cellReadOnly: CellPropertyFunction<boolean>, addListener: boolean, onSelectionChange?: ((selection: Rectangle) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined, onCopy?: ((selection: Rectangle, rows: string[][], cut: boolean) => ClipboardPayload<T> | null | undefined) | undefined, onPaste?: ((selection: Rectangle, rows: string[][], payload?: ClipboardPayload<T> | undefined) => boolean | null | undefined | Promise<boolean | null | undefined>) | undefined) => {
+export declare const useClipboardAPI: <T extends ClipboardTableCells = ClipboardTableCells>(selection: Rectangle, editData: CellPropertyFunction<string>, sourceData: CellPropertyFunction<object | string | number | null>, cellReadOnly: CellPropertyFunction<boolean>, addListener: boolean, onSelectionChange?: ((selection: Rectangle) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined, onCopy?: ((selection: Rectangle, cut: boolean) => ClipboardTable<T> | null | undefined) | undefined, onPaste?: ((selection: Rectangle, table?: ClipboardTable<T> | undefined) => boolean | null | undefined | Promise<boolean | null | undefined>) | undefined, clipboardOrigin?: string) => {
     clipboardApi: {
         copySelection: (selection: Rectangle, cut?: boolean) => Promise<void>;
         pasteSelection: (selection: Rectangle) => Promise<void>;

package/dist/index.js

@@ -38,6 +38,15 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -972,7 +981,7 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
       pixelToRow = _ref$current2$cellLay.pixelToRow;
     onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
     if (knobArea && draggingKnob) {
-      var changes = parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly);
+      var changes = parseKnobOperation(knobArea, selection, editData, sourceData, cellReadOnly);
       onChange === null || onChange === void 0 ? void 0 : onChange(changes);
       onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(knobArea, true, true);
       onKnobAreaChange === null || onKnobAreaChange === void 0 ? void 0 : onKnobAreaChange(null);
@@ -1409,7 +1418,7 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
     mouseHandlers: mouseHandlers
   };
 };
-var parseKnobOperation = function parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly) {
+var parseKnobOperation = function parseKnobOperation(knobArea, selection, editData, sourceData, cellReadOnly) {
   var _normalizeSelection7 = normalizeSelection(knobArea),
     _normalizeSelection7$ = _normalizeSelection7[0],
     kx1 = _normalizeSelection7$[0],
@@ -1444,12 +1453,14 @@ var parseKnobOperation = function parseKnobOperation(knobArea, selection, source
     var srcY = sy1;
     for (var y = fy1; y <= fy2; y++) {
       for (var x = fx1; x <= fx2; x++) {
-        var value = sourceData(x, srcY);
+        var value = editData(x, srcY);
+        var data = sourceData(x, srcY);
         if (!cellReadOnly(x, y)) {
           changes.push({
             x: x,
             y: y,
             value: value,
+            data: data,
             source: {
               x: x,
               y: srcY
@@ -1477,12 +1488,14 @@ var parseKnobOperation = function parseKnobOperation(knobArea, selection, source
     var srcX = sx1;
     for (var _x2 = fx1; _x2 <= fx2; _x2++) {
       for (var _y2 = fy1; _y2 <= fy2; _y2++) {
-        var _value = sourceData(srcX, _y2);
+        var _value = editData(srcX, _y2);
+        var _data = sourceData(srcX, _y2);
         if (!cellReadOnly(_x2, _y2)) {
           changes.push({
             x: _x2,
             y: _y2,
             value: _value,
+            data: _data,
             source: {
               x: srcX,
               y: _y2
@@ -2176,11 +2189,13 @@ function _catch(body, recover) {
 	return result;
 }
 
+var _excluded = ["rows"],
+  _excluded2 = ["origin"];
 var NON_BREAKING_SPACE = ' ';
 var EMPTY_TABLE = {
   rows: []
 };
-var useClipboardTable = function useClipboardTable() {
+var useClipboardTable = function useClipboardTable(clipboardOrigin) {
   var _useState = React.useState(),
     peek = _useState[0],
     setPeek = _useState[1];
@@ -2197,22 +2212,17 @@ var useClipboardTable = function useClipboardTable() {
     };
     var hardRefresh = function hardRefresh() {
       try {
-        var _temp2 = _catch(function () {
-          return Promise.resolve(navigator.clipboard.read()).then(function (items) {
-            var item = items[0];
-            var _temp = function () {
-              if (item) {
-                return Promise.resolve(parseClipboardTable(item)).then(function (peek) {
-                  setPeek(peek);
-                });
-              } else {
-                setPeek(EMPTY_TABLE);
-              }
-            }();
-            if (_temp && _temp.then) return _temp.then(function () {});
+        var _temp = _catch(function () {
+          return Promise.resolve(pasteClipboardTable()).then(function (pasted) {
+            if (pasted) {
+              var _peek = validateClipboardTable(pasted, clipboardOrigin);
+              setPeek(_peek);
+            } else {
+              setPeek(EMPTY_TABLE);
+            }
           });
         }, function () {});
-        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -2237,19 +2247,36 @@ var useClipboardTable = function useClipboardTable() {
   return {
     peek: peek,
     canPaste: canPaste,
-    copyTable: copyClipboardTable,
-    pasteTable: pasteClipboardTable
+    copyTable: function copyTable(_ref) {
+      var rows = _ref.rows,
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+      return copyClipboardTable(rows, _extends({
+        origin: clipboardOrigin
+      }, rest));
+    },
+    pasteTable: function () {
+      try {
+        return Promise.resolve(pasteClipboardTable()).then(function (pasted) {
+          return pasted ? validateClipboardTable(pasted, clipboardOrigin) : null;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
   };
 };
-var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly, addListener, onSelectionChange, onChange, onCopy, onPaste) {
-  var _useClipboardTable = useClipboardTable(),
+var useClipboardAPI = function useClipboardAPI(selection, editData, sourceData, cellReadOnly, addListener, onSelectionChange, onChange, onCopy, onPaste, clipboardOrigin) {
+  if (clipboardOrigin === void 0) {
+    clipboardOrigin = '';
+  }
+  var _useClipboardTable = useClipboardTable(clipboardOrigin),
     canPaste = _useClipboardTable.canPaste,
     copyTable = _useClipboardTable.copyTable,
     pasteTable = _useClipboardTable.pasteTable;
   var pasteIntoSelection = React.useCallback(function (selection, table) {
     try {
       var rows = table.rows,
-        payload = table.payload;
+        data = table.data;
       var _normalizeSelection = normalizeSelection(selection),
         min = _normalizeSelection[0],
         max = _normalizeSelection[1];
@@ -2265,19 +2292,22 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
       var repeatX = Math.max(1, Math.floor(selectionSize[0]));
       var repeatY = Math.max(1, Math.floor(selectionSize[1]));
       var newSelection = [min, addXY(min, [width * repeatX - 1, height * repeatY - 1])];
-      return Promise.resolve(onPaste === null || onPaste === void 0 ? void 0 : onPaste(newSelection, rows, payload)).then(function (shouldPaste) {
+      return Promise.resolve(onPaste === null || onPaste === void 0 ? void 0 : onPaste(newSelection, table)).then(function (shouldPaste) {
         if (shouldPaste !== false) {
           var changes = rows.flatMap(function (row, j) {
             return row.flatMap(function (value, i) {
               var cells = [];
               for (var rx = 0; rx < repeatX; ++rx) {
                 for (var ry = 0; ry < repeatY; ++ry) {
+                  var _data$cells, _data$cells$j;
                   var x = left + i + rx * width;
                   var y = top + j + ry * height;
+                  var v = data === null || data === void 0 ? void 0 : (_data$cells = data.cells) === null || _data$cells === void 0 ? void 0 : (_data$cells$j = _data$cells[j]) === null || _data$cells$j === void 0 ? void 0 : _data$cells$j[i];
                   if (!(cellReadOnly !== null && cellReadOnly !== void 0 && cellReadOnly(x, y))) cells.push({
                     x: x,
                     y: y,
-                    value: value
+                    value: value,
+                    data: v
                   });
                 }
               }
@@ -2299,11 +2329,10 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
       cut = false;
     }
     try {
-      var _payload$cut;
-      var rows = formatSelectionAsRows(selection, editData);
-      var payload = onCopy === null || onCopy === void 0 ? void 0 : onCopy(selection, rows, cut);
-      copyTable(rows, payload);
-      if ((_payload$cut = payload === null || payload === void 0 ? void 0 : payload.cut) != null ? _payload$cut : cut) {
+      var _onCopy, _table$cut;
+      var table = (_onCopy = onCopy === null || onCopy === void 0 ? void 0 : onCopy(selection, cut)) != null ? _onCopy : formatSelectionAsRows(selection, editData, sourceData);
+      copyTable(table);
+      if ((_table$cut = table === null || table === void 0 ? void 0 : table.cut) != null ? _table$cut : cut) {
         var changes = [];
         forSelectionRows(selection)(function (y) {
           forSelectionColumns(selection)(function (x) {
@@ -2311,7 +2340,8 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
               var change = {
                 x: x,
                 y: y,
-                value: ''
+                value: '',
+                data: null
               };
               changes.push(change);
             }
@@ -2341,8 +2371,11 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
     try {
       e.preventDefault();
       var clipboardData = e.clipboardData || window.clipboardData;
-      return Promise.resolve(parseClipboardTable(clipboardData)).then(function (table) {
-        if (table) pasteIntoSelection(selection, table);
+      return Promise.resolve(parseClipboardTable(clipboardData)).then(function (parsed) {
+        if (parsed) {
+          var table = validateClipboardTable(parsed, clipboardOrigin);
+          if (table) pasteIntoSelection(selection, table);
+        }
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2368,6 +2401,21 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
     onClipboardPaste: onClipboardPaste
   };
 };
+var validateClipboardTable = function validateClipboardTable(parsed, clipboardOrigin) {
+  var rows = parsed.rows,
+    payload = parsed.payload;
+  if (!payload) return {
+    rows: rows
+  };
+  var origin = payload.origin,
+    rest = _objectWithoutPropertiesLoose(payload, _excluded2);
+  if (origin === clipboardOrigin) return _extends({
+    rows: rows
+  }, rest);
+  return {
+    rows: rows
+  };
+};
 var copyClipboardTable = function copyClipboardTable(rows, payload) {
   try {
     var text = formatRowsAsTSV(rows);
@@ -2391,8 +2439,7 @@ var pasteClipboardTable = function pasteClipboardTable() {
   try {
     return Promise.resolve(navigator.clipboard.read()).then(function (items) {
       var item = items[0];
-      if (!item) return;
-      return parseClipboardTable(item);
+      return item ? Promise.resolve(parseClipboardTable(item)) : null;
     });
   } catch (e) {
     return Promise.reject(e);
@@ -2400,7 +2447,7 @@ var pasteClipboardTable = function pasteClipboardTable() {
 };
 var parseClipboardTable = function parseClipboardTable(item) {
   try {
-    var _temp5 = function _temp5() {
+    var _temp4 = function _temp4() {
       return rows ? {
         rows: rows,
         payload: payload
@@ -2418,7 +2465,7 @@ var parseClipboardTable = function parseClipboardTable(item) {
       return '';
     };
     var rows, payload;
-    var _temp4 = function () {
+    var _temp3 = function () {
       if (has('text/html')) {
         return Promise.resolve(get('text/html')).then(function (pastedHtml) {
           var _parsePastedHtml = parsePastedHtml(pastedHtml);
@@ -2426,17 +2473,17 @@ var parseClipboardTable = function parseClipboardTable(item) {
           payload = _parsePastedHtml.payload;
         });
       } else {
-        var _temp6 = function () {
+        var _temp5 = function () {
           if (has('text/plain')) {
             return Promise.resolve(get('text/plain')).then(function (text) {
               rows = parsePastedText(text);
             });
           }
         }();
-        if (_temp6 && _temp6.then) return _temp6.then(function () {});
+        if (_temp5 && _temp5.then) return _temp5.then(function () {});
       }
     }();
-    return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+    return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
   } catch (e) {
     return Promise.reject(e);
   }
@@ -2465,12 +2512,15 @@ var formatRowsAsHTML = function formatRowsAsHTML(rows, payload) {
   return table;
 };
 var formatTextAsHTML = function formatTextAsHTML(s) {
-  return s.replace(/[&"'<>]/g, function (i) {
+  var _s$toString$replace;
+  return (_s$toString$replace = s === null || s === void 0 ? void 0 : s.toString().replace(/[&"'<>]/g, function (i) {
     return "&#" + i.charCodeAt(0) + ";";
-  });
+  })) != null ? _s$toString$replace : '';
 };
-var formatSelectionAsRows = function formatSelectionAsRows(selection, editData) {
-  if (isEmptySelection(selection)) return [];
+var formatSelectionAsRows = function formatSelectionAsRows(selection, editData, sourceData) {
+  if (isEmptySelection(selection)) return {
+    rows: []
+  };
   var _normalizeSelection2 = normalizeSelection(selection),
     _normalizeSelection2$ = _normalizeSelection2[0],
     minX = _normalizeSelection2$[0],
@@ -2490,18 +2540,27 @@ var formatSelectionAsRows = function formatSelectionAsRows(selection, editData)
     minY = 0;
     maxY = cellY;
   }
-  var rows = [];
+  var texts = [];
+  var datas = {};
   for (var y = minY; y <= maxY; y++) {
-    var row = [];
+    var textRow = [];
+    var dataRow = {};
     for (var x = minX; x <= maxX; x++) {
-      var value = editData(x, y);
-      if (value !== null && value !== undefined) {
-        row.push(value != null ? value : '');
-      }
+      var _editData, _sourceData;
+      var value = (_editData = editData(x, y)) != null ? _editData : '';
+      var data = (_sourceData = sourceData(x, y)) != null ? _sourceData : null;
+      dataRow[textRow.length] = data;
+      textRow.push(value);
     }
-    rows.push(row);
+    datas[texts.length] = dataRow;
+    texts.push(textRow);
   }
-  return rows;
+  return {
+    rows: texts,
+    data: {
+      cells: datas
+    }
+  };
 };
 var _findTag = function findTag(element, tagName) {
   for (var _iterator = _createForOfIteratorHelperLoose(element.children), _step; !(_step = _iterator()).done;) {
@@ -2525,6 +2584,7 @@ var parsePastedHtml = function parsePastedHtml(html) {
     var json = sheetNode.getAttribute('payload');
     try {
       payload = JSON.parse(json);
+      if (!payload || typeof payload !== 'object') payload = null;
     } catch (e) {}
   }
   var tableNode = _findTag(div, 'TABLE');
@@ -3430,7 +3490,7 @@ var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
 };
 
 var Sheet = React.forwardRef(function (props, ref) {
-  var _props$selection, _props$secondarySelec, _props$cacheLayout, _props$inputComponent;
+  var _props$selection, _props$secondarySelec, _props$cacheLayout, _props$clipboardOrigi, _props$inputComponent2;
   var canvasRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var _useState = React.useState(INITIAL_MAX_SCROLL),
@@ -3471,9 +3531,12 @@ var Sheet = React.forwardRef(function (props, ref) {
   var _useState11 = React.useState(''),
     editValue = _useState11[0],
     setEditValue = _useState11[1];
-  var _useState12 = React.useState(false),
-    arrowKeyCommitMode = _useState12[0],
-    setArrowKeyCommitMode = _useState12[1];
+  var _useState12 = React.useState(null),
+    sourceValue = _useState12[0],
+    setSourceValue = _useState12[1];
+  var _useState13 = React.useState(false),
+    arrowKeyCommitMode = _useState13[0],
+    setArrowKeyCommitMode = _useState13[1];
   var _useResizeObserver = useResizeObserver({
       ref: overlayRef
     }),
@@ -3633,16 +3696,21 @@ var Sheet = React.forwardRef(function (props, ref) {
     if (props.onChange) {
       var cellX = editCell[0],
         cellY = editCell[1];
+      var hasData = !!input;
+      var v = hasData ? null : value;
+      var d = hasData ? value : null;
       props.onChange([{
         x: cellX,
         y: cellY,
-        value: value !== undefined ? value : editValue
+        value: value !== undefined ? v : editValue,
+        data: value !== undefined ? d : sourceValue
       }]);
     }
     setEditCell(NO_CELL);
     setFocused(true);
   };
   var startEditingCell = function startEditingCell(editCell, arrowKeyCommitMode) {
+    var _props$inputComponent, _editData, _sourceData;
     if (arrowKeyCommitMode === void 0) {
       arrowKeyCommitMode = false;
     }
@@ -3651,13 +3719,19 @@ var Sheet = React.forwardRef(function (props, ref) {
     if (cellReadOnly(cellX, cellY)) {
       return;
     }
-    var editDataValue = editData(cellX, cellY);
-    var val = '';
-    if (editDataValue !== null && editDataValue !== undefined) {
-      val = editDataValue;
+    var hasCustomComponent = !!((_props$inputComponent = props.inputComponent) !== null && _props$inputComponent !== void 0 && _props$inputComponent.call(props, cellX, cellY, _extends({}, inputProps, {
+      onChange: function onChange() {}
+    }), function () {}));
+    var editValue = (_editData = editData(cellX, cellY)) != null ? _editData : '';
+    var sourceValue = (_sourceData = sourceData(cellX, cellY)) != null ? _sourceData : null;
+    if (hasCustomComponent) {
+      setEditValue(null);
+      setSourceValue(sourceValue);
+    } else {
+      setEditValue(editValue);
+      setSourceValue(null);
     }
     setEditCell(editCell);
-    setEditValue(val);
     setArrowKeyCommitMode(arrowKeyCommitMode);
     setLastEditKey(editKeys.apply(void 0, editCell));
   };
@@ -3676,7 +3750,7 @@ var Sheet = React.forwardRef(function (props, ref) {
   }, [maxRows, maxColumns]);
   var hitmapRef = React.useRef(NO_CLICKABLES);
   var isFocused = focused || editMode;
-  var _useClipboardAPI = useClipboardAPI(selection, editData, cellReadOnly, isFocused && !editMode, changeSelection, props.onChange, props.onCopy, props.onPaste),
+  var _useClipboardAPI = useClipboardAPI(selection, editData, sourceData, cellReadOnly, isFocused && !editMode, changeSelection, props.onChange, props.onCopy, props.onPaste, (_props$clipboardOrigi = props.clipboardOrigin) != null ? _props$clipboardOrigi : location.origin),
     clipboardApi = _useClipboardAPI.clipboardApi,
     onClipboardCopy = _useClipboardAPI.onClipboardCopy;
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
@@ -3707,9 +3781,9 @@ var Sheet = React.forwardRef(function (props, ref) {
       window.cancelAnimationFrame(animationFrameId);
     };
   }, [cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset]);
-  var _useState13 = React.useState(''),
-    lastEditKey = _useState13[0],
-    setLastEditKey = _useState13[1];
+  var _useState14 = React.useState(''),
+    lastEditKey = _useState14[0],
+    setLastEditKey = _useState14[1];
   var editTextPosition = ORIGIN;
   var editTextWidth = 0;
   var editTextHeight = 0;
@@ -3742,7 +3816,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     textX = _editTextPosition[0],
     textY = _editTextPosition[1];
   var inputProps = {
-    value: editValue,
+    value: editValue != null ? editValue : '',
     autoFocus: true,
     onKeyDown: onInputKeyDown,
     style: {
@@ -3763,8 +3837,8 @@ var Sheet = React.forwardRef(function (props, ref) {
       resize: 'none'
     }
   };
-  var input = (_props$inputComponent = props.inputComponent) === null || _props$inputComponent === void 0 ? void 0 : _props$inputComponent.call(props, editCellX, editCellY, _extends({}, inputProps, {
-    onChange: setEditValue
+  var input = (_props$inputComponent2 = props.inputComponent) === null || _props$inputComponent2 === void 0 ? void 0 : _props$inputComponent2.call(props, editCellX, editCellY, _extends({}, inputProps, {
+    onChange: setSourceValue
   }), commitEditingCell);
   var overlayDivClassName = styles.sheetscroll;
   var overlayDivStyles = {