@carbon/ibm-products 1.17.0 → 1.18.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 (46) hide show
  1. package/README.md +30 -27
  2. package/css/index-full-carbon.css +144 -78
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +4 -4
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon.css +27 -12
  7. package/css/index-without-carbon.css.map +1 -1
  8. package/css/index-without-carbon.min.css +2 -2
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +53 -43
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +4 -4
  13. package/css/index.min.css.map +1 -1
  14. package/es/components/AddSelect/AddSelect.js +30 -6
  15. package/es/components/AddSelect/AddSelectColumn.js +31 -73
  16. package/es/components/AddSelect/AddSelectFilter.js +2 -2
  17. package/es/components/AddSelect/AddSelectSort.js +61 -0
  18. package/es/components/AddSelect/add-select-utils.js +21 -0
  19. package/es/components/AddSelect/hooks/useItemSort.js +20 -0
  20. package/es/components/DataSpreadsheet/DataSpreadsheet.js +26 -13
  21. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +51 -40
  22. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +60 -3
  23. package/es/components/DataSpreadsheet/hooks/index.js +3 -1
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +15 -14
  25. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +60 -0
  26. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +153 -0
  27. package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -3
  28. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -0
  29. package/lib/components/AddSelect/AddSelect.js +31 -6
  30. package/lib/components/AddSelect/AddSelectColumn.js +32 -71
  31. package/lib/components/AddSelect/AddSelectFilter.js +2 -2
  32. package/lib/components/AddSelect/AddSelectSort.js +79 -0
  33. package/lib/components/AddSelect/add-select-utils.js +29 -2
  34. package/lib/components/AddSelect/hooks/useItemSort.js +33 -0
  35. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +25 -12
  36. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +52 -39
  37. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +62 -3
  38. package/lib/components/DataSpreadsheet/hooks/index.js +17 -1
  39. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +14 -14
  40. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +74 -0
  41. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +161 -0
  42. package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -3
  43. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +45 -0
  44. package/package.json +11 -10
  45. package/scss/components/AddSelect/_add-select.scss +6 -0
  46. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +21 -13
@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
21
21
 
22
22
  var _classnames = _interopRequireDefault(require("classnames"));
23
23
 
24
+ var _layout = require("@carbon/layout");
25
+
24
26
  var _settings = require("../../settings");
25
27
 
26
28
  var _hooks = require("../../global/js/hooks");
@@ -35,6 +37,8 @@ var _selectAllCells = require("./utils/selectAllCells");
35
37
 
36
38
  var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
37
39
 
40
+ var _hooks2 = require("./hooks");
41
+
38
42
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
43
 
40
44
  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; }
@@ -58,13 +62,20 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
58
62
  setSelectionAreaData = _ref.setSelectionAreaData,
59
63
  rows = _ref.rows,
60
64
  totalVisibleColumns = _ref.totalVisibleColumns,
61
- updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
65
+ updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
66
+ setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
67
+ headerCellHoldActive = _ref.headerCellHoldActive;
62
68
 
63
69
  var _useState = (0, _react.useState)(0),
64
70
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
65
71
  scrollBarSizeValue = _useState2[0],
66
72
  setScrollBarSizeValue = _useState2[1];
67
73
 
74
+ var _useState3 = (0, _react.useState)(false),
75
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
76
+ selectedHeaderReorderActive = _useState4[0],
77
+ setSelectedHeaderReorderActive = _useState4[1];
78
+
68
79
  var previousState = (0, _hooks.usePreviousValue)({
69
80
  cellSize: cellSize
70
81
  });
@@ -110,6 +121,39 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
110
121
  });
111
122
  };
112
123
 
