@carbon/ibm-products 1.18.1 → 1.19.1

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 (59) hide show
  1. package/css/components/Datagrid/styles/draggableElement.css +57 -0
  2. package/css/components/Datagrid/styles/draggableElement.css.map +1 -0
  3. package/css/components/Datagrid/styles/index.css +80 -0
  4. package/css/components/Datagrid/styles/index.css.map +1 -1
  5. package/css/index-full-carbon.css +98 -3
  6. package/css/index-full-carbon.css.map +1 -1
  7. package/css/index-full-carbon.min.css +3 -3
  8. package/css/index-full-carbon.min.css.map +1 -1
  9. package/css/index-without-carbon.css +98 -3
  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 +98 -3
  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/ActionSet/ActionSet.js +1 -0
  18. package/es/components/AddSelect/AddSelectFilter.js +9 -3
  19. package/es/components/AddSelect/AddSelectSidebar.js +3 -2
  20. package/es/components/ComboButton/ComboButton.js +1 -2
  21. package/es/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
  22. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
  23. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -6
  25. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +65 -34
  26. package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
  27. package/es/components/DataSpreadsheet/utils/getCellSize.js +10 -10
  28. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +113 -19
  29. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
  30. package/es/components/Datagrid/Datagrid/DraggableElement.js +9 -19
  31. package/es/components/ExportModal/ExportModal.js +1 -1
  32. package/es/global/js/hooks/useWindowResize.js +2 -1
  33. package/es/global/js/hooks/useWindowScroll.js +2 -1
  34. package/es/global/js/utils/scrollableAncestor.js +2 -1
  35. package/lib/components/ActionSet/ActionSet.js +1 -0
  36. package/lib/components/AddSelect/AddSelectFilter.js +10 -3
  37. package/lib/components/AddSelect/AddSelectSidebar.js +3 -2
  38. package/lib/components/ComboButton/ComboButton.js +2 -4
  39. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
  40. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
  41. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
  42. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -7
  43. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +66 -34
  44. package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
  45. package/lib/components/DataSpreadsheet/utils/getCellSize.js +4 -4
  46. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +112 -19
  47. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
  48. package/lib/components/Datagrid/Datagrid/DraggableElement.js +11 -19
  49. package/lib/components/ExportModal/ExportModal.js +1 -1
  50. package/lib/global/js/hooks/useWindowResize.js +3 -1
  51. package/lib/global/js/hooks/useWindowScroll.js +5 -1
  52. package/lib/global/js/utils/scrollableAncestor.js +6 -1
  53. package/package.json +4 -4
  54. package/scss/components/AddSelect/_add-select.scss +6 -0
  55. package/scss/components/ComboButton/_combo-button.scss +2 -1
  56. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +7 -0
  57. package/scss/components/Datagrid/_datagrid.scss +1 -10
  58. package/scss/components/Datagrid/styles/draggableElement.scss +58 -0
  59. package/scss/components/Datagrid/styles/index.scss +2 -1
@@ -13,12 +13,26 @@ var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
13
13
  * This source code is licensed under the Apache-2.0 license found in the
14
14
  * LICENSE file in the root directory of this source tree.
15
15
  */
