@carbon/ibm-products 1.14.0 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/css/index-full-carbon.css +23 -5
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +4 -4
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +23 -5
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +23 -5
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.js +25 -19
  18. package/es/components/AddSelect/AddSelectFilter.js +5 -5
  19. package/es/components/DataSpreadsheet/DataSpreadsheet.js +174 -127
  20. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +24 -8
  21. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +31 -6
  22. package/es/components/DataSpreadsheet/hooks/index.js +2 -1
  23. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +36 -8
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +68 -0
  25. package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +20 -8
  26. package/es/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +18 -0
  27. package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +121 -0
  28. package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +108 -0
  29. package/es/components/DataSpreadsheet/utils/handleEditSubmit.js +87 -0
  30. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +42 -8
  31. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +153 -15
  32. package/es/components/DataSpreadsheet/utils/selectAllCells.js +53 -0
  33. package/es/components/MultiAddSelect/MultiAddSelect.js +150 -3
  34. package/es/components/PageHeader/PageHeader.js +3 -1
  35. package/es/components/SingleAddSelect/SingleAddSelect.js +90 -4
  36. package/es/components/TagSet/TagSet.js +13 -6
  37. package/es/components/Tearsheet/TearsheetShell.js +34 -10
  38. package/es/global/js/package-settings.js +2 -1
  39. package/lib/components/AddSelect/AddSelect.js +25 -19
  40. package/lib/components/AddSelect/AddSelectFilter.js +5 -5
  41. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +178 -126
  42. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +24 -8
  43. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +32 -6
  44. package/lib/components/DataSpreadsheet/hooks/index.js +9 -1
  45. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +36 -8
  46. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +79 -0
  47. package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +21 -8
  48. package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +27 -0
  49. package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +127 -0
  50. package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +118 -0
  51. package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js +94 -0
  52. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +44 -8
  53. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +161 -22
  54. package/lib/components/DataSpreadsheet/utils/selectAllCells.js +60 -0
  55. package/lib/components/MultiAddSelect/MultiAddSelect.js +150 -2
  56. package/lib/components/PageHeader/PageHeader.js +3 -1
  57. package/lib/components/SingleAddSelect/SingleAddSelect.js +91 -3
  58. package/lib/components/TagSet/TagSet.js +13 -6
  59. package/lib/components/Tearsheet/TearsheetShell.js +36 -10
  60. package/lib/global/js/package-settings.js +2 -1
  61. package/package.json +11 -11
  62. package/scss/components/AboutModal/_about-modal.scss +4 -0
  63. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +22 -1
  64. package/scss/components/ExportModal/_export-modal.scss +0 -4
@@ -17,9 +17,10 @@ import PropTypes from 'prop-types';
17
17
  import cx from 'classnames';
18
18
  import { px } from '@carbon/layout';
19
19
  import { pkg } from '../../settings';
20
+ import { usePreviousValue } from '../../global/js/hooks';
20
21
  import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
21
22
  import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
22
- import { usePreviousValue } from '../../global/js/hooks';
23
+ import { selectAllCells } from './utils/selectAllCells';
23
24
  var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
24
25
  export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
26
  var activeCellCoordinates = _ref.activeCellCoordinates,
@@ -33,7 +34,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
33
34
  setCurrentMatcher = _ref.setCurrentMatcher,
34
35
  setSelectionAreas = _ref.setSelectionAreas,
35
36
  setSelectionAreaData = _ref.setSelectionAreaData,
36
- rows = _ref.rows;
37
+ rows = _ref.rows,
38
+ updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
37
39
 
38
40
  var _useState = useState(0),
39
41
  _useState2 = _slicedToArray(_useState, 2),
@@ -55,7 +57,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
55
57
  }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
56
58
 
57
59
  var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