124
+ var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
125
+ return function (event) {
126
+ var _selectionAreaToClone;
127
+
128
+ setSelectedHeaderReorderActive(true);
129
+ var clickXPosition = event.clientX;
130
+ var headerButtonCoords = event.target.getBoundingClientRect();
131
+ var offsetXValue = clickXPosition - headerButtonCoords.left;
132
+ var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
133
+ var selectionAreaToClone = selectionAreas.filter(function (item) {
134
+ var _item$header;
135
+
136
+ return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
137
+ });
138
+ var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
139
+ var selectionAreaClonedElement = selectionAreaElement.cloneNode();
140
+ var reorderIndicatorLine = selectionAreaElement.cloneNode();
141
+ reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
142
+ reorderIndicatorLine.style.width = (0, _layout.px)(2);
143
+ selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
144
+ selectionAreaClonedElement.setAttribute('data-clone-offset-x', offsetXValue);
145
+ selectionAreaClonedElement.setAttribute('data-column-index-original', index);
146
+ bodyContainer.appendChild(selectionAreaClonedElement);
147
+ bodyContainer.appendChild(reorderIndicatorLine);
148
+ setHeaderCellHoldActive(true);
149
+ };
150
+ };
151
+
152
+ (0, _hooks2.useSpreadsheetMouseMove)({
153
+ ref: ref,
154
+ headerCellHoldActive: headerCellHoldActive,
155
+ defaultColumn: defaultColumn
156
+ });
113
157
  return /*#__PURE__*/_react.default.createElement("div", {
114
158
  className: (0, _classnames.default)("".concat(blockClass, "__header--container")),
115
159
  role: "rowgroup"
@@ -146,6 +190,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
146
190
  }, "\xA0")), headerGroup.headers.map(function (column, index) {
147
191
  var _cx2;
148
192
 
193
+ var selectedHeader = (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'column');
149
194
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
150
195
  key: "column_".concat(index),
151
196
  role: "columnheader",
@@ -155,12 +200,16 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
155
200
  "data-row-index": "header",
156
201
  "data-column-index": index,
157
202
  tabIndex: -1,
158
- onClick: handleColumnHeaderClick(index),
203
+ onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
204
+ onMouseUp: selectedHeader ? function () {
205
+ return setSelectedHeaderReorderActive(false);
206
+ } : null,
207
+ onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
159
208
  style: {
160
209
  height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
161
210
  width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
162
211
  },
163
- className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column')), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header"), (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'column')), _cx2)),
212
+ className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column')), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header"), selectedHeader), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive), _cx2)),
164
213
  type: "button"
165
214
  }, column.render('Header')));
166
215
  }));
@@ -195,6 +244,11 @@ DataSpreadsheetHeader.propTypes = {
195
244
  width: _propTypes.default.number
196
245
  }),
197
246
 
247
+ /**
248
+ * Whether or not a click/hold is active on a header cell
249
+ */
250
+ headerCellHoldActive: _propTypes.default.bool,
251
+
198
252
  /**
199
253
  * Headers provided from useTable hook
200
254
  */
@@ -225,6 +279,11 @@ DataSpreadsheetHeader.propTypes = {
225
279
  */
226
280
  setCurrentMatcher: _propTypes.default.func,
227
281
 
282
+ /**
283
+ * Setter fn for header cell hold active value
284
+ */
285
+ setHeaderCellHoldActive: _propTypes.default.func,
286
+
228
287
  /**
229
288
  * Setter fn for selectionAreaData state value
230
289
  */
@@ -27,6 +27,18 @@ Object.defineProperty(exports, "useSpreadsheetEdit", {
27
27
  return _useSpreadsheetEdit.useSpreadsheetEdit;
28
28
  }
29
29
  });