16
- var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType) {
16
+ var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {
17
17
  var areasCloned = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
18
18
  var isSelectedHeader = areasCloned.some(function (area) {
19
- var _area$header, _area$header2;
19
+ var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
20
20
 
21
- return (area === null || area === void 0 ? void 0 : (_area$header = area.header) === null || _area$header === void 0 ? void 0 : _area$header.type) === headerType && headerIndex === (area === null || area === void 0 ? void 0 : (_area$header2 = area.header) === null || _area$header2 === void 0 ? void 0 : _area$header2.index);
21
+ var oppositeType = headerType === 'column' ? 'row' : 'column';
22
+ var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
23
+ var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
24
+ var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
25
+ var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
26
+ var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0; // console.log({minSelection, maxSelection});
27
+ // Iterate over all columns included in the selection area
28
+
29
+ for (var i = minSelection; i <= maxSelection; i++) {
30
+ if (headerIndex === i && isTrueSelectedState) {
31
+ return true;
32
+ }
33
+ }
34
+
35
+ return false;
22
36
  });
23
37
  return isSelectedHeader;
24
38
  };
@@ -19,16 +19,16 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
19
19
 
20
20
  var getCellSize = function getCellSize(cellSize) {
21
21
  switch (cellSize) {
22
- case 'compact':
22
+ case 'xs':
23
23
  return getSizeInPixels(_layout.sizeXSmall);
24
24
 
25
- case 'standard':
25
+ case 'sm':
26
26
  return getSizeInPixels(_layout.sizeSmall);
27
27
 
28
- case 'medium':
28
+ case 'md':
29
29
  return getSizeInPixels(_layout.sizeMedium);
30
30
 
31
- case 'large':
31
+ case 'lg':
32
32
  return getSizeInPixels(_layout.sizeLarge);
33
33
 
34
34
  default:
@@ -23,19 +23,36 @@ var _checkActiveHeaderCell = require("./checkActiveHeaderCell");
23
23
  * This source code is licensed under the Apache-2.0 license found in the
24
24
  * LICENSE file in the root directory of this source tree.
25
25
  */
26
- var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
27
- var type = _ref.type,
28
- activeCellCoordinates = _ref.activeCellCoordinates,
29
- rows = _ref.rows,
30
- columns = _ref.columns,
31
- setActiveCellCoordinates = _ref.setActiveCellCoordinates,
32
- setCurrentMatcher = _ref.setCurrentMatcher,
33
- setSelectionAreas = _ref.setSelectionAreas,
34
- spreadsheetRef = _ref.spreadsheetRef,
35
- index = _ref.index,
36
- isKeyboard = _ref.isKeyboard,
37
- setSelectionAreaData = _ref.setSelectionAreaData,
38
- isHoldingCommandKey = _ref.isHoldingCommandKey;
26
+ var getSelectedItemIndexList = function getSelectedItemIndexList(_ref) {
27
+ var indexList = _ref.indexList,
28
+ newIndex = _ref.newIndex,
29
+ activeCellIndex = _ref.activeCellIndex;
30
+ var lowestIndex = newIndex > activeCellIndex ? activeCellIndex : Math.min.apply(Math, (0, _toConsumableArray2.default)(indexList).concat([newIndex]));
31
+ var highestIndex = newIndex < activeCellIndex ? activeCellIndex : Math.max.apply(Math, (0, _toConsumableArray2.default)(indexList).concat([newIndex]));
32
+ var newIndexList = [];
33
+
34
+ for (var i = lowestIndex; i <= highestIndex; i++) {
35
+ newIndexList.push(i);
36
+ }
37
+
38
+ return [].concat(newIndexList);
39
+ };
40
+
41
+ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
42
+ var type = _ref2.type,
43
+ activeCellCoordinates = _ref2.activeCellCoordinates,
44
+ rows = _ref2.rows,
45
+ columns = _ref2.columns,
46
+ currentMatcher = _ref2.currentMatcher,
47
+ setActiveCellCoordinates = _ref2.setActiveCellCoordinates,
48
+ setCurrentMatcher = _ref2.setCurrentMatcher,
49
+ setSelectionAreas = _ref2.setSelectionAreas,
50
+ spreadsheetRef = _ref2.spreadsheetRef,
51
+ index = _ref2.index,
52
+ isKeyboard = _ref2.isKeyboard,
53
+ setSelectionAreaData = _ref2.setSelectionAreaData,
54
+ isHoldingCommandKey = _ref2.isHoldingCommandKey,
55
+ isHoldingShiftKey = _ref2.isHoldingShiftKey;
39
56
 
40
57
  if (!isHoldingCommandKey) {
41
58
  setSelectionAreaData([]);
@@ -56,11 +73,15 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
56
73
  column: type === 'column' ? columnValue : columns.length - 1
57
74
  };
58
75
  var tempMatcher = (0, _uuidv.default)();
59
- setActiveCellCoordinates({
60
- row: type === 'column' ? 0 : rowValue,
61
- column: type === 'column' ? columnValue : 0
62
- });
63
- setCurrentMatcher(tempMatcher);
76
+
77
+ if (!isHoldingShiftKey) {
78
+ setActiveCellCoordinates({
79
+ row: type === 'column' ? 0 : rowValue,
80
+ column: type === 'column' ? columnValue : 0
81
+ });
82
+ setCurrentMatcher(tempMatcher);
83
+ }
84
+
64
85
  var newSelectionArea = {
65
86
  point1: point1,
66
87
  point2: point2,
@@ -68,7 +89,7 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
68
89
  matcher: tempMatcher,
69
90
  header: {
70
91
  type: type,
71
- index: type === 'column' ? columnValue : rowValue
92
+ selectedIndexList: [type === 'column' ? columnValue : rowValue]
72
93
  }
73
94
  };
74
95
  setSelectionAreas(function (prev) {
@@ -94,6 +115,78 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
94
115
  return [].concat((0, _toConsumableArray2.default)(prev), [newSelectionArea]);
95
116
  }
96
117
 
118
+ if (isHoldingShiftKey) {
119
+ var _selectionAreasClone$, _selectionAreasClone$2;
120
+
121
+ var _selectionsFromHeaderCell = selectionsClone.filter(function (item) {
122
+ var _item$header3;
123
+
124
+ return (_item$header3 = item.header) === null || _item$header3 === void 0 ? void 0 : _item$header3.type;
125
+ }); // Shift/click behavior should not occur unless there are activeCellCoordinates set
126
+
127
+
128
+ var currentSelectionArea = _selectionsFromHeaderCell.filter(function (item) {
129
+ return item.matcher === currentMatcher;
130
+ })[0];
131
+
132
+ var originalAreaIndex = Math.max(currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point1[type], currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point2[type], activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
133
+ var newIndexValue = type === 'column' ? columnValue : rowValue;
134
+ var newPoint = {
135
+ row: originalAreaIndex < newIndexValue ? rows.length - 1 : 0,
136
+ column: columnValue
137
+ };
138
+ var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(prev);
139
+ var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
140
+ return item.matcher === currentMatcher;
141
+ });
142
+ var newIndexList = getSelectedItemIndexList({
143
+ indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 ? void 0 : (_selectionAreasClone$2 = _selectionAreasClone$.header) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
144
+ newIndex: newIndexValue,
145
+ activeCellIndex: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]
146
+ });
147
+
148
+ var setPoint1 = function setPoint1(value) {
149
+ return value < newIndexValue ? {
150
+ row: type === 'column' ? 0 : Math.min.apply(Math, (0, _toConsumableArray2.default)(newIndexList)),
151
+ column: type === 'column' ? Math.min.apply(Math, (0, _toConsumableArray2.default)(newIndexList)) : 0
152
+ } : newPoint;
153
+ };
154
+
155
+ var setPoint2 = function setPoint2(value) {
156
+ return value < newIndexValue ? newPoint : {
157
+ row: type === 'column' ? rows.length - 1 : Math.max.apply(Math, (0, _toConsumableArray2.default)(newIndexList)),
158
+ column: type === 'column' ? Math.max.apply(Math, (0, _toConsumableArray2.default)(newIndexList)) : columns.length - 1
159
+ };
160
+ }; // If there is no active cell set and shift is clicked on a header cell
161
+
162
+
163
+ if (!activeCellCoordinates || typeof activeCellCoordinates === 'undefined') {
164
+ // Need to set positioning of active cell because it doesn't exist yet
165
+ setCurrentMatcher(tempMatcher);
166
+ var firstSelectionArea = {
167
+ point1: setPoint1(type === 'column' ? columnValue : rowValue),
168
+ point2: setPoint2(type === 'column' ? columnValue : rowValue),
169
+ areaCreated: false,
170
+ matcher: tempMatcher,
171
+ header: {
172
+ type: type,
173
+ selectedIndexList: [type === 'column' ? columnValue : rowValue]
174
+ }
175
+ };
176
+ setActiveCellCoordinates({
177
+ row: type === 'column' ? 0 : rowValue,
178
+ column: type === 'column' ? columnValue : 0
179
+ });
180
+ return [firstSelectionArea];
181
+ }
182
+
183
+ selectionAreasClone[indexOfCurrentArea].point1 = setPoint1(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
184
+ selectionAreasClone[indexOfCurrentArea].point2 = setPoint2(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
185
+ selectionAreasClone[indexOfCurrentArea].areaCreated = false;
186
+ selectionAreasClone[indexOfCurrentArea].header.selectedIndexList = newIndexList;
187
+ return selectionAreasClone;
188
+ }
189
+
97
190
  return [newSelectionArea];
98
191
  });
99
192
  };
@@ -20,7 +20,8 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
20
20
  blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
21
21
  clonedSelectionElement = _ref.clonedSelectionElement,
22
22
  ref = _ref.ref,
23
- spreadsheetCoords = _ref.spreadsheetCoords;
23
+ spreadsheetCoords = _ref.spreadsheetCoords,
24
+ leftScrollAmount = _ref.leftScrollAmount;
24
25
  var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
25
26
  var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
26
27
  var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
@@ -30,11 +31,11 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
30
31
  var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
31
32
 
32
33
  if (Number(newColumnIndex) > Number(originalColumnIndex)) {
33
- indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
34
+ indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
34
35
  }
35
36
 
36
37
  if (Number(newColumnIndex) < Number(originalColumnIndex)) {
37
- indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left);
38
+ indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
38
39
  }
