@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
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.handleEditSubmit = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _removeCellSelections = require("./removeCellSelections");
13
+
14
+ var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
15
+
16
+ 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; }
17
+
18
+ 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) { (0, _defineProperty2.default)(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; }
19
+
20
+ // Update the data
21
+ var handleEditSubmit = function handleEditSubmit(_ref) {
22
+ var activeCellCoordinates = _ref.activeCellCoordinates,
23
+ cellEditorRulerRef = _ref.cellEditorRulerRef,
24
+ columns = _ref.columns,
25
+ previousState = _ref.previousState,
26
+ removeCellEditor = _ref.removeCellEditor,
27
+ rows = _ref.rows,
28
+ setActiveCellCoordinates = _ref.setActiveCellCoordinates,
29
+ setCurrentMatcher = _ref.setCurrentMatcher,
30
+ setSelectionAreas = _ref.setSelectionAreas,
31
+ spreadsheetRef = _ref.spreadsheetRef,
32
+ updateData = _ref.updateData;
33
+ return function (event) {
34
+ var key = event.key;
35
+
36
+ var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref2) {
37
+ var type = _ref2.type;
38
+
39
+ var submitEditChanges = function submitEditChanges() {
40
+ var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
41
+ var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
42
+ removeCellEditor();
43
+ updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
44
+ };
45
+
46
+ (0, _removeCellSelections.removeCellSelections)({
47
+ spreadsheetRef: spreadsheetRef
48
+ });
49
+ submitEditChanges();
50
+ var tempMatcher = (0, _uuidv.default)();
51
+ var newSelectionArea = {
52
+ row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
53
+ column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column
54
+ };
55
+ setSelectionAreas([{
56
+ point1: newSelectionArea,
57
+ point2: newSelectionArea,
58
+ matcher: tempMatcher,
59
+ areaCreated: false
60
+ }]);
61
+ setCurrentMatcher(tempMatcher);
62
+ cellEditorRulerRef.current.textContent = '';
63
+ };
64
+
65
+ if (key === 'Enter') {
66
+ updateSelectionAreaOnCellEditSubmit({
67
+ type: 'Enter'
68
+ });
69
+ setActiveCellCoordinates(function (prev) {
70
+ return _objectSpread(_objectSpread({}, prev), {}, {
71
+ 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
72
+
73
+ });
74
+ });
75
+ }
76
+
77
+ if (key === 'Tab') {
78
+ event.preventDefault();
79
+ updateSelectionAreaOnCellEditSubmit({
80
+ type: 'Tab'
81
+ });
82
+ setActiveCellCoordinates(function (prev) {
83
+ return _objectSpread(_objectSpread({}, prev), {}, {
84
+ 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
85
+
86
+ });
87
+ });
88
+ }
89
+
90
+ return;
91
+ };
92
+ };
93
+
94
+ exports.handleEditSubmit = handleEditSubmit;
@@ -7,10 +7,16 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.handleHeaderCellSelection = void 0;
9
9
 
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+
12
+ var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
13
+
10
14
  var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
11
15
 
12
16
  var _removeCellSelections = require("./removeCellSelections");
13
17
 
18
+ var _checkActiveHeaderCell = require("./checkActiveHeaderCell");
19
+
14
20
  /**
15
21
  * Copyright IBM Corp. 2022, 2022
16
22
  *
@@ -28,8 +34,16 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
28
34
  spreadsheetRef = _ref.spreadsheetRef,
29
35
  index = _ref.index,
30
36
  isKeyboard = _ref.isKeyboard,
31
- setSelectionAreaData = _ref.setSelectionAreaData;
32
- setSelectionAreaData([]);
37
+ setSelectionAreaData = _ref.setSelectionAreaData,
38
+ isHoldingCommandKey = _ref.isHoldingCommandKey;
39
+
40
+ if (!isHoldingCommandKey) {
41
+ setSelectionAreaData([]);
42
+ (0, _removeCellSelections.removeCellSelections)({
43
+ spreadsheetRef: spreadsheetRef
44
+ });
45
+ }
46
+
33
47
  var rowValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row : index;
34
48
  var columnValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : index;
35
49
  var point1 = {
@@ -47,15 +61,37 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
47
61
  column: type === 'column' ? columnValue : 0
48
62
  });
49
63
  setCurrentMatcher(tempMatcher);
50
- (0, _removeCellSelections.removeCellSelections)({
51
- spreadsheetRef: spreadsheetRef
52
- });
53
- setSelectionAreas([{
64
+ var newSelectionArea = {
54
65
  point1: point1,
55
66
  point2: point2,
56
67
  areaCreated: false,
57
- matcher: tempMatcher
58
- }]);
68
+ matcher: tempMatcher,
69
+ header: {
70
+ type: type,
71
+ index: index
72
+ }
73
+ };
74
+ setSelectionAreas(function (prev) {
75
+ var selectionsClone = (0, _deepCloneObject.deepCloneObject)(prev);
76
+
77
+ if (isHoldingCommandKey) {
78
+ var selectionsFromHeaderCell = selectionsClone.filter(function (item) {
79
+ return item.header.type;
80
+ });
81
+ var previouslyCreatedHeaderSelection = selectionsFromHeaderCell.filter(function (item) {
82
+ return item.header.type === type;
83
+ });
84
+ var isHeaderPartOfPreviousSelection = (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, previouslyCreatedHeaderSelection, type); // Prevents row/column header selections from being created multiple times
85
+
86
+ if (previouslyCreatedHeaderSelection.length && isHeaderPartOfPreviousSelection) {
87
+ return prev;
88
+ }
89
+
90
+ return [].concat((0, _toConsumableArray2.default)(prev), [newSelectionArea]);
91
+ }
92
+
93
+ return [newSelectionArea];
94
+ });
59
95
  };
60
96
 
61
97
  exports.handleHeaderCellSelection = handleHeaderCellSelection;
@@ -1,18 +1,36 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
- exports.includesShift = exports.handleMultipleKeys = void 0;
8
+ exports.includesShift = exports.includesResourceKey = exports.handleMultipleKeys = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
7
11
 
8
12
  var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
9
13
 
10
- /**
11
- * Copyright IBM Corp. 2022, 2022
12
- *
13
- * This source code is licensed under the Apache-2.0 license found in the
14
- * LICENSE file in the root directory of this source tree.
15
- */
14
+ var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
15
+
16
+ var _selectAllCells = require("./selectAllCells");
17
+
18
+ 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; }
19
+
20
+ 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) { (0, _defineProperty2.default)(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; }
21
+
22
+ var includesResourceKey = function includesResourceKey(arr, usingMac) {
23
+ if (usingMac) {
24
+ return includesMeta(arr);
25
+ }
26
+
27
+ if (!usingMac) {
28
+ return includesControl(arr);
29
+ }
30
+ };
31
+
32
+ exports.includesResourceKey = includesResourceKey;
33
+
16
34
  var includesShift = function includesShift(arr) {
17
35
  if (arr.includes('ShiftLeft') || arr.includes('ShiftRight')) {
18
36
  return true;
@@ -40,7 +58,7 @@ var includesControl = function includesControl(arr) {
40
58
  };
41
59
 
42
60
  var handleMultipleKeys = function handleMultipleKeys(_ref) {
43
- var _selectionAreasClone$;
61
+ var _selectionAreasClone$, _selectionAreasClone$2, _selectionAreasClone$3;
44
62
 
45
63
  var activeCellCoordinates = _ref.activeCellCoordinates,
46
64
  event = _ref.event,
@@ -49,15 +67,21 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
49
67
  currentMatcher = _ref.currentMatcher,
50
68
  rows = _ref.rows,
51
69
  setSelectionAreas = _ref.setSelectionAreas,
52
- columns = _ref.columns;
70
+ columns = _ref.columns,
71
+ updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
72
+ spreadsheetRef = _ref.spreadsheetRef,
73
+ removeCellSelections = _ref.removeCellSelections,
74
+ blockClass = _ref.blockClass,
75
+ setCurrentMatcher = _ref.setCurrentMatcher,
76
+ usingMac = _ref.usingMac;
53
77
  var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
54
78
  var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
55
79
  return item.matcher === currentMatcher;
56
80
  });
57
- var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? selectionAreasClone[indexOfCurrentArea].point2 : selectionAreasClone[indexOfCurrentArea].point1; // Down + Shift
81
+ var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? (_selectionAreasClone$2 = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.point2 : (_selectionAreasClone$3 = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$3 === void 0 ? void 0 : _selectionAreasClone$3.point1; // Down + Shift
58
82
 
59
83
  if (includesShift(keysPressedList) && keysPressedList.includes('ArrowDown') && keysPressedList.length === 2) {
60
- if (rows.length - 1 === pointToUpdate.row) {
84
+ if (rows.length - 1 === (pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.row) || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
61
85
  return;
62
86
  }
63
87
 
@@ -72,7 +96,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
72
96
 
73
97
 
74
98
  if (includesShift(keysPressedList) && keysPressedList.includes('ArrowRight') && keysPressedList.length === 2) {
75
- if (columns.length - 1 === pointToUpdate.column) {
99
+ if (columns.length - 1 === (pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.column) || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
76
100
  return;
77
101
  }
78
102
 
@@ -87,7 +111,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
87
111
 
88
112
 
89
113
  if (includesShift(keysPressedList) && keysPressedList.includes('ArrowUp') && keysPressedList.length === 2) {
90
- if (pointToUpdate.row === 0) {
114
+ if ((pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.row) === 0 || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
91
115
  return;
92
116
  }
93
117
 
@@ -102,7 +126,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
102
126
 
103
127
 
104
128
  if (includesShift(keysPressedList) && keysPressedList.includes('ArrowLeft') && keysPressedList.length === 2) {
105
- if (pointToUpdate.column === 0) {
129
+ if ((pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.column) === 0 || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
106
130
  return;
107
131
  }
108
132
 
@@ -116,7 +140,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
116
140
  } // CMD + a (select all)
117
141
 
118
142
 
119
- if (includesMeta(keysPressedList) && keysPressedList.includes('KeyA')) {
143
+ if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('KeyA')) {
120
144
  event.preventDefault();
121
145
  var selectionPoint1 = {
122
146
  row: 0,
@@ -125,7 +149,20 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
125
149
  var selectionPoint2 = {
126
150
  row: rows.length - 1,
127
151
  column: columns.length - 1
128
- };
152
+ }; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
153
+
154
+ if (indexOfCurrentArea === -1) {
155
+ (0, _selectAllCells.selectAllCells)({
156
+ ref: spreadsheetRef,
157
+ setCurrentMatcher: setCurrentMatcher,
158
+ setSelectionAreas: setSelectionAreas,
159
+ rows: rows,
160
+ columns: columns,
161
+ activeCellCoordinates: activeCellCoordinates,
162
+ updateActiveCellCoordinates: updateActiveCellCoordinates
163
+ });
164
+ }
165
+
129
166
  selectionAreasClone[indexOfCurrentArea].point1 = selectionPoint1;
130
167
  selectionAreasClone[indexOfCurrentArea].point2 = selectionPoint2;
131
168
  selectionAreasClone[indexOfCurrentArea].areaCreated = false;
@@ -136,12 +173,35 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
136
173
  if (includesControl(keysPressedList) && keysPressedList.includes('Space')) {
137
174
  var _selectionPoint = {
138
175
  row: 0,
139
- column: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
176
+ column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
140
177
  };
141
178
  var _selectionPoint2 = {
142
179
  row: rows.length - 1,
143
- column: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
144
- };
180
+ column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
181
+ }; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
182
+
183
+ if (indexOfCurrentArea === -1) {
184
+ var tempMatcher = (0, _uuidv.default)();
185
+ var newSelectionArea = {
186
+ point1: _selectionPoint,
187
+ point2: _selectionPoint2,
188
+ areaCreated: false,
189
+ matcher: tempMatcher
190
+ };
191
+
192
+ var coordinatesClone = _objectSpread({}, activeCellCoordinates);
193
+
194
+ updateActiveCellCoordinates({
195
+ coords: coordinatesClone,
196
+ updatedValue: {
197
+ column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column,
198
+ row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row
199
+ }
200
+ });
201
+ setCurrentMatcher(tempMatcher);
202
+ return setSelectionAreas([newSelectionArea]);
203
+ }
204
+
145
205
  selectionAreasClone[indexOfCurrentArea].point1 = _selectionPoint;
146
206
  selectionAreasClone[indexOfCurrentArea].point2 = _selectionPoint2;
147
207
  selectionAreasClone[indexOfCurrentArea].areaCreated = false;
@@ -151,17 +211,96 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
151
211
 
152
212
  if (includesShift(keysPressedList) && keysPressedList.includes('Space')) {
153
213
  var _selectionPoint3 = {
154
- row: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
214
+ row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
155
215
  column: 0
156
216
  };
157
217
  var _selectionPoint4 = {
158
- row: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
218
+ row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
159
219
  column: columns.length - 1
160
- };
220
+ }; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
221
+
222
+ if (indexOfCurrentArea === -1) {
223
+ var _tempMatcher = (0, _uuidv.default)();
224
+
225
+ var _newSelectionArea = {
226
+ point1: _selectionPoint3,
227
+ point2: _selectionPoint4,
228
+ areaCreated: false,
229
+ matcher: _tempMatcher
230
+ };
231
+
232
+ var _coordinatesClone = _objectSpread({}, activeCellCoordinates);
233
+
234
+ updateActiveCellCoordinates({
235
+ coords: _coordinatesClone,
236
+ updatedValue: {
237
+ column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column,
238
+ row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row
239
+ }
240
+ });
241
+ setCurrentMatcher(_tempMatcher);
242
+ return setSelectionAreas([_newSelectionArea]);
243
+ }
244
+
161
245
  selectionAreasClone[indexOfCurrentArea].point1 = _selectionPoint3;
162
246
  selectionAreasClone[indexOfCurrentArea].point2 = _selectionPoint4;
163
247
  selectionAreasClone[indexOfCurrentArea].areaCreated = false;
164
248
  setSelectionAreas(selectionAreasClone);
249
+ } // CMD + HOME (Selects first cell in first row)
250
+
251
+
252
+ if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('Home')) {
253
+ var scrollElement = spreadsheetRef.current.querySelector(".".concat(blockClass, "__list--container"));
254
+ scrollElement.scrollTop = 0;
255
+
256
+ var _coordinatesClone2 = _objectSpread({}, activeCellCoordinates);
257
+
258
+ removeCellSelections({
259
+ spreadsheetRef: spreadsheetRef
260
+ });
261
+ updateActiveCellCoordinates({
262
+ coords: _coordinatesClone2,
263
+ updatedValue: {
264
+ column: 0,
265
+ row: 0
266
+ }
267
+ });
268
+ } // CMD + END (Selects last cell in last row)
269
+
270
+
271
+ if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('End')) {
272
+ var _scrollElement = spreadsheetRef.current.querySelector(".".concat(blockClass, "__list--container"));
273
+
274
+ _scrollElement.scrollTop = _scrollElement.scrollHeight;
275
+
276
+ var _coordinatesClone3 = _objectSpread({}, activeCellCoordinates);
277
+
278
+ removeCellSelections({
279
+ spreadsheetRef: spreadsheetRef
280
+ });
281
+ var lastCellExists = !!rows[(rows === null || rows === void 0 ? void 0 : rows.length) - 1].cells[(columns === null || columns === void 0 ? void 0 : columns.length) - 1];
282
+
283
+ var updateToLastCell = function updateToLastCell() {
284
+ updateActiveCellCoordinates({
285
+ coords: _coordinatesClone3,
286
+ updatedValue: {
287
+ column: columns.length - 1,
288
+ row: rows.length - 1
289
+ }
290
+ });
291
+ }; // With the spreadsheet supporting virtualized data, it's possible that the last cell
292
+ // has never been rendered yet, if that's the case we scroll to the bottom of the spreadsheet
293
+ // and add a timeout to wait for the last row to render to the DOM before updating the active cell coordinates.
294
+ // If we're able to verify that the last row has been rendered, no timeout is used.
295
+
296
+
297
+ if (lastCellExists) {
298
+ updateToLastCell();
299
+ } else {
300
+ setTimeout(function () {
301
+ updateToLastCell();
302
+ }, 1);
303
+ }
165
304
  }
166
305
  };
167
306
 
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.selectAllCells = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _removeCellSelections = require("./removeCellSelections");
13
+
14
+ var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
15
+
16
+ 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; }
17
+
18
+ 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) { (0, _defineProperty2.default)(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; }
19
+
20
+ var selectAllCells = function selectAllCells(_ref) {
21
+ var activeCellCoordinates = _ref.activeCellCoordinates,
22
+ columns = _ref.columns,
23
+ setCurrentMatcher = _ref.setCurrentMatcher,
24
+ setSelectionAreas = _ref.setSelectionAreas,
25
+ ref = _ref.ref,
26
+ rows = _ref.rows,
27
+ updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
28
+ (0, _removeCellSelections.removeCellSelections)({
29
+ spreadsheetRef: ref
30
+ });
31
+ var selectionPoint1 = {
32
+ row: 0,
33
+ column: 0
34
+ };
35
+ var selectionPoint2 = {
36
+ row: rows.length - 1,
37
+ column: columns.length - 1
38
+ };
39
+ var tempMatcher = (0, _uuidv.default)();
40
+ var newSelectionArea = {
41
+ point1: selectionPoint1,
42
+ point2: selectionPoint2,
43
+ areaCreated: false,
44
+ matcher: tempMatcher
45
+ };
46
+
47
+ var coordinatesClone = _objectSpread({}, activeCellCoordinates);
48
+
49
+ updateActiveCellCoordinates({
50
+ coords: coordinatesClone,
51
+ updatedValue: {
52
+ column: 0,
53
+ row: 0
54
+ }
55
+ });
56
+ setCurrentMatcher(tempMatcher);
57
+ return setSelectionAreas([newSelectionArea]);
58
+ };
59
+
60
+ exports.selectAllCells = selectAllCells;
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
13
13
 
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
 
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
16
18
  var _AddSelect = require("../AddSelect");
17
19
 
18
20
  var _devtools = require("../../global/js/utils/devtools");
@@ -23,7 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
23
25
 
24
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
27
 
26
- // import PropTypes from 'prop-types';
27
28
  var componentName = 'MultiAddSelect';
28
29
  var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
29
30
  return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
@@ -33,5 +34,152 @@ var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
33
34
  });
34
35
  exports.MultiAddSelect = MultiAddSelect;
35
36
  exports.MultiAddSelect = MultiAddSelect = _settings.pkg.checkComponentEnabled(MultiAddSelect, componentName);
36
- MultiAddSelect.propTypes = {};
37
+ MultiAddSelect.propTypes = {
38
+ /**
39
+ * optional class name
40
+ */
41
+ className: _propTypes.default.string,
42
+
43
+ /**
44
+ * placeholder for column input filter
45
+ */
46
+ columnInputPlaceholder: _propTypes.default.string,
47
+
48
+ /**
49
+ * text description that appears under the title
50
+ */
51
+ description: _propTypes.default.string,
52
+
53
+ /**
54
+ * options to display in the global filter box. values are generated
55
+ * from the id which should correlate with a specific property in an
56
+ * item entry
57
+ */
58
+ globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
59
+ id: _propTypes.default.string,
60
+ label: _propTypes.default.string
61
+ })),
62
+ globalFiltersIconDescription: _propTypes.default.string,
63
+
64
+ /**
65
+ * placeholder text for the global filter dropdown
66
+ */
67
+ globalFiltersPlaceholderText: _propTypes.default.string,
68
+
69
+ /**
70
+ * text for the global filter primary button
71
+ */
72
+ globalFiltersPrimaryButtonText: _propTypes.default.string,
73
+
74
+ /**
75
+ * text for the global filter secondary button
76
+ */
77
+ globalFiltersSecondaryButtonText: _propTypes.default.string,
78
+
79
+ /**
80
+ * label for global search input
81
+ */
82
+ globalSearchLabel: _propTypes.default.string,
83
+
84
+ /**
85
+ * placeholder for global search input
86
+ */
87
+ globalSearchPlaceholder: _propTypes.default.string,
88
+
89
+ /**
90
+ * title that displays in the sidebar / influencer
91
+ */
92
+ influencerTitle: _propTypes.default.string,
93
+
94
+ /**
95
+ * object that contains the item data. for more information reference the
96
+ * "Structuring items" section in the docs tab
97
+ */
98
+ items: _propTypes.default.shape({
99
+ modifiers: _propTypes.default.shape({
100
+ label: _propTypes.default.string,
101
+ options: _propTypes.default.array
102
+ }),
103
+ sortBy: _propTypes.default.array,
104
+ filterBy: _propTypes.default.array,
105
+ entries: _propTypes.default.arrayOf(_propTypes.default.shape({
106
+ avatar: _propTypes.default.shape({
107
+ alt: _propTypes.default.string,
108
+ icon: _propTypes.default.object,
109
+ src: _propTypes.default.string
110
+ }),
111
+ children: _propTypes.default.object,
112
+ icon: _propTypes.default.object,
113
+ id: _propTypes.default.string.isRequired,
114
+ subtitle: _propTypes.default.string,
115
+ title: _propTypes.default.string.isRequired,
116
+ value: _propTypes.default.string.isRequired
117
+ }))
118
+ }),
119
+
120
+ /**
121
+ * label that display above the list of items
122
+ */
123
+ itemsLabel: _propTypes.default.string,
124
+
125
+ /**
126
+ * text to display when no results are found from the global search
127
+ */
128
+ noResultsDescription: _propTypes.default.string,
129
+
130
+ /**
131
+ * title to display when no results are found from the global search
132
+ */
133
+ noResultsTitle: _propTypes.default.string,
134
+
135
+ /**
136
+ * text body that displays in the sidebar when nothing is selected
137
+ */
138
+ noSelectionDescription: _propTypes.default.string,
139
+
140
+ /**
141
+ * title that displays in the sidebar when nothing is selected
142
+ */
143
+ noSelectionTitle: _propTypes.default.string,
144
+
145
+ /**
146
+ * function to call when the close button clicked
147
+ */
148
+ onClose: _propTypes.default.func,
149
+
150
+ /**
151
+ * text for close button
152
+ */
153
+ onCloseButtonText: _propTypes.default.string,
154
+
155
+ /**
156
+ * function to call when the submit button is clicked. returns a selection
157
+ */
158
+ onSubmit: _propTypes.default.func,
159
+
160
+ /**
161
+ * text for the submit button
162
+ */
163
+ onSubmitButtonText: _propTypes.default.string,
164
+
165
+ /**
166
+ * specifies if the component is open or not
167
+ */
168
+ open: _propTypes.default.bool,
169
+
170
+ /**
171
+ * description for the remove item icon
172
+ */
173
+ removeIconDescription: _propTypes.default.string,
174
+
175
+ /**
176
+ * text that displays when displaying filtered items
177
+ */
178
+ searchResultsLabel: _propTypes.default.string,
179
+
180
+ /**
181
+ * header text
182
+ */
183
+ title: _propTypes.default.string
184
+ };
37
185
  MultiAddSelect.displayName = componentName;