30
+ Object.defineProperty(exports, "useSpreadsheetMouseMove", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _useSpreadsheetMouseMove.useSpreadsheetMouseMove;
34
+ }
35
+ });
36
+ Object.defineProperty(exports, "useSpreadsheetMouseUp", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _useSpreadsheetMouseUp.useSpreadsheetMouseUp;
40
+ }
41
+ });
30
42
  Object.defineProperty(exports, "useSpreadsheetOutsideClick", {
31
43
  enumerable: true,
32
44
  get: function get() {
@@ -42,4 +54,8 @@ var _useResetSpreadsheetFocus = require("./useResetSpreadsheetFocus");
42
54
 
43
55
  var _useSpreadsheetOutsideClick = require("./useSpreadsheetOutsideClick");
44
56
 
45
- var _useSpreadsheetEdit = require("./useSpreadsheetEdit");
57
+ var _useSpreadsheetEdit = require("./useSpreadsheetEdit");
58
+
59
+ var _useSpreadsheetMouseUp = require("./useSpreadsheetMouseUp");
60
+
61
+ var _useSpreadsheetMouseMove = require("./useSpreadsheetMouseMove");
@@ -17,12 +17,12 @@ var _settings = require("../../../settings");
17
17
 
18
18
  var _hooks = require("../../../global/js/hooks");
19
19
 
20
- // /**
21
- // * Copyright IBM Corp. 2022, 2022
22
- // *
23
- // * This source code is licensed under the Apache-2.0 license found in the
24
- // * LICENSE file in the root directory of this source tree.
25
- // */
20
+ /**
21
+ * Copyright IBM Corp. 2022, 2022
22
+ *
23
+ * This source code is licensed under the Apache-2.0 license found in the
24
+ * LICENSE file in the root directory of this source tree.
25
+ */
26
26
  var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
27
27
  var isEditing = _ref.isEditing,
28
28
  rows = _ref.rows,
@@ -30,7 +30,7 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
30
30
  activeCellRef = _ref.activeCellRef,
31
31
  cellEditorRef = _ref.cellEditorRef,
32
32
  cellEditorRulerRef = _ref.cellEditorRulerRef,
33
- columns = _ref.columns,
33
+ visibleColumns = _ref.visibleColumns,
34
34
  defaultColumn = _ref.defaultColumn,
35
35
  cellEditorValue = _ref.cellEditorValue,
36
36
  _ref$blockClass = _ref.blockClass,
@@ -69,9 +69,9 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
69
69
  (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
70
70
 
71
71
  if (rulerWidth < cellEditorCurrentWidth) {
72
- var _columns$nextIndex;
72
+ var _visibleColumns$nextI;
73
73
 
74
- var currentColumnWidth = ((_columns$nextIndex = columns[nextIndex]) === null || _columns$nextIndex === void 0 ? void 0 : _columns$nextIndex.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width); // If the contents of the cell editor is deleted past the point of the next column
74
+ var currentColumnWidth = ((_visibleColumns$nextI = visibleColumns[nextIndex]) === null || _visibleColumns$nextI === void 0 ? void 0 : _visibleColumns$nextI.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width); // If the contents of the cell editor is deleted past the point of the next column
75
75
 
76
76
  if (rulerWidth < cellEditorCurrentWidth - currentColumnWidth) {
77
77
  cellEditorRef.current.style.width = (0, _layout.px)(parseInt(cellEditorRef.current.style.width) - currentColumnWidth);
@@ -87,17 +87,17 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
87
87
  }
88
88
 
89
89
  if (rulerWidth >= cellEditorCurrentWidth) {
90
- var _columns;
90
+ var _visibleColumns;
91
91
 
92
92
  setNextIndex(function (prev) {
93
- if (prev === columns.length - 1) {
93
+ if (prev === visibleColumns.length - 1) {
94
94
  return prev;
95
95
  }
96
96
 
97
97
  return prev + 1;
98
98
  });
99
- var onLastColumnIndex = nextIndex + 1 === columns.length;
100
- var nextColumnWidth = onLastColumnIndex ? 0 : ((_columns = columns[nextIndex + 1]) === null || _columns === void 0 ? void 0 : _columns.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
99
+ var onLastColumnIndex = nextIndex + 1 === visibleColumns.length;
100
+ var nextColumnWidth = onLastColumnIndex ? 0 : ((_visibleColumns = visibleColumns[nextIndex + 1]) === null || _visibleColumns === void 0 ? void 0 : _visibleColumns.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
101
101
  var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
102
102
  var totalRows = rows.length;
103
103
  var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
@@ -123,7 +123,7 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
123
123
  activeCellRef.current.focus();
124
124
  setNextIndex(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column);
125
125
  }
126
- }, [isEditing, activeCellCoordinates, rows, cellEditorValue, columns.length, defaultColumn, activeCellRef, cellEditorRef, cellEditorRulerRef, columns, blockClass, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, nextIndex]);
126
+ }, [isEditing, activeCellCoordinates, rows, cellEditorValue, defaultColumn, activeCellRef, cellEditorRef, cellEditorRulerRef, visibleColumns, blockClass, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, nextIndex]);
127
127
  };
128
128
 
129
129
  exports.useSpreadsheetEdit = useSpreadsheetEdit;
@@ -0,0 +1,74 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useSpreadsheetMouseMove = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _layout = require("@carbon/layout");
11
+
12
+ var _settings = require("../../../settings");
13
+
14
+ var _getScrollbarWidth = require("../../../global/js/utils/getScrollbarWidth");
15
+
16
+ var _moveColumnIndicatorLine = require("../utils/moveColumnIndicatorLine");
17
+
18
+ /**
19
+ * Copyright IBM Corp. 2022, 2022
20
+ *
21
+ * This source code is licensed under the Apache-2.0 license found in the
22
+ * LICENSE file in the root directory of this source tree.
23
+ */
24
+ // Used specifically for reordering columns, will move the position of the
25
+ // cloned selection area to follow the position of the cursor
26
+ var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
27
+ var ref = _ref.ref,
28
+ _ref$blockClass = _ref.blockClass,
29
+ blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
30
+ headerCellHoldActive = _ref.headerCellHoldActive,
31
+ defaultColumn = _ref.defaultColumn;
32
+ (0, _react.useEffect)(function () {
33
+ var handleMouseMove = function handleMouseMove(event) {
34
+ var clonedSelectionElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
35
+
36
+ if (clonedSelectionElement) {
37
+ ref.current.addEventListener('mousemove', handleMouseMove);
38
+ }
39
+
40
+ var spreadsheetCoords = ref.current.getBoundingClientRect();
41
+ (0, _moveColumnIndicatorLine.moveColumnIndicatorLine)({
42
+ clonedSelectionElement: clonedSelectionElement,
43
+ ref: ref,
44
+ spreadsheetCoords: spreadsheetCoords
45
+ });
46
+ var scrollbarWidth = (0, _getScrollbarWidth.getScrollbarWidth)();
47
+ var spreadsheetWrapperElement = ref.current;
48
+ spreadsheetWrapperElement.getBoundingClientRect();
49
+ var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
50
+ var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
51
+ var totalSpreadsheetWidth = ref.current.offsetWidth;
52
+ var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
53
+ var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse
54
+
55
+ clonedSelectionElement.style.left = (0, _layout.px)(totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement : totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth);
56
+ };
57
+
58
+ if (headerCellHoldActive) {
59
+ ref.current.addEventListener('mousemove', handleMouseMove);
60
+ }
61
+
62
+ var spreadsheetRef = ref.current;
63
+
64
+ if (!headerCellHoldActive) {
65
+ spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
66
+ }
67
+
68
+ return function () {
69
+ spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
70
+ };
71
+ });
72
+ };
73
+
74
+ exports.useSpreadsheetMouseMove = useSpreadsheetMouseMove;
@@ -0,0 +1,161 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useSpreadsheetMouseUp = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
+
14
+ var _react = require("react");
15
+
16
+ var _layout = require("@carbon/layout");
17
+
18
+ var _settings = require("../../../settings");
19
+
20
+ var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
21
+
22
+ 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; }
23
+
24
+ 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; }
25
+
26
+ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
27
+ var currentMatcher = _ref.currentMatcher,
28
+ setSelectionAreas = _ref.setSelectionAreas,
29
+ setClickAndHoldActive = _ref.setClickAndHoldActive,
30
+ setValidStartingPoint = _ref.setValidStartingPoint,
31
+ validStartingPoint = _ref.validStartingPoint,
32
+ _ref$blockClass = _ref.blockClass,
33
+ blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
34
+ ref = _ref.ref,
35
+ setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
36
+ setColumnOrder = _ref.setColumnOrder,
37
+ visibleColumns = _ref.visibleColumns,
38
+ setActiveCellCoordinates = _ref.setActiveCellCoordinates,
39
+ activeCellCoordinates = _ref.activeCellCoordinates,
40
+ rows = _ref.rows,
41
+ defaultColumn = _ref.defaultColumn;
42
+ (0, _react.useEffect)(function () {
43
+ var handleMouseUp = function handleMouseUp(event) {
44
+ // Remove the cloned selection area on mouse up
45
+ if (!validStartingPoint) {
46
+ setHeaderCellHoldActive(false);
47
+ var selectionAreaCloneElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
48
+
49
+ if (!selectionAreaCloneElement) {
50
+ return;
51
+ } // Mouse up while a cloned selection area exists/a column is being reordered
52
+
53
+
54
+ if (selectionAreaCloneElement) {
55
+ var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
56
+ var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
57
+ var originalColumnIndex = selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original');
58
+ var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]")); // Mouse up element was not part of the spreadsheet component
59
+
60
+ if (!columnToMoveToElement) {
61
+ return;
62
+ }
63
+
64
+ var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
65
+ var spreadsheetPosition = ref.current.getBoundingClientRect();
66
+ var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
67
+ var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left;
68
+ var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
69
+ var columnsWidthUpToNewIndex = 0;
70
+ var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
71
+ visibleColumns.forEach(function (item, index) {
72
+ if (newIndexLessThanStarting && index === visibleColumns.length - 1) {
73
+ return;
74
+ }
75
+
76
+ if (index <= newColumnIndex) {
77
+ columnsWidthUpToNewIndex += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
78
+ }
79
+ });
80
+ var updatedSelectionAreaPlacement = newIndexLessThanStarting ? relativeNewPosition : columnsWidthUpToNewIndex - cloneColumnWidth + (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
81
+ selectionAreaToMove.style.left = (0, _layout.px)(updatedSelectionAreaPlacement);
82
+ setSelectionAreas(function (prev) {
83
+ var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
84
+
85
+ if (originalColumnIndex === newColumnIndex) {
86
+ return prev;
87
+ }
88
+
89
+ var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
90
+ return item.matcher === currentMatcher;
91
+ });
92
+
93
+ if (indexOfItemToUpdate === -1) {
94
+ return prev;
95
+ }
96
+
97
+ selectionAreaClone[indexOfItemToUpdate].header.index = Number(newColumnIndex);
98
+ selectionAreaClone[indexOfItemToUpdate].point1.column = Number(newColumnIndex);
99
+ selectionAreaClone[indexOfItemToUpdate].point2.column = Number(newColumnIndex);
100
+ return selectionAreaClone;
101
+ });
102
+ var columnIdArray = visibleColumns.map(function (column) {
103
+ return column.id;
104
+ });
105
+ var columnIdArrayClone = (0, _toConsumableArray2.default)(columnIdArray); // Remove one element at the original index
106
+
107
+ columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
108
+
109
+ columnIdArrayClone.splice(newColumnIndex, 0, columnIdArray[originalColumnIndex]);
110
+ setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
111
+
112
+ var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
113
+ column: Number(newColumnIndex)
114
+ });
115
+
116
+ setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
117
+
118
+ var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
119
+ indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
120
+ selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.remove();
121
+ }
122
+ } // Mouse up was on a spreadsheet body cell which is a valid
123
+ // start/end point for creating a selection area
124
+
125
+
126
+ if (validStartingPoint) {
127
+ setClickAndHoldActive(false);
128
+ setValidStartingPoint(false);
129
+ var cellButton = event.target.closest(".".concat(blockClass, "__body--td"));
130
+
131
+ if (cellButton) {
132
+ var endCellCoordinates = {
133
+ row: Number(cellButton.getAttribute('data-row-index')),
134
+ column: Number(cellButton.getAttribute('data-column-index'))
135
+ };
136
+ setSelectionAreas(function (prev) {
137
+ var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
138
+ var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
139
+ return item.matcher === currentMatcher;
140
+ }); // No items in the array have an object that matches the value of currentMatcher
141
+
142
+ if (indexOfItemToUpdate === -1) {
143
+ return prev;
144
+ }
145
+
146
+ selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
147
+ selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
148
+ return selectionAreaClone;
149
+ });
150
+ }
151
+ }
152
+ };
153
+
154
+ document.addEventListener('mouseup', handleMouseUp);
155
+ return function () {
156
+ document.removeEventListener('mouseup', handleMouseUp);
157
+ };
158
+ }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
159
+ };
160
+
161
+ exports.useSpreadsheetMouseUp = useSpreadsheetMouseUp;
@@ -21,11 +21,11 @@ var createCellSelectionArea = function createCellSelectionArea(_ref) {
21
21
  var ref = _ref.ref,
22
22
  area = _ref.area,
23
23
  blockClass = _ref.blockClass,
24
- columns = _ref.columns,
25
24
  defaultColumn = _ref.defaultColumn,
26
25
  selectionAreas = _ref.selectionAreas,
27
26
  setSelectionAreas = _ref.setSelectionAreas,
28
- setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea;
27
+ setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
28
+ visibleColumns = _ref.visibleColumns;
29
29
 
30
30
  var _getSelectionAreaPoin = (0, _getSelectionAreaPoints.getSelectionAreaPoints)(area),
31
31
  lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
@@ -40,7 +40,7 @@ var createCellSelectionArea = function createCellSelectionArea(_ref) {
40
40
  }
41
41
 
42
42
  var selectionAreaVariableWidth = 0;
43
- columns.forEach(function (item, index) {
43
+ visibleColumns.forEach(function (item, index) {
44
44
  if (index >= lowestColumnIndex && index <= greatestColumnIndex) {
45
45
  selectionAreaVariableWidth += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
46
46
  }
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.moveColumnIndicatorLine = void 0;
7
+
8
+ var _layout = require("@carbon/layout");
9
+
10
+ var _settings = require("../../../settings");
11
+
12
+ /**
13
+ * Copyright IBM Corp. 2022, 2022
14
+ *
15
+ * This source code is licensed under the Apache-2.0 license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ */
18
+ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
19
+ var _ref$blockClass = _ref.blockClass,
20
+ blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
21
+ clonedSelectionElement = _ref.clonedSelectionElement,
22
+ ref = _ref.ref,
23
+ spreadsheetCoords = _ref.spreadsheetCoords;
24
+ var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
25
+ var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
26
+ var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
27
+ var closestCellCoords = closestCell.getBoundingClientRect();
28
+ var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
29
+ var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
30
+ var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
31
+
32
+ if (Number(newColumnIndex) > Number(originalColumnIndex)) {
33
+ indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
34
+ }
35
+
36
+ if (Number(newColumnIndex) < Number(originalColumnIndex)) {
37
+ indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left);
38
+ }
39
+
40
+ if (Number(newColumnIndex) === Number(originalColumnIndex)) {
41
+ indicatorLineElement.style.left = selectionAreaOrigin.style.left;
42
+ }
43
+ };
44
+
45
+ exports.moveColumnIndicatorLine = moveColumnIndicatorLine;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "1.17.0",
4
+ "version": "1.18.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -50,19 +50,20 @@
50
50
  "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
51
51
  },
52
52
  "devDependencies": {
53
- "@babel/cli": "^7.17.6",
54
- "@babel/core": "^7.17.9",
55
- "babel-preset-ibm-cloud-cognitive": "^0.14.14",
53
+ "@babel/cli": "^7.17.10",
54
+ "@babel/core": "^7.17.10",
55
+ "babel-preset-ibm-cloud-cognitive": "^0.14.15",
56
56
  "chalk": "^4.1.2",
57
57
  "change-case": "^4.1.2",
58
58
  "copyfiles": "^2.4.1",
59
59
  "cross-env": "^7.0.3",
60
60
  "fs-extra": "^10.1.0",
61
61
  "glob": "^8.0.1",
62
- "jest": "^27.5.1",
63
- "jest-config-ibm-cloud-cognitive": "^0.23.17",
62
+ "jest": "^28.0.3",
63
+ "jest-config-ibm-cloud-cognitive": "^0.23.18",
64
+ "jest-environment-jsdom": "^28.1.0",
64
65
  "namor": "^1.1.2",
65
- "npm-check-updates": "^12.5.10",
66
+ "npm-check-updates": "^12.5.11",
66
67
  "npm-run-all": "^4.1.5",
67
68
  "rimraf": "^3.0.2",
68
69
  "sass": "^1.51.0",
@@ -86,11 +87,11 @@
86
87
  "@carbon/motion": "^10.29.0",
87
88
  "@carbon/themes": "^10.54.0",
88
89
  "@carbon/type": "^10.44.0",
89
- "carbon-components": "^10.56.0",
90
- "carbon-components-react": "^7.56.0",
90
+ "carbon-components": "^10.57.1",
91
+ "carbon-components-react": "^7.57.1",
91
92
  "carbon-icons": "^7.0.7",
92
93
  "react": "^16.8.6 || ^17.0.1",
93
94
  "react-dom": "^16.8.6 || ^17.0.1"
94
95
  },
95
- "gitHead": "dcf8ef9163dbb8cad6bfc6e70165bfa7288c654e"
96
+ "gitHead": "6bf1f85853417a8b5142207318b12290254201bf"
96
97
  }
@@ -100,6 +100,12 @@
100
100
  }