39
40
 
40
41
  if (Number(newColumnIndex) === Number(originalColumnIndex)) {
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.default = void 0;
11
11
 
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
12
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
15
 
14
16
  var React = _interopRequireWildcard(require("react"));
@@ -21,6 +23,8 @@ var _reactDnd = require("react-dnd");
21
23
 
22
24
  var _classnames = _interopRequireDefault(require("classnames"));
23
25
 
26
+ var _settings = require("../../../settings");
27
+
24
28
  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); }
25
29
 
26
30
  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; }
@@ -37,7 +41,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
37
41
  var useEffect = React.useEffect,
38
42
  useRef = React.useRef,
39
43
  useState = React.useState;
40
- var DRAG_TYPE = 'wkc-shared-ui-draggable-element';
44
+ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
45
+ var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
41
46
 
42
47
  var DraggableElement = function DraggableElement(_ref) {
43
48
  var id = _ref.id,
@@ -76,7 +81,6 @@ var DraggableElement = function DraggableElement(_ref) {
76
81
  var dragIndex = item.index;
77
82
  var hoverIndex = index; // Don't replace items with themselves
78
83
 
79
- // Don't replace items with themselves
80
84
  if (dragIndex === hoverIndex || disabled) {
81
85
  return;
82
86
  }
@@ -88,12 +92,6 @@ var DraggableElement = function DraggableElement(_ref) {
88
92
  // to avoid expensive index searches.
89
93
  // eslint-disable-next-line no-param-reassign
90
94
 
91
- // Time to actually perform the action
92
- // Note: we're mutating the monitor item here!
93
- // Generally it's better to avoid mutations,
94
- // but it's good here for the sake of performance
95
- // to avoid expensive index searches.
96
- // eslint-disable-next-line no-param-reassign
97
95
  item.index = hoverIndex;
98
96
  }
99
97
  }),
