streaksheet - npm Package Compare versions

Comparing version 0.7.9 to 0.7.10

build/src/CellContainer.js

@@ -51,2 +51,3 @@ "use strict";
   var content;
+  var isEditing = false;
 
@@ -57,3 +58,2 @@ if (keys) {
         rowKey = keys.rowKey;
-    var isEditing;
 
@@ -91,3 +91,3 @@ if (cellBeingEdited) {
       "data-row-index": rowIndex,
-      style: data.styles.cell(_objectSpread({
+      style: data.styles.cell(_objectSpread(_objectSpread({
         borderBottom: DEFAULT_BORDER_STYLE,
@@ -98,7 +98,11 @@ borderLeft: DEFAULT_BORDER_STYLE,
         boxSizing: 'border-box',
-        // elements that can be overlapped by sticky stuff can not be contain:layout
-        contain: 'size',
         overflow: 'hidden',
         userSelect: 'none'
-      }, style), {
+      }, style), isEditing ? data.styles.cellEditMode({
+        width: 'auto',
+        minWidth: style.width,
+        overflow: 'visible',
+        boxShadow: '0px 4px 5px rgba(0, 0, 0, 0.12), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2)',
+        zIndex: 1
+      }) : {}), {
         columnIndex: columnIndex,
@@ -105,0 +109,0 @@ rowIndex: rowIndex

build/src/index.d.ts

@@ -61,2 +61,3 @@ import * as React from 'react';
     }) => CSSProperties;
+    cellEditMode: (base: CSSProperties) => CSSProperties;
     columnHeaderCellContainer: (base: CSSProperties, state: {
@@ -63,0 +64,0 @@ columnIndex: number;

build/src/index.js

@@ -20,4 +20,2 @@ "use strict";
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _identity = _interopRequireDefault(require("lodash/identity"));
@@ -35,10 +33,4 @@
 
-var _ColumnHeadersContainer = _interopRequireDefault(require("./ColumnHeadersContainer"));
-
 var _CellContainer = _interopRequireDefault(require("./CellContainer"));
 
-var _SelectionBackgrounds = _interopRequireDefault(require("./SelectionBackgrounds"));
-
-var _SelectionForegrounds = _interopRequireDefault(require("./SelectionForegrounds"));
-
 var _getSectionRowIndex = _interopRequireDefault(require("./getSectionRowIndex"));
@@ -52,6 +44,2 @@
 
-var _getPasteTargets = _interopRequireDefault(require("./selection/getPasteTargets"));
-
-var _isModKeyPressed = _interopRequireDefault(require("./selection/isModKeyPressed"));
-
 var _selectionReducer = _interopRequireDefault(require("./selection/selectionReducer"));
@@ -63,151 +51,6 @@
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _InnerElement = _interopRequireWildcard(require("./InnerElement"));
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _useGridKeyDown = _interopRequireDefault(require("./useGridKeyDown"));
 
-var DEFAULT_MINIMUM_COLUMN_WIDTH = 50; // px
-
-var InternalSheetInnerElementCtx = (0, React.createContext)(undefined);
-
-function InnerElement(props) {
-  var ref = (0, React.useRef)(null);
-
-  var _ref = (0, React.useContext)(InternalSheetInnerElementCtx),
-      copiedRegion = _ref.copiedRegion,
-      handleGridDoubleClick = _ref.handleGridDoubleClick,
-      handleGridKeyDown = _ref.handleGridKeyDown,
-      handleGridMouseDown = _ref.handleGridMouseDown,
-      handleGridMouseMove = _ref.handleGridMouseMove,
-      handleGridMouseUp = _ref.handleGridMouseUp,
-      resetAfterColumnIndex = _ref.resetAfterColumnIndex,
-      selection = _ref.selection,
-      sheetProps = _ref.sheetProps,
-      styles = _ref.styles,
-      topSectionHeight = _ref.topSectionHeight,
-      setHoveredRow = _ref.setHoveredRow;
-
-  var ColumnHeaderCell = sheetProps.ColumnHeaderCell,
-      SectionHeaderCell = sheetProps.SectionHeaderCell,
-      defaultRowHeight = sheetProps.defaultRowHeight,
-      _sheetProps$minimumCo = sheetProps.minimumColumnWidth,
-      minimumColumnWidth = _sheetProps$minimumCo === void 0 ? DEFAULT_MINIMUM_COLUMN_WIDTH : _sheetProps$minimumCo,
-      renderColumnsExpandButton = sheetProps.renderColumnsExpandButton,
-      sheetData = sheetProps.sheetData;
-  var columnAndOverviewData = sheetData.columnAndOverviewData,
-      onExpandColumns = sheetData.onExpandColumns,
-      onReorderColumn = sheetData.onReorderColumn,
-      onResizeColumn = sheetData.onResizeColumn,
-      sectionRowMatcher = sheetData.sectionRowMatcher;
-  var visibleColumns = columnAndOverviewData.columns.filter(function (col) {
-    return !col.isHidden;
-  });
-  var totalWidth = visibleColumns.reduce(function (acc, column) {
-    return acc + column.width;
-  }, 0);
-  return /*#__PURE__*/React.createElement("div", {
-    onDoubleClick: handleGridDoubleClick,
-    onKeyDown: handleGridKeyDown,
-    onMouseDown: handleGridMouseDown,
-    onMouseMove: handleGridMouseMove,
-    onMouseUp: handleGridMouseUp,
-    ref: ref,
-    style: _objectSpread(_objectSpread({}, props.style), {}, {
-      outline: 'none',
-      position: 'relative'
-    }),
-    tabIndex: 0,
-    onMouseOver: function onMouseOver(event) {
-      var cellContainer = event.target.closest('div[data-row-index]');
-
-      if (cellContainer) {
-        var rowIndex = Number(cellContainer.dataset.rowIndex);
-        setHoveredRow(rowIndex);
-      }
-    },
-    onMouseLeave: function onMouseLeave() {
-      setHoveredRow(undefined);
-    }
-  }, /*#__PURE__*/React.createElement(_SelectionBackgrounds["default"], {
-    columnAndOverviewData: columnAndOverviewData,
-    copiedRegion: copiedRegion,
-    defaultRowHeight: defaultRowHeight,
-    topSectionHeight: topSectionHeight,
-    sectionRowMatcher: sectionRowMatcher,
-    selection: selection,
-    styles: styles
-  }), props.children, /*#__PURE__*/React.createElement(_SelectionForegrounds["default"], {
-    columnAndOverviewData: columnAndOverviewData,
-    copiedRegion: copiedRegion,
-    defaultRowHeight: defaultRowHeight,
-    topSectionHeight: topSectionHeight,
-    sectionRowMatcher: sectionRowMatcher,
-    selection: selection,
-    styles: styles
-  }), /*#__PURE__*/React.createElement(_ColumnHeadersContainer["default"], {
-    ColumnHeaderCell: ColumnHeaderCell,
-    columns: columnAndOverviewData.columns,
-    height: defaultRowHeight,
-    liveResize: false,
-    minimumColumnWidth: minimumColumnWidth,
-    onExpandColumns: onExpandColumns,
-    onReorderColumn: onReorderColumn,
-    onResizeColumn: onResizeColumn,
-    renderColumnsExpandButton: renderColumnsExpandButton,
-    resetAfterColumnIndex: resetAfterColumnIndex,
-    styles: styles,
-    totalWidth: totalWidth,
-    topSection: sheetProps.topSection,
-    topSectionHeight: topSectionHeight
-  }), columnAndOverviewData.sections.map(function (section) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: section.key,
-      style: {
-        // elements that can be overlapped by sticky stuff can not be contain:layout
-        contain: 'size',
-        width: totalWidth,
-        height: section.sectionRowHeight + section.rowCount * defaultRowHeight
-      }
-    }, true
-    /* TODO allow sections to not have section row */
-    &&
-    /*#__PURE__*/
-    React.createElement("div", {
-      style: styles.sectionHeadersContainer({
-        backgroundColor: '#fff',
-        contain: 'size',
-        fontWeight: 'bold',
-        height: section.sectionRowHeight,
-        lineHeight: section.sectionRowHeight + 'px',
-        position: 'sticky',
-        top: topSectionHeight + defaultRowHeight,
-        width: totalWidth
-      })
-    }, visibleColumns.map(function (column, columnIndex) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: column.key,
-        style: styles.sectionHeaderCellContainer({
-          borderBottom: '1px solid rgb(230, 230, 230)',
-          borderLeft: '1px solid rgb(230, 230, 230)',
-          borderRight: '1px solid rgb(230, 230, 230)',
-          borderTop: '1px solid rgb(230, 230, 230)',
-          boxSizing: 'border-box',
-          display: 'inline-block',
-          height: section.sectionRowHeight,
-          overflow: 'hidden',
-          verticalAlign: 'top',
-          width: column.width
-        }, {
-          columnIndex: columnIndex,
-          sectionKey: section.key,
-          columnKey: column.key
-        })
-      }, /*#__PURE__*/React.createElement(SectionHeaderCell, {
-        columnKey: column.key,
-        isHidden: section.isHidden,
-        sectionKey: section.key
-      }));
-    })));
-  }));
-}
-
 /* Demo goal:
@@ -218,3 +61,3 @@ Should contain header row with column names, two groups, and multiple toggleable frozen columns.
 var _StreakSheet = function StreakSheet(props, ref) {
-  var _props$topSectionHeig, _props$styles19, _props$styles20, _props$styles21, _props$styles22, _props$styles23, _props$styles24, _props$styles25, _props$styles26, _props$styles27, _props$styles28, _props$styles29, _props$styles30, _props$styles31, _props$styles32, _props$styles33, _props$styles34, _props$styles35, _props$styles36;
+  var _props$topSectionHeig, _props$styles20, _props$styles21, _props$styles22, _props$styles23, _props$styles24, _props$styles25, _props$styles26, _props$styles27, _props$styles28, _props$styles29, _props$styles30, _props$styles31, _props$styles32, _props$styles33, _props$styles34, _props$styles35, _props$styles36, _props$styles37, _props$styles38;
 
@@ -234,25 +77,26 @@ var Cell = props.Cell,
   var styles = (0, React.useMemo)(function () {
-    var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7, _props$styles8, _props$styles9, _props$styles10, _props$styles11, _props$styles12, _props$styles13, _props$styles14, _props$styles15, _props$styles16, _props$styles17, _props$styles18;
+    var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7, _props$styles8, _props$styles9, _props$styles10, _props$styles11, _props$styles12, _props$styles13, _props$styles14, _props$styles15, _props$styles16, _props$styles17, _props$styles18, _props$styles19;
 
     return {
       cell: ((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.cell) || _identity["default"],
-      columnHeaderCellContainer: ((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.columnHeaderCellContainer) || _identity["default"],
-      columnHeadersContainer: ((_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.columnHeadersContainer) || _identity["default"],
-      columnReorderIndicator: ((_props$styles4 = props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.columnReorderIndicator) || _identity["default"],
-      columnReorderOverlay: ((_props$styles5 = props.styles) === null || _props$styles5 === void 0 ? void 0 : _props$styles5.columnReorderOverlay) || _identity["default"],
-      columnResizeHandle: ((_props$styles6 = props.styles) === null || _props$styles6 === void 0 ? void 0 : _props$styles6.columnResizeHandle) || _identity["default"],
-      columnResizeIndicator: ((_props$styles7 = props.styles) === null || _props$styles7 === void 0 ? void 0 : _props$styles7.columnResizeIndicator) || _identity["default"],
-      copiedRegionBackground: ((_props$styles8 = props.styles) === null || _props$styles8 === void 0 ? void 0 : _props$styles8.copiedRegionBackground) || _identity["default"],
-      copiedRegionForeground: ((_props$styles9 = props.styles) === null || _props$styles9 === void 0 ? void 0 : _props$styles9.copiedRegionForeground) || _identity["default"],
-      grid: ((_props$styles10 = props.styles) === null || _props$styles10 === void 0 ? void 0 : _props$styles10.grid) || _identity["default"],
-      highlightedRowBackground: ((_props$styles11 = props.styles) === null || _props$styles11 === void 0 ? void 0 : _props$styles11.highlightedRowBackground) || _identity["default"],
-      highlightedRowForeground: ((_props$styles12 = props.styles) === null || _props$styles12 === void 0 ? void 0 : _props$styles12.highlightedRowForeground) || _identity["default"],
-      primarySelectedCellBackground: ((_props$styles13 = props.styles) === null || _props$styles13 === void 0 ? void 0 : _props$styles13.primarySelectedCellBackground) || _identity["default"],
-      primarySelectedCellForeground: ((_props$styles14 = props.styles) === null || _props$styles14 === void 0 ? void 0 : _props$styles14.primarySelectedCellForeground) || _identity["default"],
-      sectionHeaderCellContainer: ((_props$styles15 = props.styles) === null || _props$styles15 === void 0 ? void 0 : _props$styles15.sectionHeaderCellContainer) || _identity["default"],
-      sectionHeadersContainer: ((_props$styles16 = props.styles) === null || _props$styles16 === void 0 ? void 0 : _props$styles16.sectionHeadersContainer) || _identity["default"],
-      selectionBackground: ((_props$styles17 = props.styles) === null || _props$styles17 === void 0 ? void 0 : _props$styles17.selectionBackground) || _identity["default"],
-      selectionForeground: ((_props$styles18 = props.styles) === null || _props$styles18 === void 0 ? void 0 : _props$styles18.selectionForeground) || _identity["default"]
+      cellEditMode: ((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.cellEditMode) || _identity["default"],
+      columnHeaderCellContainer: ((_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.columnHeaderCellContainer) || _identity["default"],
+      columnHeadersContainer: ((_props$styles4 = props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.columnHeadersContainer) || _identity["default"],
+      columnReorderIndicator: ((_props$styles5 = props.styles) === null || _props$styles5 === void 0 ? void 0 : _props$styles5.columnReorderIndicator) || _identity["default"],
+      columnReorderOverlay: ((_props$styles6 = props.styles) === null || _props$styles6 === void 0 ? void 0 : _props$styles6.columnReorderOverlay) || _identity["default"],
+      columnResizeHandle: ((_props$styles7 = props.styles) === null || _props$styles7 === void 0 ? void 0 : _props$styles7.columnResizeHandle) || _identity["default"],
+      columnResizeIndicator: ((_props$styles8 = props.styles) === null || _props$styles8 === void 0 ? void 0 : _props$styles8.columnResizeIndicator) || _identity["default"],
+      copiedRegionBackground: ((_props$styles9 = props.styles) === null || _props$styles9 === void 0 ? void 0 : _props$styles9.copiedRegionBackground) || _identity["default"],
+      copiedRegionForeground: ((_props$styles10 = props.styles) === null || _props$styles10 === void 0 ? void 0 : _props$styles10.copiedRegionForeground) || _identity["default"],
+      grid: ((_props$styles11 = props.styles) === null || _props$styles11 === void 0 ? void 0 : _props$styles11.grid) || _identity["default"],
+      highlightedRowBackground: ((_props$styles12 = props.styles) === null || _props$styles12 === void 0 ? void 0 : _props$styles12.highlightedRowBackground) || _identity["default"],
+      highlightedRowForeground: ((_props$styles13 = props.styles) === null || _props$styles13 === void 0 ? void 0 : _props$styles13.highlightedRowForeground) || _identity["default"],
+      primarySelectedCellBackground: ((_props$styles14 = props.styles) === null || _props$styles14 === void 0 ? void 0 : _props$styles14.primarySelectedCellBackground) || _identity["default"],
+      primarySelectedCellForeground: ((_props$styles15 = props.styles) === null || _props$styles15 === void 0 ? void 0 : _props$styles15.primarySelectedCellForeground) || _identity["default"],
+      sectionHeaderCellContainer: ((_props$styles16 = props.styles) === null || _props$styles16 === void 0 ? void 0 : _props$styles16.sectionHeaderCellContainer) || _identity["default"],
+      sectionHeadersContainer: ((_props$styles17 = props.styles) === null || _props$styles17 === void 0 ? void 0 : _props$styles17.sectionHeadersContainer) || _identity["default"],
+      selectionBackground: ((_props$styles18 = props.styles) === null || _props$styles18 === void 0 ? void 0 : _props$styles18.selectionBackground) || _identity["default"],
+      selectionForeground: ((_props$styles19 = props.styles) === null || _props$styles19 === void 0 ? void 0 : _props$styles19.selectionForeground) || _identity["default"]
     };
-  }, [(_props$styles19 = props.styles) === null || _props$styles19 === void 0 ? void 0 : _props$styles19.cell, (_props$styles20 = props.styles) === null || _props$styles20 === void 0 ? void 0 : _props$styles20.columnHeaderCellContainer, (_props$styles21 = props.styles) === null || _props$styles21 === void 0 ? void 0 : _props$styles21.columnHeadersContainer, (_props$styles22 = props.styles) === null || _props$styles22 === void 0 ? void 0 : _props$styles22.columnReorderIndicator, (_props$styles23 = props.styles) === null || _props$styles23 === void 0 ? void 0 : _props$styles23.columnReorderOverlay, (_props$styles24 = props.styles) === null || _props$styles24 === void 0 ? void 0 : _props$styles24.columnResizeHandle, (_props$styles25 = props.styles) === null || _props$styles25 === void 0 ? void 0 : _props$styles25.columnResizeIndicator, (_props$styles26 = props.styles) === null || _props$styles26 === void 0 ? void 0 : _props$styles26.copiedRegionBackground, (_props$styles27 = props.styles) === null || _props$styles27 === void 0 ? void 0 : _props$styles27.copiedRegionForeground, (_props$styles28 = props.styles) === null || _props$styles28 === void 0 ? void 0 : _props$styles28.grid, (_props$styles29 = props.styles) === null || _props$styles29 === void 0 ? void 0 : _props$styles29.highlightedRowBackground, (_props$styles30 = props.styles) === null || _props$styles30 === void 0 ? void 0 : _props$styles30.highlightedRowForeground, (_props$styles31 = props.styles) === null || _props$styles31 === void 0 ? void 0 : _props$styles31.primarySelectedCellBackground, (_props$styles32 = props.styles) === null || _props$styles32 === void 0 ? void 0 : _props$styles32.primarySelectedCellForeground, (_props$styles33 = props.styles) === null || _props$styles33 === void 0 ? void 0 : _props$styles33.sectionHeaderCellContainer, (_props$styles34 = props.styles) === null || _props$styles34 === void 0 ? void 0 : _props$styles34.sectionHeadersContainer, (_props$styles35 = props.styles) === null || _props$styles35 === void 0 ? void 0 : _props$styles35.selectionBackground, (_props$styles36 = props.styles) === null || _props$styles36 === void 0 ? void 0 : _props$styles36.selectionForeground]);
+  }, [(_props$styles20 = props.styles) === null || _props$styles20 === void 0 ? void 0 : _props$styles20.cell, (_props$styles21 = props.styles) === null || _props$styles21 === void 0 ? void 0 : _props$styles21.cellEditMode, (_props$styles22 = props.styles) === null || _props$styles22 === void 0 ? void 0 : _props$styles22.columnHeaderCellContainer, (_props$styles23 = props.styles) === null || _props$styles23 === void 0 ? void 0 : _props$styles23.columnHeadersContainer, (_props$styles24 = props.styles) === null || _props$styles24 === void 0 ? void 0 : _props$styles24.columnReorderIndicator, (_props$styles25 = props.styles) === null || _props$styles25 === void 0 ? void 0 : _props$styles25.columnReorderOverlay, (_props$styles26 = props.styles) === null || _props$styles26 === void 0 ? void 0 : _props$styles26.columnResizeHandle, (_props$styles27 = props.styles) === null || _props$styles27 === void 0 ? void 0 : _props$styles27.columnResizeIndicator, (_props$styles28 = props.styles) === null || _props$styles28 === void 0 ? void 0 : _props$styles28.copiedRegionBackground, (_props$styles29 = props.styles) === null || _props$styles29 === void 0 ? void 0 : _props$styles29.copiedRegionForeground, (_props$styles30 = props.styles) === null || _props$styles30 === void 0 ? void 0 : _props$styles30.grid, (_props$styles31 = props.styles) === null || _props$styles31 === void 0 ? void 0 : _props$styles31.highlightedRowBackground, (_props$styles32 = props.styles) === null || _props$styles32 === void 0 ? void 0 : _props$styles32.highlightedRowForeground, (_props$styles33 = props.styles) === null || _props$styles33 === void 0 ? void 0 : _props$styles33.primarySelectedCellBackground, (_props$styles34 = props.styles) === null || _props$styles34 === void 0 ? void 0 : _props$styles34.primarySelectedCellForeground, (_props$styles35 = props.styles) === null || _props$styles35 === void 0 ? void 0 : _props$styles35.sectionHeaderCellContainer, (_props$styles36 = props.styles) === null || _props$styles36 === void 0 ? void 0 : _props$styles36.sectionHeadersContainer, (_props$styles37 = props.styles) === null || _props$styles37 === void 0 ? void 0 : _props$styles37.selectionBackground, (_props$styles38 = props.styles) === null || _props$styles38 === void 0 ? void 0 : _props$styles38.selectionForeground]);
   var columnAndOverviewData = sheetData.columnAndOverviewData,
@@ -378,54 +222,2 @@ getJumpPoint = sheetData.getJumpPoint,
   }, []);
-  var copy = (0, React.useCallback)(function (didCut) {
-    if (selection.length === 0 || !onPaste) {
-      return false;
-    }
-
-    setCopyOperation({
-      didCut: didCut,
-      region: selection[0]
-    });
-    return true;
-  }, [onPaste, selection]);
-  var paste = (0, React.useCallback)(function () {
-    if (selection.length === 0 || !copyOperation || !onPaste) {
-      return false;
-    }
-
-    if (selection.length > 1) {
-      onUnsupportedOperation === null || onUnsupportedOperation === void 0 ? void 0 : onUnsupportedOperation('PASTE_TO_MULTIPLE_SELECTIONS');
-      return false;
-    }
-
-    var _copyOperation$region = (0, _slicedToArray2["default"])(copyOperation.region, 2),
-        copyStart = _copyOperation$region[0],
-        copyEnd = _copyOperation$region[1];
-
-    var _selection$ = (0, _slicedToArray2["default"])(selection[0], 2),
-        selectionStart = _selection$[0],
-        selectionEnd = _selection$[1];
-
-    var pasteTargets = (0, _getPasteTargets["default"])(copyStart, copyEnd, selectionStart, selectionEnd).map(function (_ref2) {
-      var source = _ref2.source,
-          target = _ref2.target;
-
-      var _source = (0, _slicedToArray2["default"])(source, 2),
-          sourceRowIndex = _source[0],
-          sourceColumnIndex = _source[1];
-
-      var _target = (0, _slicedToArray2["default"])(target, 2),
-          targetRowIndex = _target[0],
-          targetColumnIndex = _target[1];
-
-      var sourceKeys = cellIndexesToKeys(sourceRowIndex, sourceColumnIndex);
-      var targetKeys = cellIndexesToKeys(targetRowIndex, targetColumnIndex);
-      return sourceKeys && targetKeys ? {
-        source: sourceKeys,
-        target: targetKeys
-      } : null;
-    }).filter(_isNotNil["default"]);
-    onPaste(pasteTargets, copyOperation.didCut);
-    setCopyOperation(null);
-    return true;
-  }, [cellIndexesToKeys, copyOperation, onPaste, onUnsupportedOperation, selection]);
   var handleGridDoubleClick = (0, React.useCallback)(function (event) {
@@ -443,302 +235,3 @@ var cellIndexes = (0, _getCellIndexesFromMouseEvent["default"])(event);
 
-  var handleGridKeyDown = (0, React.useCallback)(function (event) {
-    var key = event.key,
-        metaKey = event.metaKey,
-        shiftKey = event.shiftKey;
-
-    switch (key) {
-      case 'ArrowDown':
-        {
-          if (selection.length === 0) {
-            return;
-          }
-
-          if (metaKey && getJumpPoint) {
-            var _selection$2 = (0, _slicedToArray2["default"])(selection[0], 1),
-                start = _selection$2[0];
-
-            var _start = (0, _slicedToArray2["default"])(start, 2),
-                rowIndex = _start[0],
-                columnIndex = _start[1];
-
-            var cellKeys = cellIndexesToKeys(rowIndex, columnIndex);
-
-            if (!cellKeys) {
-              return;
-            }
-
-            var _getJumpPoint = getJumpPoint(cellKeys, 'DOWN'),
-                jumpPointSectionKey = _getJumpPoint.sectionKey,
-                jumpPointRowKey = _getJumpPoint.rowKey,
-                jumpPointColumnKey = _getJumpPoint.columnKey;
-
-            var cellIndexes = cellKeysToIndexes(jumpPointSectionKey, jumpPointRowKey, jumpPointColumnKey);
-
-            if (!cellIndexes) {
-              return;
-            }
-
-            dispatchSelectionChange({
-              type: shiftKey ? 'EXPAND_TO_CELL' : 'MOVE_TO_CELL',
-              cellIndexes: cellIndexes
-            });
-          } else if (shiftKey) {
-            dispatchSelectionChange({
-              type: 'EXPAND_DOWN'
-            });
-          } else {
-            dispatchSelectionChange({
-              type: 'MOVE_DOWN'
-            });
-          }
-
-          break;
-        }
-
-      case 'ArrowLeft':
-        {
-          if (selection.length === 0) {
-            return;
-          }
-
-          if (metaKey && getJumpPoint) {
-            var _selection$3 = (0, _slicedToArray2["default"])(selection[0], 1),
-                _start2 = _selection$3[0];
-
-            var _start3 = (0, _slicedToArray2["default"])(_start2, 2),
-                _rowIndex = _start3[0],
-                _columnIndex = _start3[1];
-
-            var _cellKeys = cellIndexesToKeys(_rowIndex, _columnIndex);
-
-            if (!_cellKeys) {
-              return;
-            }
-
-            var _getJumpPoint2 = getJumpPoint(_cellKeys, 'LEFT'),
-                _jumpPointSectionKey = _getJumpPoint2.sectionKey,
-                _jumpPointRowKey = _getJumpPoint2.rowKey,
-                _jumpPointColumnKey = _getJumpPoint2.columnKey;
-
-            var _cellIndexes = cellKeysToIndexes(_jumpPointSectionKey, _jumpPointRowKey, _jumpPointColumnKey);
-
-            if (!_cellIndexes) {
-              return;
-            }
-
-            dispatchSelectionChange({
-              type: shiftKey ? 'EXPAND_TO_CELL' : 'MOVE_TO_CELL',
-              cellIndexes: _cellIndexes
-            });
-          } else if (shiftKey) {
-            dispatchSelectionChange({
-              type: 'EXPAND_LEFT'
-            });
-          } else {
-            dispatchSelectionChange({
-              type: 'MOVE_LEFT'
-            });
-          }
-
-          break;
-        }
-
-      case 'ArrowRight':
-        {
-          if (selection.length === 0) {
-            return;
-          }
-
-          if (metaKey && getJumpPoint) {
-            var _selection$4 = (0, _slicedToArray2["default"])(selection[0], 1),
-                _start4 = _selection$4[0];
-
-            var _start5 = (0, _slicedToArray2["default"])(_start4, 2),
-                _rowIndex2 = _start5[0],
-                _columnIndex2 = _start5[1];
-
-            var _cellKeys2 = cellIndexesToKeys(_rowIndex2, _columnIndex2);
-
-            if (!_cellKeys2) {
-              return;
-            }
-
-            var _getJumpPoint3 = getJumpPoint(_cellKeys2, 'RIGHT'),
-                _jumpPointSectionKey2 = _getJumpPoint3.sectionKey,
-                _jumpPointRowKey2 = _getJumpPoint3.rowKey,
-                _jumpPointColumnKey2 = _getJumpPoint3.columnKey;
-
-            var _cellIndexes2 = cellKeysToIndexes(_jumpPointSectionKey2, _jumpPointRowKey2, _jumpPointColumnKey2);
-
-            if (!_cellIndexes2) {
-              return;
-            }
-
-            dispatchSelectionChange({
-              type: shiftKey ? 'EXPAND_TO_CELL' : 'MOVE_TO_CELL',
-              cellIndexes: _cellIndexes2
-            });
-          } else if (shiftKey) {
-            dispatchSelectionChange({
-              type: 'EXPAND_RIGHT'
-            });
-          } else {
-            dispatchSelectionChange({
-              type: 'MOVE_RIGHT'
-            });
-          }
-
-          break;
-        }
-
-      case 'ArrowUp':
-        {
-          if (selection.length === 0) {
-            return;
-          }
-
-          if (metaKey && getJumpPoint) {
-            var _selection$5 = (0, _slicedToArray2["default"])(selection[0], 1),
-                _start6 = _selection$5[0];
-
-            var _start7 = (0, _slicedToArray2["default"])(_start6, 2),
-                _rowIndex3 = _start7[0],
-                _columnIndex3 = _start7[1];
-
-            var _cellKeys3 = cellIndexesToKeys(_rowIndex3, _columnIndex3);
-
-            if (!_cellKeys3) {
-              return;
-            }
-
-            var _getJumpPoint4 = getJumpPoint(_cellKeys3, 'UP'),
-                _jumpPointSectionKey3 = _getJumpPoint4.sectionKey,
-                _jumpPointRowKey3 = _getJumpPoint4.rowKey,
-                _jumpPointColumnKey3 = _getJumpPoint4.columnKey;
-
-            var _cellIndexes3 = cellKeysToIndexes(_jumpPointSectionKey3, _jumpPointRowKey3, _jumpPointColumnKey3);
-
-            if (!_cellIndexes3) {
-              return;
-            }
-
-            dispatchSelectionChange({
-              type: shiftKey ? 'EXPAND_TO_CELL' : 'MOVE_TO_CELL',
-              cellIndexes: _cellIndexes3
-            });
-          } else if (shiftKey) {
-            dispatchSelectionChange({
-              type: 'EXPAND_UP'
-            });
-          } else {
-            dispatchSelectionChange({
-              type: 'MOVE_UP'
-            });
-          }
-
-          break;
-        }
-
-      case 'Enter':
-        {
-          if (selection.length === 0) {
-            return;
-          }
-
-          var _selection$6 = (0, _slicedToArray2["default"])(selection[0], 1),
-              _start8 = _selection$6[0];
-
-          var _start9 = (0, _slicedToArray2["default"])(_start8, 2),
-              _rowIndex4 = _start9[0],
-              _columnIndex4 = _start9[1];
-
-          if (cellBeingEdited) {
-            setCellBeingEdited(null);
-            dispatchSelectionChange({
-              type: 'MOVE_DOWN'
-            });
-          } else {
-            setCellBeingEdited([_rowIndex4, _columnIndex4]);
-          }
-
-          break;
-        }
-
-      case 'Escape':
-        {
-          if (cellBeingEdited) {
-            setCellBeingEdited(null);
-          } else {
-            dispatchSelectionChange({
-              type: 'CLEAR',
-              keepAnchor: true
-            });
-            setCopyOperation(null);
-          }
-
-          break;
-        }
-
-      case 'Tab':
-        {
-          dispatchSelectionChange({
-            type: shiftKey ? 'MOVE_LEFT' : 'MOVE_RIGHT'
-          });
-          setCellBeingEdited(null);
-          break;
-        }
-
-      case 'c':
-      case 'x':
-        {
-          if (!(0, _isModKeyPressed["default"])(event)) {
-            return;
-          }
-
-          var didCopy = copy(key === 'x');
-
-          if (!didCopy) {
-            return;
-          }
-
-          break;
-        }
-
-      case 'f':
-        {
-          if (!(0, _isModKeyPressed["default"])(event) || !onOpenSearch) {
-            return;
-          }
-
-          onOpenSearch();
-          setCellBeingEdited(null);
-          break;
-        }
-
-      case 'v':
-        {
-          if (!(0, _isModKeyPressed["default"])(event)) {
-            return;
-          }
-
-          var didPaste = paste();
-
-          if (!didPaste) {
-            return;
-          }
-
-          break;
-        }
-
-      default:
-        {
-          // We want to prevent unhandled key events from falling through and
-          // hitting preventDefault and stopPropagation.
-          return;
-        }
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  }, [cellBeingEdited, setCellBeingEdited, cellIndexesToKeys, cellKeysToIndexes, copy, getJumpPoint, onOpenSearch, paste, selection]);
+  var handleGridKeyDown = (0, _useGridKeyDown["default"])(selection, getJumpPoint, dispatchSelectionChange, cellIndexesToKeys, cellKeysToIndexes, cellBeingEdited, setCellBeingEdited, copyOperation, setCopyOperation, onOpenSearch, onPaste, onUnsupportedOperation);
   var handleGridMouseDown = (0, React.useCallback)(function (event) {
@@ -804,6 +297,6 @@ var cellIndexes = (0, _getCellIndexesFromMouseEvent["default"])(event);
       getSelectedCells: function getSelectedCells() {
-        var cellKeys = selection.map(function (_ref3) {
-          var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-              start = _ref4[0],
-              end = _ref4[1];
+        var cellKeys = selection.map(function (_ref) {
+          var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+              start = _ref2[0],
+              end = _ref2[1];
 
@@ -813,13 +306,13 @@ return (0, _getCellsInRegion["default"])(start, end);
           return array.concat(cells);
-        }, []).map(function (_ref5) {
-          var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-              rowIndex = _ref6[0],
-              columnIndex = _ref6[1];
+        }, []).map(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+              rowIndex = _ref4[0],
+              columnIndex = _ref4[1];
 
           return cellIndexesToKeys(rowIndex, columnIndex);
         }).filter(_isNotNil["default"]);
-        return (0, _uniqBy["default"])(cellKeys, function (_ref7) {
-          var columnKey = _ref7.columnKey,
-              rowKey = _ref7.rowKey,
-              sectionKey = _ref7.sectionKey;
+        return (0, _uniqBy["default"])(cellKeys, function (_ref5) {
+          var columnKey = _ref5.columnKey,
+              rowKey = _ref5.rowKey,
+              sectionKey = _ref5.sectionKey;
           return "".concat(sectionKey, "-").concat(rowKey, "-").concat(columnKey);
@@ -901,5 +394,5 @@ });
   var sheetDataForStreakSheet = sheetData.useByStreakSheet();
-  var onItemsRendered = (0, React.useCallback)(function (_ref8) {
-    var visibleRowStartIndex = _ref8.visibleRowStartIndex,
-        visibleRowStopIndex = _ref8.visibleRowStopIndex;
+  var onItemsRendered = (0, React.useCallback)(function (_ref6) {
+    var visibleRowStartIndex = _ref6.visibleRowStartIndex,
+        visibleRowStopIndex = _ref6.visibleRowStopIndex;
     sheetDataForStreakSheet.onScroll(visibleRowStartIndex, visibleRowStopIndex);
@@ -948,7 +441,7 @@ }, [sheetDataForStreakSheet]);
       height: height,
-      innerElementType: InnerElement,
+      innerElementType: _InnerElement["default"],
       itemData: itemData,
-      itemKey: function itemKey(_ref9) {
-        var columnIndex = _ref9.columnIndex,
-            rowIndex = _ref9.rowIndex;
+      itemKey: function itemKey(_ref7) {
+        var columnIndex = _ref7.columnIndex,
+            rowIndex = _ref7.rowIndex;
         var keys = cellIndexesToKeys(rowIndex, columnIndex);
@@ -971,3 +464,3 @@
   }, [cellIndexesToKeys, columnAndOverviewData, defaultRowHeight, height, itemData, onItemsRendered, renderOverscanColumnCount, renderOverscanRowCount, sectionRowMatcher, styles, topSectionHeight, totalRowCount, width, visibleColumns]);
-  return /*#__PURE__*/React.createElement(InternalSheetInnerElementCtx.Provider, {
+  return /*#__PURE__*/React.createElement(_InnerElement.InternalSheetInnerElementCtx.Provider, {
     value: {
@@ -974,0 +467,0 @@ // TODO put less in context? use observedBits?

build/src/internalTypes.d.ts

 import * as React from 'react';
 import type { ComponentType } from 'react';
-import type { CellProps, RowsResult, Styles } from '.';
+import type { CellKeys, CellProps, Props, RowsResult, Styles } from '.';
 import type SectionRowMatcher from './SectionRowMatcher';
 import type { SectionRow } from './SectionRowMatcher';
+import { VariableSizeGrid } from 'react-window';
 export declare type CellIndexes = [number, number];
@@ -52,1 +53,17 @@ export interface CellIndexesToKeysAndDataResult {
 export declare const CellContainerContext: React.Context<CellContainerContextI | undefined>;
+export interface InnerElementCtx {
+    copiedRegion?: [CellIndexes, CellIndexes];
+    handleGridDoubleClick: React.MouseEventHandler;
+    handleGridKeyDown: React.KeyboardEventHandler;
+    handleGridMouseDown: React.MouseEventHandler;
+    handleGridMouseMove: React.MouseEventHandler;
+    handleGridMouseUp: React.MouseEventHandler;
+    resetAfterColumnIndex: VariableSizeGrid['resetAfterColumnIndex'];
+    rowsBySection: RowsBySection<any>;
+    selection: SelectionState;
+    sheetProps: Props<any>;
+    styles: Styles;
+    topSectionHeight: number;
+    setHoveredRow(row: number | undefined): void;
+}
+export declare type JumpPointGetter = (cellKeys: CellKeys, direction: 'DOWN' | 'LEFT' | 'RIGHT' | 'UP') => CellKeys;

build/src/useSheetData.d.ts

 import SectionRowMatcher from './SectionRowMatcher';
-import { RowsBySection } from './internalTypes';
+import { RowsBySection, JumpPointGetter } from './internalTypes';
 import type { CellKeys } from './';
@@ -42,3 +42,3 @@ export interface Section {
     }>;
-    getJumpPoint?: (cellKeys: CellKeys, direction: 'DOWN' | 'LEFT' | 'RIGHT' | 'UP') => CellKeys;
+    getJumpPoint?: JumpPointGetter;
     onExpandColumns: (columnKeys: string[]) => void;
@@ -59,3 +59,3 @@ onPaste?: (pasteTargets: PasteTarget[], didCut: boolean) => void;
     deleteRow(rowKey: string): void;
-    getJumpPoint?: (cellKeys: CellKeys, direction: 'DOWN' | 'LEFT' | 'RIGHT' | 'UP') => CellKeys;
+    getJumpPoint?: JumpPointGetter;
     onExpandColumns: (columnKeys: string[]) => void;
@@ -62,0 +62,0 @@ onPaste?: (pasteTargets: PasteTarget[], didCut: boolean) => void;

package.json

 {
   "name": "streaksheet",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "author": "Chris Cowan <[e-mail]>",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

372454

increased by3.69%

Number of package files

121

increased by8.04%

Lines of code

3301

increased by3.54%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes