@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.
- package/css/components/Datagrid/styles/draggableElement.css +57 -0
- package/css/components/Datagrid/styles/draggableElement.css.map +1 -0
- package/css/components/Datagrid/styles/index.css +80 -0
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/index-full-carbon.css +98 -3
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +98 -3
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +98 -3
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +1 -0
- package/es/components/AddSelect/AddSelectFilter.js +9 -3
- package/es/components/AddSelect/AddSelectSidebar.js +3 -2
- package/es/components/ComboButton/ComboButton.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -6
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +65 -34
- package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/es/components/DataSpreadsheet/utils/getCellSize.js +10 -10
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +113 -19
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
- package/es/components/Datagrid/Datagrid/DraggableElement.js +9 -19
- package/es/components/ExportModal/ExportModal.js +1 -1
- package/es/global/js/hooks/useWindowResize.js +2 -1
- package/es/global/js/hooks/useWindowScroll.js +2 -1
- package/es/global/js/utils/scrollableAncestor.js +2 -1
- package/lib/components/ActionSet/ActionSet.js +1 -0
- package/lib/components/AddSelect/AddSelectFilter.js +10 -3
- package/lib/components/AddSelect/AddSelectSidebar.js +3 -2
- package/lib/components/ComboButton/ComboButton.js +2 -4
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -7
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +66 -34
- package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/lib/components/DataSpreadsheet/utils/getCellSize.js +4 -4
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +112 -19
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +11 -19
- package/lib/components/ExportModal/ExportModal.js +1 -1
- package/lib/global/js/hooks/useWindowResize.js +3 -1
- package/lib/global/js/hooks/useWindowScroll.js +5 -1
- package/lib/global/js/utils/scrollableAncestor.js +6 -1
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +6 -0
- package/scss/components/ComboButton/_combo-button.scss +2 -1
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +7 -0
- package/scss/components/Datagrid/_datagrid.scss +1 -10
- package/scss/components/Datagrid/styles/draggableElement.scss +58 -0
- 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$
|
19
|
+
var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
|
20
20
|
|
21
|
-
|
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 '
|
22
|
+
case 'xs':
|
23
23
|
return getSizeInPixels(_layout.sizeXSmall);
|
24
24
|
|
25
|
-
case '
|
25
|
+
case 'sm':
|
26
26
|
return getSizeInPixels(_layout.sizeSmall);
|
27
27
|
|
28
|
-
case '
|
28
|
+
case 'md':
|
29
29
|
return getSizeInPixels(_layout.sizeMedium);
|
30
30
|
|
31
|
-
case '
|
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
|
27
|
-
var
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
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
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
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
|
-
|
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
|
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
|
-
},
|
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: "
|
173
|
+
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
180
174
|
}, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
|
181
175
|
ref: preview,
|
182
|
-
className: "
|
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
|
-
|
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.
|
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.
|
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": "
|
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-
|
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/
|
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
|
-
|
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';
|