@@ -141,14 +139,10 @@ var DraggableElement = function DraggableElement(_ref) {
141
139
  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
142
140
  className: (0, _classnames.default)({
143
141
  disabled: disabled
144
- }, 'wkc-draggable-handleStyle')
142
+ }, "".concat(blockClass, "__draggable-handleStyle"))
145
143
  }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
146
144
  return /*#__PURE__*/React.createElement("li", {
147
- className: (0, _classnames.default)({
148
- 'wkc-draggable-handleHolder-isOver': isOver && !disabled
149
- }, {
150
- 'wkc-draggable-handleHolder--grabbed': isGrabbed
151
- }, 'wkc-draggable-handleHolder'),
145
+ className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
152
146
  ref: ref,
153
147
  "aria-selected": isFocused,
154
148
  role: "option",
@@ -176,17 +170,15 @@ var DraggableElement = function DraggableElement(_ref) {
176
170
  setIsFocusedOnItem(e.currentTarget === e.target);
177
171
  }
178
172
  }, /*#__PURE__*/React.createElement("span", {
179
- className: "wkc-shared-ui--assistive-text"
173
+ className: "".concat(blockClass, "__shared-ui--assistive-text")
180
174
  }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
181
175
  ref: preview,
182
- className: "wkc-draggable-handleHolder-droppable"
176
+ className: "${blockClass}__draggable-handleHolder-droppable"
183
177
  }, content) : /*#__PURE__*/React.createElement("div", {
184
178
  ref: drag,
185
179
  "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
186
180
  ,
187
- className: (0, _classnames.default)({
188
- 'wkc-draggable-handleStyle': !disabled
189
- }, 'wkc-draggable-handleHolder-droppable')
181
+ className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
190
182
  }, (!isOver || disabled) && content));