101
101
  }
102
102
 
103
+ .#{$block-class}__sub-header {
104
+ display: flex;
105
+ align-items: end;
106
+ justify-content: space-between;
107
+ }
108
+
103
109
  // sidebar
104
110
 
105
111
  .#{$block-class}__sidebar-header {
@@ -180,19 +180,6 @@
180
180
  outline: 0;
181
181
  }
182
182
  }
183
- .#{$block-class}__active-cell--highlight.#{$block-class}__active-cell--with-selection {
184
- &::before {
185
- position: absolute;
186
- top: 0;
187
- left: 0;
188
- display: block;
189
- width: 100%;
190
- height: 100%;
191
- background-color: $interactive-01;
192
- content: '';
193
- opacity: 0.25;
194
- }
195
- }
196
183
  .#{$block-class}__selection-area--element {
197
184
  position: absolute;
198
185
  z-index: 2;
@@ -210,6 +197,20 @@
210
197
  content: '';
211
198
  opacity: 0.2;
212
199
  }
200
+ &.#{$block-class}__selection-area--element-cloned {
201
+ z-index: 4;
202
+
203
+ &::before {
204
+ background-color: $ui-05;
205
+ opacity: 0.25;
206
+ }
207
+ }
208
+ }
209
+ .#{$block-class}__reorder-indicator-line {
210
+ position: absolute;
211
+ z-index: 4;
212
+ width: $spacing-01;
213
+ background-color: $interactive-01;
213
214
  }
214
215
  .#{$block-class}__th--active-header,
215
216
  .#{$block-class}__td-th--active-header.#{$block-class}__td {
@@ -220,10 +221,17 @@
220
221
  background-color: $inverse-02;
221
222
  color: $text-04;
222
223
 
224
+ &:focus,
223
225
  &:hover {
224
226
  background-color: $inverse-02;
225
227
  }
226
228
  }
229
+ .#{$block-class}__th--selected-header.#{$block-class}__th {
230
+ cursor: grab;
231
+ }
232
+ .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
233
+ cursor: grabbing;
234
+ }
227
235
  .#{$block-class}__list--container {
228
236
  overscroll-behavior: none;
229
237
  }