58
- return function () {
60
+ return function (event) {
61
+ var isHoldingCommandKey = event.metaKey || event.ctrlKey;
59
62
  handleHeaderCellSelection({
60
63
  type: 'column',
61
64
  activeCellCoordinates: activeCellCoordinates,
@@ -66,13 +69,27 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
66
69
  setSelectionAreas: setSelectionAreas,
67
70
  spreadsheetRef: ref,
68
71
  index: index,
69
- setSelectionAreaData: setSelectionAreaData
72
+ setSelectionAreaData: setSelectionAreaData,
73
+ isHoldingCommandKey: isHoldingCommandKey
70
74
  });
71
75
  };
72
76
  };
73
77
 
78
+ var handleSelectAllClick = function handleSelectAllClick() {
79
+ selectAllCells({
80
+ ref: ref,
81
+ setCurrentMatcher: setCurrentMatcher,
82
+ setSelectionAreas: setSelectionAreas,
83
+ rows: rows,
84
+ columns: columns,
85
+ activeCellCoordinates: activeCellCoordinates,
86
+ updateActiveCellCoordinates: updateActiveCellCoordinates
87
+ });
88
+ };
89
+
74
90
  return /*#__PURE__*/React.createElement("div", {
75
- className: cx("".concat(blockClass, "__header--container"))
91
+ className: cx("".concat(blockClass, "__header--container")),
92
+ role: "rowgroup"
76
93
  }, headerGroups.map(function (headerGroup, index) {
77
94
  return /*#__PURE__*/React.createElement("div", _extends({
78
95
  key: "header_".concat(index)
@@ -88,10 +105,12 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
88
105
  height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
89
106
  }
90
107
  }, /*#__PURE__*/React.createElement("button", {
108
+ id: "".concat(blockClass, "__cell--header--header"),
91
109
  "data-row-index": "header",
92
110
  "data-column-index": "header",
93
111
  type: "button",
94
112
  tabIndex: -1,
113
+ onClick: handleSelectAllClick,
95
114
  className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
96
115
  }, "\xA0")), headerGroup.headers.map(function (column, index) {
97
116
  return /*#__PURE__*/React.createElement("div", _extends({
@@ -99,6 +118,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
99
118
  role: "columnheader",
100
119
  className: "".concat(blockClass, "__columnheader")
101
120
  }, column.getHeaderProps()), /*#__PURE__*/React.createElement("button", {
121
+ id: "".concat(blockClass, "__cell--header--").concat(index),
102
122
  "data-row-index": "header",
103
123
  "data-column-index": index,
104
124
  tabIndex: -1,
@@ -178,5 +198,10 @@ DataSpreadsheetHeader.propTypes = {
178
198
  /**
179
199
  * Setter fn for selectionAreas value
180
200
  */
181
- setSelectionAreas: PropTypes.func
201
+ setSelectionAreas: PropTypes.func,
202
+
203
+ /**
204
+ * Function used to update the active cell coordinates
205
+ */
206
+ updateActiveCellCoordinates: PropTypes.func
182
207
  };
@@ -7,4 +7,5 @@
7
7
  export { useMoveActiveCell } from './useMoveActiveCell';
8
8
  export { useMultipleKeyTracking } from './useMultipleKeyTracking';
9
9
  export { useResetSpreadsheetFocus } from './useResetSpreadsheetFocus';
10
- export { useSpreadsheetOutsideClick } from './useSpreadsheetOutsideClick';
10
+ export { useSpreadsheetOutsideClick } from './useSpreadsheetOutsideClick';
11
+ export { useSpreadsheetEdit } from './useSpreadsheetEdit';
@@ -9,6 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
9
9
  */
10
10
  import { useEffect, useState } from 'react';
11
11
  import { usePreviousValue } from '../../../global/js/hooks';
12
+ import { includesResourceKey } from '../utils/handleMultipleKeys';
12
13
 
13
14
  var hasFocus = function hasFocus() {
14
15
  return typeof document !== 'undefined' && document.hasFocus();
@@ -19,15 +20,20 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
19
20
  containerHasFocus = _ref.containerHasFocus,
20
21
  isEditing = _ref.isEditing;
21
22
 
22
- var _useState = useState(hasFocus),
23
+ var _useState = useState(''),
23
24
  _useState2 = _slicedToArray(_useState, 2),
24
- windowFocused = _useState2[0],
25
- setWindowFocused = _useState2[1];
25
+ usingMac = _useState2[0],
26
+ setUsingMac = _useState2[1];
26
27
 
27
- var _useState3 = useState([]),
28
+ var _useState3 = useState(hasFocus),
28
29
  _useState4 = _slicedToArray(_useState3, 2),
29
- keysPressedList = _useState4[0],
30
- setKeysPressedList = _useState4[1];
30
+ windowFocused = _useState4[0],
31
+ setWindowFocused = _useState4[1];
32
+
33
+ var _useState5 = useState([]),
34
+ _useState6 = _slicedToArray(_useState5, 2),
35
+ keysPressedList = _useState6[0],
36
+ setKeysPressedList = _useState6[1];
31
37
 
32
38
  var previousState = usePreviousValue({
33
39
  isEditing: isEditing,
@@ -36,6 +42,14 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
36
42
  // we need to clear out the keysPressedList
37
43
 
38
44
  useEffect(function () {
45
+ var userAgentString = window.navigator.userAgent;
46
+
47
+ if (userAgentString.includes('Macintosh')) {
48
+ setUsingMac(true);
49
+ } else {
50
+ setUsingMac(false);
51
+ }
52
+
39
53
  setWindowFocused(hasFocus());
40
54
 
41
55
  var onWindowFocus = function onWindowFocus() {
@@ -61,6 +75,19 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
61
75
  // Prevent multiple keys of the same type being added to our keysPressedList array
62
76
  if (keysPressedList.includes(event.code)) {
63
77
  return;
78
+ } // Because keyup events are lost when using the Command key
79
+ // we need to remove the previously pressed keys so that we
80
+ // do not have keys in the pressed list that should not be
81
+
82
+
83
+ if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.length > 1) {
84
+ var clonedKeys = _toConsumableArray(keysPressedList);
85
+
86
+ var filteredClonedKeys = clonedKeys.filter(function (item) {
87
+ return item === 'MetaLeft' || item === 'MetaRight';
88
+ });
89
+ filteredClonedKeys.push(event.code);
90
+ return setKeysPressedList(_toConsumableArray(new Set(filteredClonedKeys)));
64
91
  }
65
92
 
66
93
  var tempKeys = _toConsumableArray(keysPressedList);
@@ -103,9 +130,10 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
103
130
  setKeysPressedList([]);
104
131
  }
105
132
  }
106
- }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused]);
133
+ }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
107
134
  return {
108
135
  keysPressedList: keysPressedList,
109
- windowFocused: windowFocused
136
+ windowFocused: windowFocused,
137
+ usingMac: usingMac
110
138
  };
111
139
  };
@@ -0,0 +1,68 @@
1
+ // /**
2
+ // * Copyright IBM Corp. 2022, 2022
3
+ // *
4
+ // * This source code is licensed under the Apache-2.0 license found in the
5
+ // * LICENSE file in the root directory of this source tree.
6
+ // */
7
+ import { useEffect } from 'react';
8
+ import { px } from '@carbon/layout';
9
+ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
10
+ var isEditing = _ref.isEditing,
11
+ rows = _ref.rows,
12
+ activeCellCoordinates = _ref.activeCellCoordinates,
13
+ activeCellRef = _ref.activeCellRef,
14
+ cellEditorRef = _ref.cellEditorRef,
15
+ cellEditorRulerRef = _ref.cellEditorRulerRef,
16
+ columns = _ref.columns,
17
+ defaultColumn = _ref.defaultColumn,
18
+ cellEditorValue = _ref.cellEditorValue;
19
+ useEffect(function () {
20
+ if (isEditing) {
21
+ var _rows$activeCellCoord, _cellProps$column, _cellEditorRef$curren;
22
+
23
+ var cellProps = (_rows$activeCellCoord = rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row]) === null || _rows$activeCellCoord === void 0 ? void 0 : _rows$activeCellCoord.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column];
24
+ var activeCellLeftPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.left;
25
+ var activeCellTopPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.top;
26
+ cellEditorRef.current.style.left = activeCellLeftPosition;
27
+ cellEditorRef.current.style.top = activeCellTopPosition;
28
+ cellEditorRef.current.style.display = 'block';
29
+ cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
30
+ cellEditorRef.current.style.height = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height;
31
+ cellEditorRef.current.style.paddingTop = "".concat((parseInt(activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height) - 16) / 2 - 1, "px"); // calculate paddingTop based on cellHeight which could be variable depending on the cellSize prop
32
+
33
+ cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 ? void 0 : (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
34
+ (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
35
+ var rulerWidth = cellEditorRulerRef.current.offsetWidth;
36
+ var cellWidth = activeCellRef.current.offsetWidth;
37
+
38
+ if (rulerWidth >= cellWidth) {
39
+ var widthMultiplier = Math.floor(rulerWidth / cellWidth) + 1;
40
+ var startingColumnPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column;
41
+ var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
42
+ var totalColumns = columns.length;
43
+ var totalRows = rows.length;
44
+ var totalMultiplierPossible = totalColumns - startingColumnPosition;
45
+ var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
46
+ cellEditorRef.current.style.maxHeight = px(totalCellEditorMaxHeight);
47
+ cellEditorRef.current.style.width = px(cellWidth * (widthMultiplier <= totalMultiplierPossible ? widthMultiplier : totalMultiplierPossible));
48
+ cellEditorRef.current.style.height = px(cellEditorRef.current.scrollHeight); // adds dynamic height to cell editor
49
+ // Cell editor has reached max height, we need to add the scrolling back.
50
+ // We also need to subtract 1 to account for the fact that the cell editor
51
+ // is placed one pixel below the cell being edited to account for the border
52
+
53
+ if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) {
54
+ cellEditorRef.current.style.overflow = 'auto';
55
+ } else {
56
+ cellEditorRef.current.style.overflow = 'hidden';
57
+ }
58
+ }
59
+ }
60
+
61
+ if (!isEditing) {
62
+ cellEditorRef.current.style.overflow = 'hidden';
63
+ cellEditorRef.current.style.display = 'none';
64
+ cellEditorRef.current.blur();
65
+ activeCellRef.current.focus();
66
+ }
67
+ }, [isEditing, activeCellCoordinates, rows, cellEditorValue, columns.length, defaultColumn, cellEditorValue, activeCellRef, cellEditorRef, cellEditorRulerRef]);
68
+ };
@@ -6,22 +6,34 @@
6
6
  */
7
7
  import { px } from '@carbon/layout';
8
8
  import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
9
+ import { getSelectionAreaPoints } from './getSelectionAreaPoints';
9
10
  export var createCellSelectionArea = function createCellSelectionArea(_ref) {
10
- var area = _ref.area,
11
+ var ref = _ref.ref,
12
+ area = _ref.area,
11
13
  blockClass = _ref.blockClass,
12
14
  defaultColumn = _ref.defaultColumn,
13
15
  selectionAreas = _ref.selectionAreas,
14
- setSelectionAreas = _ref.setSelectionAreas;
15
- var greatestRow = Math.max(area.point1.row, area.point2.row);
16
- var greatestColumn = Math.max(area.point1.column, area.point2.column);
17
- var lowestRowIndex = Math.min(area.point1.row, area.point2.row);
18
- var lowestColumnIndex = Math.min(area.point1.column, area.point2.column);
16
+ setSelectionAreas = _ref.setSelectionAreas,
17
+ setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea;
18
+
19
+ var _getSelectionAreaPoin = getSelectionAreaPoints(area),
20
+ lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
21
+ lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
22
+ greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
23
+ greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex;
24
+
25
+ if (greatestRowIndex - lowestRowIndex > 0 || greatestColumnIndex - lowestColumnIndex > 0) {
26
+ setActiveCellInsideSelectionArea(true);
27
+ var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
28
+ activeCellElement.setAttribute('data-selection-id', area.matcher);
29
+ }
30
+
19
31
  var point1Element = document.querySelector("[data-row-index=\"".concat(area.point1.row, "\"][data-column-index=\"").concat(area.point1.column, "\"]")) || document.querySelector(".".concat(blockClass, "__body--td")); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height/width of the first body cell we find
20
32
 
21
33
  var selectionAreaCellWidth = point1Element.offsetWidth;
22
34
  var selectionAreaCellHeight = point1Element.offsetHeight;
23
- var selectionAreaTotalWidth = selectionAreaCellWidth * (greatestColumn - lowestColumnIndex + 1);
24
- var selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRow - lowestRowIndex + 1);
35
+ var selectionAreaTotalWidth = selectionAreaCellWidth * (greatestColumnIndex - lowestColumnIndex + 1);
36
+ var selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRowIndex - lowestRowIndex + 1);
25
37
  var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
26
38
  var placementElement = bodyContainer.querySelector("[data-row-index=\"".concat(lowestRowIndex, "\"][data-column-index=\"").concat(lowestColumnIndex, "\"]"));
27
39
  var relativePosition = {
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Copyright IBM Corp. 2022, 2022
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export var getSelectionAreaPoints = function getSelectionAreaPoints(area) {
8
+ var greatestRowIndex = Math.max(area.point1.row, area.point2.row);
9
+ var greatestColumnIndex = Math.max(area.point1.column, area.point2.column);
10
+ var lowestRowIndex = Math.min(area.point1.row, area.point2.row);
11
+ var lowestColumnIndex = Math.min(area.point1.column, area.point2.column);
12
+ return {
13
+ greatestRowIndex: greatestRowIndex,
14
+ greatestColumnIndex: greatestColumnIndex,
15
+ lowestColumnIndex: lowestColumnIndex,
16
+ lowestRowIndex: lowestRowIndex
17
+ };
18
+ };
@@ -0,0 +1,121 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+
3
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
+
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+
7
+ /**
8
+ * Copyright IBM Corp. 2022, 2022
9
+ *
10
+ * This source code is licensed under the Apache-2.0 license found in the
11
+ * LICENSE file in the root directory of this source tree.
12
+ */
13
+ import { getSelectionAreaPoints } from './getSelectionAreaPoints';
14
+ export var handleActiveCellInSelectionEnter = function handleActiveCellInSelectionEnter(_ref) {
15
+ var activeCellInsideSelectionArea = _ref.activeCellInsideSelectionArea,
16
+ activeCellCoordinates = _ref.activeCellCoordinates,
17
+ activeCellRef = _ref.activeCellRef,
18
+ selectionAreas = _ref.selectionAreas,
19
+ updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
20
+
21
+ if (!activeCellInsideSelectionArea) {
22
+ return;
23
+ }
24
+
25
+ var activeCellSelectionId = activeCellRef.current.getAttribute('data-selection-id');
26
+ var activeCellIndexInSelectionAreas = selectionAreas.findIndex(function (item) {
27
+ return item.matcher === activeCellSelectionId;
28
+ });
29
+ var selectionAreaToNavigate = selectionAreas[activeCellIndexInSelectionAreas];
30
+
31
+ var _getSelectionAreaPoin = getSelectionAreaPoints(selectionAreaToNavigate),
32
+ lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
33
+ lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
34
+ greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
35
+ greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex; // Move active cell down one row if possible
36
+
37
+
38
+ var coordinatesClone = _objectSpread({}, activeCellCoordinates);
39
+
40
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) < greatestRowIndex) {
41
+ updateActiveCellCoordinates({
42
+ coords: coordinatesClone,
43
+ updatedValue: {
44
+ row: (coordinatesClone === null || coordinatesClone === void 0 ? void 0 : coordinatesClone.row) + 1
45
+ },
46
+ optOutOfSelectionAreaUpdate: true
47
+ });
48
+ } // Move active cell to next column of selection area if it exists
49
+ // If not, find the next selection area and update active cell to
50
+ // be the first cell in that selection
51
+
52
+
53
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === greatestRowIndex) {
54
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) < greatestColumnIndex) {
55
+ updateActiveCellCoordinates({
56
+ coords: coordinatesClone,
57
+ updatedValue: {
58
+ column: (coordinatesClone === null || coordinatesClone === void 0 ? void 0 : coordinatesClone.column) + 1,
59
+ row: lowestRowIndex
60
+ },
61
+ optOutOfSelectionAreaUpdate: true
62
+ });
63
+ } // Move to next selection area if there is one, or back to
64
+ // the beginning of the current selection
65
+
66
+
67
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === greatestColumnIndex) {
68
+ if (selectionAreas.length > 1) {
69
+ if (selectionAreas[activeCellIndexInSelectionAreas + 1]) {
70
+ // Update activeCellRef data-selection-id attribute to the matcher of the next selection area
71
+ activeCellRef.current.setAttribute('data-selection-id', selectionAreas[activeCellIndexInSelectionAreas + 1].matcher);
72
+ var nextSelectionArea = selectionAreas[activeCellIndexInSelectionAreas + 1];
73
+
74
+ var _getSelectionAreaPoin2 = getSelectionAreaPoints(nextSelectionArea),
75
+ _lowestColumnIndex = _getSelectionAreaPoin2.lowestColumnIndex,
76
+ _lowestRowIndex = _getSelectionAreaPoin2.lowestRowIndex;
77
+
78
+ updateActiveCellCoordinates({
79
+ coords: coordinatesClone,
80
+ updatedValue: {
81
+ column: _lowestColumnIndex,
82
+ row: _lowestRowIndex
83
+ },
84
+ optOutOfSelectionAreaUpdate: true
85
+ });
86
+ return;
87
+ } else {
88
+ // There are multiple selection areas and the active cell is in the last one
89
+ // So we need to move the active cell to the first cell in the first selection area
90
+ activeCellRef.current.setAttribute('data-selection-id', selectionAreas[0].matcher);
91
+ var firstSelectionArea = selectionAreas[0];
92
+
93
+ var _getSelectionAreaPoin3 = getSelectionAreaPoints(firstSelectionArea),
94
+ _lowestColumnIndex2 = _getSelectionAreaPoin3.lowestColumnIndex,
95
+ _lowestRowIndex2 = _getSelectionAreaPoin3.lowestRowIndex;
96
+
97
+ updateActiveCellCoordinates({
98
+ coords: coordinatesClone,
99
+ updatedValue: {
100
+ column: _lowestColumnIndex2,
101
+ row: _lowestRowIndex2
102
+ },
103
+ optOutOfSelectionAreaUpdate: true
104
+ });
105
+ }
106
+ } // Only one selection area, go back to first cell in the selection
107
+
108
+
109
+ if (selectionAreas.length === 1) {
110
+ return updateActiveCellCoordinates({
111
+ coords: coordinatesClone,
112
+ updatedValue: {
113
+ column: lowestColumnIndex,
114
+ row: lowestRowIndex
115
+ },
116
+ optOutOfSelectionAreaUpdate: true
117
+ });
118
+ }
119
+ }
120
+ }
121
+ };
@@ -0,0 +1,108 @@
1
+ /**
2
+ * Copyright IBM Corp. 2022, 2022
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { getSelectionAreaPoints } from './getSelectionAreaPoints';
8
+ export var handleActiveCellInSelectionTab = function handleActiveCellInSelectionTab(_ref) {
9
+ var activeCellInsideSelectionArea = _ref.activeCellInsideSelectionArea,
10
+ activeCellCoordinates = _ref.activeCellCoordinates,
11
+ activeCellRef = _ref.activeCellRef,
12
+ selectionAreas = _ref.selectionAreas,
13
+ updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
14
+
15
+ if (!activeCellInsideSelectionArea) {
16
+ return;
17
+ }
18
+
19
+ var activeCellSelectionId = activeCellRef.current.getAttribute('data-selection-id');
20
+ var activeCellIndexInSelectionAreas = selectionAreas.findIndex(function (item) {
21
+ return item.matcher === activeCellSelectionId;
22
+ });
23
+ var selectionAreaToNavigate = selectionAreas[activeCellIndexInSelectionAreas];
24
+
25
+ var _getSelectionAreaPoin = getSelectionAreaPoints(selectionAreaToNavigate),
26
+ lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
27
+ lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
28
+ greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
29
+ greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex; // Move active cell to next column in selection area
30
+
31
+
32
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) < greatestColumnIndex) {
33
+ updateActiveCellCoordinates({
34
+ updatedValue: {
35
+ column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) + 1
36
+ },
37
+ optOutOfSelectionAreaUpdate: true
38
+ });
39
+ } // Move active cell to next row of selection area if it exists
40
+ // If not, find the next selection area and update active cell to
41
+ // be the first cell in that selection
42
+
43
+
44
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === greatestColumnIndex) {
45
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) < greatestRowIndex) {
46
+ updateActiveCellCoordinates({
47
+ updatedValue: {
48
+ column: lowestColumnIndex,
49
+ row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) + 1
50
+ },
51
+ optOutOfSelectionAreaUpdate: true
52
+ });
53
+ } // Move to next selection area if there is on, or back to
54
+ // the beginning of the current selection
55
+
56
+
57
+ if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === greatestRowIndex) {
58
+ if (selectionAreas.length > 1) {
59
+ if (selectionAreas[activeCellIndexInSelectionAreas + 1]) {
60
+ // Update activeCellRef data-selection-id attribute to the matcher of the next selection area
61
+ activeCellRef.current.setAttribute('data-selection-id', selectionAreas[activeCellIndexInSelectionAreas + 1].matcher);
62
+ var nextSelectionArea = selectionAreas[activeCellIndexInSelectionAreas + 1];
63
+
64
+ var _getSelectionAreaPoin2 = getSelectionAreaPoints(nextSelectionArea),
65
+ _lowestColumnIndex = _getSelectionAreaPoin2.lowestColumnIndex,
66
+ _lowestRowIndex = _getSelectionAreaPoin2.lowestRowIndex;
67
+
68
+ updateActiveCellCoordinates({
69
+ updatedValue: {
70
+ column: _lowestColumnIndex,
71
+ row: _lowestRowIndex
72
+ },
73
+ optOutOfSelectionAreaUpdate: true
74
+ });
75
+ return;
76
+ } else {
77
+ // There are multiple selection areas and the active cell is in the last one
78
+ // So we need to move the active cell to the first cell in the first selection area
79
+ activeCellRef.current.setAttribute('data-selection-id', selectionAreas[0].matcher);
80
+ var firstSelectionArea = selectionAreas[0];
81
+
82
+ var _getSelectionAreaPoin3 = getSelectionAreaPoints(firstSelectionArea),
83
+ _lowestColumnIndex2 = _getSelectionAreaPoin3.lowestColumnIndex,
84
+ _lowestRowIndex2 = _getSelectionAreaPoin3.lowestRowIndex;
85
+
86
+ updateActiveCellCoordinates({
87
+ updatedValue: {
88
+ column: _lowestColumnIndex2,
89
+ row: _lowestRowIndex2
90
+ },
91
+ optOutOfSelectionAreaUpdate: true
92
+ });
93
+ }
94
+ } // Only one selection area, go back to first cell in the selection
95
+
96
+
97
+ if (selectionAreas.length === 1) {
98
+ return updateActiveCellCoordinates({
99
+ updatedValue: {
100
+ column: lowestColumnIndex,
101
+ row: lowestRowIndex
102
+ },
103
+ optOutOfSelectionAreaUpdate: true
104
+ });
105
+ }
106
+ }
107
+ }
108
+ };
@@ -0,0 +1,87 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+
3
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
+
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+
7
+ /**
8
+ * Copyright IBM Corp. 2022, 2022
9
+ *
10
+ * This source code is licensed under the Apache-2.0 license found in the
11
+ * LICENSE file in the root directory of this source tree.
12
+ */
13
+ import { removeCellSelections } from './removeCellSelections';
14
+ import uuidv4 from '../../../global/js/utils/uuidv4'; // Update the data
15
+
16
+ export var handleEditSubmit = function handleEditSubmit(_ref) {
17
+ var activeCellCoordinates = _ref.activeCellCoordinates,
18
+ cellEditorRulerRef = _ref.cellEditorRulerRef,
19
+ columns = _ref.columns,
20
+ previousState = _ref.previousState,
21
+ removeCellEditor = _ref.removeCellEditor,
22
+ rows = _ref.rows,
23
+ setActiveCellCoordinates = _ref.setActiveCellCoordinates,
24
+ setCurrentMatcher = _ref.setCurrentMatcher,
25
+ setSelectionAreas = _ref.setSelectionAreas,
26
+ spreadsheetRef = _ref.spreadsheetRef,
27
+ updateData = _ref.updateData;
28
+ return function (event) {
29
+ var key = event.key;
30
+
31
+ var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref2) {
32
+ var type = _ref2.type;
33
+
34
+ var submitEditChanges = function submitEditChanges() {
35
+ var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
36
+ var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
37
+ removeCellEditor();
38
+ updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
39
+ };
40
+
41
+ removeCellSelections({
42
+ spreadsheetRef: spreadsheetRef
43
+ });
44
+ submitEditChanges();
45
+ var tempMatcher = uuidv4();
46
+ var newSelectionArea = {
47
+ row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
48
+ column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column
49
+ };
50
+ setSelectionAreas([{
51
+ point1: newSelectionArea,
52
+ point2: newSelectionArea,
53
+ matcher: tempMatcher,
54
+ areaCreated: false
55
+ }]);
56
+ setCurrentMatcher(tempMatcher);
57
+ cellEditorRulerRef.current.textContent = '';
58
+ };
59
+
60
+ if (key === 'Enter') {
61
+ updateSelectionAreaOnCellEditSubmit({
62
+ type: 'Enter'
63
+ });
64
+ setActiveCellCoordinates(function (prev) {
65
+ return _objectSpread(_objectSpread({}, prev), {}, {
66
+ row: prev.row === rows.length - 1 ? prev.row : prev.row + 1 // do not move to next cell below if we're already in the last row
67
+
68
+ });
69
+ });
70
+ }
71
+
72
+ if (key === 'Tab') {
73
+ event.preventDefault();
74
+ updateSelectionAreaOnCellEditSubmit({
75
+ type: 'Tab'
76
+ });
77
+ setActiveCellCoordinates(function (prev) {
78
+ return _objectSpread(_objectSpread({}, prev), {}, {
79
+ column: prev.column === columns.length - 1 ? prev.column : prev.column + 1 // do not move to next cell below if we're already in the last column
80
+
81
+ });
82
+ });
83
+ }
84
+
85
+ return;
86
+ };
87
+ };