191
183
  };
192
184
 
@@ -100,7 +100,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
100
100
 
101
101
  setName(filename);
102
102
  setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
103
- }, [filename, preformattedExtensions]);
103
+ }, [filename, preformattedExtensions, open]);
104
104
 
105
105
  var onNameChangeHandler = function onNameChangeHandler(evt) {
106
106
  setName(evt.target.value);
@@ -9,13 +9,15 @@ exports.useWindowResize = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
+
12
14
  var _react = require("react");
13
15
 
14
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; }
15
17
 
16
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; }
17
19
 
18
- var windowExists = typeof window !== "undefined";
20
+ var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
19
21
 
20
22
  var getWindowSize = function getWindowSize() {
21
23
  if (!windowExists) {
@@ -1,16 +1,20 @@
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
8
  exports.useNearestScroll = useNearestScroll;
7
9
  exports.useWindowScroll = useWindowScroll;
8
10
 
11
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
12
+
9
13
  var _react = require("react");
10
14
 
11
15
  var _scrollableAncestor = require("../utils/scrollableAncestor");
12
16
 
13
- var windowExists = typeof window !== "undefined";
17
+ var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
14
18
 
15
19
  var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {
16
20
  var scrollPosition = (0, _react.useRef)({});
@@ -1,10 +1,15 @@
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
8
  exports.scrollableAncestor = void 0;
7
- var windowExists = typeof window !== "undefined"; // determine whether the target is scrollable
9
+
10
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
+
12
+ var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined"; // determine whether the target is scrollable
8
13
 
9
14
  var scrollable = function scrollable(target) {
10
15
  var style = window.getComputedStyle(target);
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.18.1",
4
+ "version": "1.19.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "scripts": {
36
36
  "build": "run-s clean build-first build-all",
37
- "build-all": "run-p build:*",
37
+ "build-all": "run-p 'build:*'",
38
38
  "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
39
39
  "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
40
40
  "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
@@ -60,7 +60,7 @@
60
60
  "fs-extra": "^10.1.0",
61
61
  "glob": "^8.0.3",
62
62
  "jest": "^28.1.0",
63
- "jest-config-ibm-cloud-cognitive": "^0.23.19",
63
+ "jest-config-ibm-cloud-cognitive": "^0.24.0",
64
64
  "jest-environment-jsdom": "^28.1.0",
65
65
  "namor": "^1.1.2",
66
66
  "npm-check-updates": "^12.5.11",
@@ -93,5 +93,5 @@
93
93
  "react": "^16.8.6 || ^17.0.1",
94
94
  "react-dom": "^16.8.6 || ^17.0.1"
95
95
  },
96
- "gitHead": "af43f7248a6bf9c65da17758b2345aad9808c317"
96
+ "gitHead": "eb1c96e096118d320eed2f197f85f675a7601b05"
97
97
  }
@@ -221,6 +221,7 @@
221
221
  width: 100%;
222
222
  max-width: 40rem;
223
223
  background: $ui-01;
224
+ box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
224
225
  transform: translate(0, 100%);
225
226
 
226
227
  &-search {
@@ -256,6 +257,11 @@
256
257
  button.#{$block-class}__global-filter-toggle {
257
258
  border-bottom-color: $ui-04;
258
259
  background: $field-01;
260
+
261
+ &--open {
262
+ border-bottom: $ui-01;
263
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
264
+ }
259
265
  }
260
266
 
261
267
  // meta panel
@@ -25,7 +25,8 @@
25
25
  @include text-overflow;
26
26
  }
27
27
 
28
- .#{$security--prefix}--combo-button__overflow-menu {
28
+ .#{$security--prefix}--combo-button
29
+ .#{$security--prefix}--combo-button__overflow-menu {
29
30
  width: carbon--mini-units($count: 6);
30
31
  height: auto;
31
32
  border-left: carbon--rem($px: 1px) solid $ui-03;
@@ -12,6 +12,10 @@
12
12
  // Define all component styles in a mixin which is then exported using
13
13
  // the Carbon import-once mechanism.
14
14
  @mixin set-header-borders {
15
+ border-right: 1px solid $active-ui;
16
+ border-bottom: 1px solid $active-ui;
17
+ }
18
+ @mixin set-active-header-borders {
15
19
  border-right: 1px solid $text-03;
16
20
  border-bottom: 1px solid $text-03;
17
21
  }
@@ -211,9 +215,12 @@
211
215
  z-index: 4;
212
216
  width: $spacing-01;
213
217
  background-color: $interactive-01;
218
+ pointer-events: none;
214
219
  }
215
220
  .#{$block-class}__th--active-header,
216
221
  .#{$block-class}__td-th--active-header.#{$block-class}__td {
222
+ @include set-active-header-borders();
223
+
217
224
  background-color: $hover-selected-ui;
218
225
  }
219
226
  .#{$block-class}__th--selected-header,
@@ -9,16 +9,7 @@
9
9
  @import '../../global/styles/project-settings';
10
10
  @import '../../global/styles/mixins';
11
11
 
12
- @import './styles/datagrid';
13
- @import './styles/useNestedRows';
14
- //@import './styles/useNestedTable';
15
- @import './styles/useSortableColumns';
16
- @import './styles/useColumnRightAlign';
17
- @import './styles/useStickyColumn';
18
- @import './styles/useActionsColumn';
19
- @import './styles/addons/CustomizeColumnsModal';
20
- @import './styles/addons/RowSizeDropdown';
21
- @import './styles/useSelectAllToggle';
12
+ @import './styles/index';
22
13
 
23
14
  // Other Carbon settings.
24
15
  // TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
@@ -0,0 +1,58 @@
1
+ /*
2
+ * Licensed Materials - Property of IBM
3
+ * 5724-Q36
4
+ * (c) Copyright IBM Corp. 2021
5
+ * US Government Users Restricted Rights - Use, duplication or disclosure
6
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
7
+ */
8
+ @import './variables';
9
+
10
+ .#{$block-class}__draggable-handleStyle {
11
+ display: flex;
12
+ align-items: center;
13
+ margin-right: $spacing-03;
14
+ cursor: grab;
15
+ }
16
+
17
+ .#{$block-class}__draggable-handleStyle.disabled {
18
+ pointer-events: none;
19
+ }
20
+
21
+ svg.#{$block-class}__draggable-handleStyle.disable {
22
+ fill: $disabled-02;
23
+ }
24
+
25
+ .#{$block-class}__draggable-handleHolder {
26
+ display: flex;
27
+ height: $spacing-07;
28
+ padding-left: $spacing-02;
29
+ margin-bottom: $spacing-03;
30
+ background: $ui-02;
31
+ &.#{$block-class}__draggable-handleHolder-isOver {
32
+ border: 2px dashed $focus;
33
+ background-color: $highlight;
34
+ }
35
+ }
36
+
37
+ .#{$block-class}__draggable-handleHolder-droppable {
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+
42
+ .#{$block-class}__draggable-handleHolder--grabbed {
43
+ background-color: $highlight;
44
+ color: $text-01;
45
+ }
46
+
47
+ .#{$block-class}__shared-ui--assistive-text {
48
+ // hide the assistive text. can not use display: none which will also hide from ARIA
49
+ position: absolute;
50
+ overflow: hidden;
51
+ width: 0;
52
+ height: 0;
53
+ padding: 0;
54
+ border: 0;
55
+ clip: rect(0 0 0 0);
56
+ text-transform: none;
57
+ white-space: nowrap;
58
+ }
@@ -7,7 +7,7 @@
7
7
  */
8
8
  @import './datagrid';
9
9
  @import './useNestedRows';
10
- //@import './useNestedTable';
10
+ @import './useNestedTable';
11
11
  @import './useSortableColumns';
12
12
  @import './useColumnRightAlign';
13
13
  @import './useStickyColumn';
@@ -15,3 +15,4 @@
15
15
  @import './addons/CustomizeColumnsModal';
16
16
  @import './addons/RowSizeDropdown';
17
17
  @import './useSelectAllToggle';
18
+ @import './draggableElement';