@carbon/ibm-products 2.32.0 → 2.34.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +351 -3
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +351 -3
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +351 -3
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ActionBar/ActionBar.js +8 -1
- package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/es/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
- package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +10 -3
- package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
- package/es/components/DataSpreadsheet/utils/commonEventHandlers.js +304 -0
- package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
- package/es/components/Datagrid/useRowSize.js +4 -2
- package/es/components/DescriptionList/DescriptionList.d.ts +0 -37
- package/es/components/DescriptionList/DescriptionList.js +7 -12
- package/es/components/DescriptionList/DescriptionListBody.d.ts +2 -0
- package/es/components/DescriptionList/DescriptionListBody.js +39 -0
- package/es/components/DescriptionList/DescriptionListCell.d.ts +2 -0
- package/es/components/DescriptionList/DescriptionListCell.js +39 -0
- package/es/components/DescriptionList/DescriptionListRow.d.ts +2 -0
- package/es/components/DescriptionList/DescriptionListRow.js +41 -0
- package/es/components/DescriptionList/index.d.ts +4 -1
- package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/es/components/EditSidePanel/EditSidePanel.js +8 -10
- package/es/components/FilterPanel/FilterPanel.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanel.js +55 -0
- package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +83 -0
- package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +94 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +80 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
- package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
- package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +157 -0
- package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +72 -0
- package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +63 -0
- package/es/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
- package/es/components/FilterPanel/index.d.ts +7 -0
- package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/es/components/OptionsTile/OptionsTile.js +9 -20
- package/es/components/RemoveModal/RemoveModal.d.ts +81 -7
- package/es/components/RemoveModal/RemoveModal.js +1 -0
- package/es/components/ScrollGradient/ScrollGradient.d.ts +5 -0
- package/es/components/ScrollGradient/ScrollGradient.js +156 -0
- package/es/components/ScrollGradient/constants.d.ts +15 -0
- package/es/components/ScrollGradient/constants.js +121 -0
- package/es/components/ScrollGradient/index.d.ts +1 -0
- package/es/components/SidePanel/SidePanel.d.ts +144 -2
- package/es/components/SidePanel/SidePanel.js +88 -112
- package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/es/components/StatusIcon/StatusIcon.js +97 -95
- package/es/components/Tearsheet/TearsheetShell.js +9 -1
- package/es/components/Toolbar/ToolbarGroup.d.ts +17 -2
- package/es/components/Toolbar/ToolbarGroup.js +0 -1
- package/es/components/TruncatedList/TruncatedList.js +5 -3
- package/es/components/UserAvatar/UserAvatar.js +3 -2
- package/es/components/index.d.ts +4 -1
- package/es/global/js/hooks/useFocus.js +9 -2
- package/es/global/js/package-settings.d.ts +12 -0
- package/es/global/js/package-settings.js +12 -0
- package/es/index.js +12 -0
- package/es/settings.d.ts +12 -0
- package/lib/components/ActionBar/ActionBar.js +11 -6
- package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
- package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +9 -2
- package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
- package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js +311 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
- package/lib/components/Datagrid/useRowSize.js +4 -2
- package/lib/components/DescriptionList/DescriptionList.d.ts +0 -37
- package/lib/components/DescriptionList/DescriptionList.js +6 -11
- package/lib/components/DescriptionList/DescriptionListBody.d.ts +2 -0
- package/lib/components/DescriptionList/DescriptionListBody.js +46 -0
- package/lib/components/DescriptionList/DescriptionListCell.d.ts +2 -0
- package/lib/components/DescriptionList/DescriptionListCell.js +46 -0
- package/lib/components/DescriptionList/DescriptionListRow.d.ts +2 -0
- package/lib/components/DescriptionList/DescriptionListRow.js +48 -0
- package/lib/components/DescriptionList/index.d.ts +4 -1
- package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
- package/lib/components/FilterPanel/FilterPanel.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanel.js +62 -0
- package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +90 -0
- package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +101 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +87 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
- package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
- package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +164 -0
- package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +79 -0
- package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +70 -0
- package/lib/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
- package/lib/components/FilterPanel/index.d.ts +7 -0
- package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/lib/components/OptionsTile/OptionsTile.js +9 -20
- package/lib/components/RemoveModal/RemoveModal.d.ts +81 -7
- package/lib/components/RemoveModal/RemoveModal.js +1 -0
- package/lib/components/ScrollGradient/ScrollGradient.d.ts +5 -0
- package/lib/components/ScrollGradient/ScrollGradient.js +163 -0
- package/lib/components/ScrollGradient/constants.d.ts +15 -0
- package/lib/components/ScrollGradient/constants.js +128 -0
- package/lib/components/ScrollGradient/index.d.ts +1 -0
- package/lib/components/SidePanel/SidePanel.d.ts +144 -2
- package/lib/components/SidePanel/SidePanel.js +88 -112
- package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/lib/components/StatusIcon/StatusIcon.js +97 -95
- package/lib/components/Tearsheet/TearsheetShell.js +9 -1
- package/lib/components/Toolbar/ToolbarGroup.d.ts +17 -2
- package/lib/components/Toolbar/ToolbarGroup.js +0 -1
- package/lib/components/TruncatedList/TruncatedList.js +5 -3
- package/lib/components/UserAvatar/UserAvatar.js +3 -2
- package/lib/components/index.d.ts +4 -1
- package/lib/global/js/hooks/useFocus.js +9 -2
- package/lib/global/js/package-settings.d.ts +12 -0
- package/lib/global/js/package-settings.js +12 -0
- package/lib/index.js +60 -0
- package/lib/settings.d.ts +12 -0
- package/package.json +3 -3
- package/scss/components/FilterPanel/_carbon-imports.scss +9 -0
- package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +56 -0
- package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +62 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox.scss +54 -0
- package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
- package/scss/components/FilterPanel/_filter-panel-label.scss +39 -0
- package/scss/components/FilterPanel/_filter-panel.scss +31 -0
- package/scss/components/FilterPanel/_index-with-carbon.scss +15 -0
- package/scss/components/FilterPanel/_index.scss +14 -0
- package/scss/components/ScrollGradient/_carbon-imports.scss +9 -0
- package/scss/components/ScrollGradient/_index-with-carbon.scss +9 -0
- package/scss/components/ScrollGradient/_index.scss +8 -0
- package/scss/components/ScrollGradient/_scroll-gradient.scss +102 -0
- package/scss/components/UserAvatar/_user-avatar.scss +37 -4
- package/scss/components/_index-with-carbon.scss +2 -0
- package/scss/components/_index.scss +2 -0
@@ -13,21 +13,20 @@ import cx from 'classnames';
|
|
13
13
|
import { px } from '@carbon/layout';
|
14
14
|
import { pkg } from '../../settings.js';
|
15
15
|
import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
|
16
|
-
import uuidv4 from '../../global/js/utils/uuidv4.js';
|
17
16
|
import { removeCellSelections } from './utils/removeCellSelections.js';
|
18
17
|
import { createCellSelectionArea } from './utils/createCellSelectionArea.js';
|
19
18
|
import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell.js';
|
20
19
|
import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell.js';
|
21
|
-
import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
|
22
20
|
import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
|
23
|
-
import {
|
21
|
+
import { handleBodyCellClick, handleBodyCellHover, handleRowHeaderClick } from './utils/commonEventHandlers.js';
|
24
22
|
import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
|
25
23
|
import { useSpreadsheetMouseUp } from './hooks/useSpreadsheetMouseUp.js';
|
26
24
|
|
27
25
|
var _div;
|
28
26
|
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
29
27
|
var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
30
|
-
var
|
28
|
+
var activeCellRef = _ref.activeCellRef,
|
29
|
+
columns = _ref.columns,
|
31
30
|
activeCellCoordinates = _ref.activeCellCoordinates,
|
32
31
|
defaultColumn = _ref.defaultColumn,
|
33
32
|
defaultEmptyRowCount = _ref.defaultEmptyRowCount,
|
@@ -196,75 +195,56 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
196
195
|
}
|
197
196
|
}
|
198
197
|
}, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
|
198
|
+
//selectionAreas will be set when ever a selection area is made.
|
199
|
+
useEffect(function () {
|
200
|
+
removeDuplicateSelections();
|
201
|
+
}, [selectionAreas, removeDuplicateSelections]);
|
199
202
|
|
200
|
-
//
|
201
|
-
//
|
202
|
-
var
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
var
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
var
|
212
|
-
|
213
|
-
|
214
|
-
}
|
215
|
-
|
216
|
-
|
203
|
+
//this method will check for any duplicate selection area and remove.
|
204
|
+
//same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
|
205
|
+
var removeDuplicateSelections = useCallback(function () {
|
206
|
+
var uniqueAttrArray = [],
|
207
|
+
removedSelectionAreaMatcherArr = [];
|
208
|
+
ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
|
209
|
+
var _selectorEl$style = selectorEl.style,
|
210
|
+
top = _selectorEl$style.top,
|
211
|
+
left = _selectorEl$style.left,
|
212
|
+
height = _selectorEl$style.height,
|
213
|
+
width = _selectorEl$style.width;
|
214
|
+
var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
|
215
|
+
if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
|
216
|
+
uniqueAttrArray.push(uniqueAttrStr);
|
217
|
+
} else {
|
218
|
+
selectorEl.remove(); // this is identified as duplicate selection and hence removing.
|
219
|
+
removedSelectionAreaMatcherArr.push(selectorEl.getAttribute('data-matcher-id'));
|
220
|
+
}
|
221
|
+
});
|
217
222
|
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
var
|
222
|
-
|
223
|
-
|
224
|
-
setActiveCellCoordinates(activeCoordinates);
|
225
|
-
setCurrentMatcher(tempMatcher);
|
226
|
-
setSelectionAreas(function (prev) {
|
227
|
-
return [].concat(_toConsumableArray(prev), [{
|
228
|
-
point1: activeCoordinates,
|
229
|
-
matcher: tempMatcher
|
230
|
-
}]);
|
223
|
+
//clean the duplicate selectionAreaData and selectionArea
|
224
|
+
if (removedSelectionAreaMatcherArr.length) {
|
225
|
+
setSelectionAreas(function (prev) {
|
226
|
+
var prevValues = deepCloneObject(prev);
|
227
|
+
return prevValues.filter(function (item) {
|
228
|
+
return !removedSelectionAreaMatcherArr.includes(item.matcher);
|
231
229
|
});
|
232
|
-
}
|
233
|
-
|
234
|
-
var
|
235
|
-
|
236
|
-
return item.
|
237
|
-
});
|
238
|
-
if (indexOfItemToUpdate === -1) {
|
239
|
-
// There is always a selectionArea with a point1 object that updates
|
240
|
-
// whenever the activeCellCoordinates update, we should always be able
|
241
|
-
// to find an index, but if we do not for some reason we should return
|
242
|
-
// at this point.
|
243
|
-
return;
|
244
|
-
} else {
|
245
|
-
// Update the selectionArea that was found, do not update currentMatcher
|
246
|
-
selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
|
247
|
-
selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
|
248
|
-
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
249
|
-
selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
|
250
|
-
setSelectionAreas(selectionAreaClone);
|
251
|
-
}
|
252
|
-
} else {
|
253
|
-
setActiveCellInsideSelectionArea(false);
|
254
|
-
setActiveCellCoordinates(activeCoordinates);
|
255
|
-
// remove all previous cell selections
|
256
|
-
removeCellSelections({
|
257
|
-
spreadsheetRef: ref
|
230
|
+
});
|
231
|
+
setSelectionAreaData(function (prev) {
|
232
|
+
var prevValues = deepCloneObject(prev);
|
233
|
+
return prevValues.filter(function (item) {
|
234
|
+
return !removedSelectionAreaMatcherArr.includes(item.selectionId);
|
258
235
|
});
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
236
|
+
});
|
237
|
+
}
|
238
|
+
}, [ref, setSelectionAreas, setSelectionAreaData]);
|
239
|
+
|
240
|
+
// onClick fn for each cell in the data spreadsheet body,
|
241
|
+
// adds the active cell highlight
|
242
|
+
|
243
|
+
var handleBodyCellClickEvent = useCallback(function (cell, columnIndex) {
|
244
|
+
return function (event) {
|
245
|
+
handleBodyCellClick(cell, columnIndex, event, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint);
|
266
246
|
};
|
267
|
-
}, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
|
247
|
+
}, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
|
268
248
|
var handleBodyScroll = function handleBodyScroll() {
|
269
249
|
var headerRowElement = ref.current.querySelector("\n .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
|
270
250
|
headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
|
@@ -278,50 +258,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
278
258
|
contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
|
279
259
|
};
|
280
260
|
});
|
281
|
-
var
|
261
|
+
var handleBodyCellHoverEvent = useCallback(function (cell, columnIndex) {
|
282
262
|
return function () {
|
283
|
-
|
284
|
-
var cellCoordinates = {
|
285
|
-
row: cell.row.index,
|
286
|
-
column: columnIndex
|
287
|
-
};
|
288
|
-
setSelectionAreas(function (prev) {
|
289
|
-
var _selectionAreaClone$i, _selectionAreaClone$i2;
|
290
|
-
var selectionAreaClone = deepCloneObject(prev);
|
291
|
-
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
292
|
-
return item.matcher === currentMatcher;
|
293
|
-
});
|
294
|
-
// No items in the array match up with the currentMatcher value
|
295
|
-
if (indexOfItemToUpdate === -1) {
|
296
|
-
return prev;
|
297
|
-
}
|
298
|
-
// Do not update state if you're still hovering on the same cell
|
299
|
-
if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
|
300
|
-
return prev;
|
301
|
-
}
|
302
|
-
selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
|
303
|
-
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
304
|
-
return selectionAreaClone;
|
305
|
-
});
|
306
|
-
}
|
263
|
+
handleBodyCellHover(cell, columnIndex, clickAndHoldActive, currentMatcher, setSelectionAreas);
|
307
264
|
};
|
308
265
|
}, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
|
309
|
-
var
|
266
|
+
var handleRowHeaderClickEvent = useCallback(function (index) {
|
310
267
|
return function (event) {
|
311
|
-
|
312
|
-
handleHeaderCellSelection({
|
313
|
-
type: 'row',
|
314
|
-
activeCellCoordinates: activeCellCoordinates,
|
315
|
-
rows: rows,
|
316
|
-
columns: columns,
|
317
|
-
setActiveCellCoordinates: setActiveCellCoordinates,
|
318
|
-
setCurrentMatcher: setCurrentMatcher,
|
319
|
-
setSelectionAreas: setSelectionAreas,
|
320
|
-
spreadsheetRef: ref,
|
321
|
-
index: index,
|
322
|
-
setSelectionAreaData: setSelectionAreaData,
|
323
|
-
isHoldingCommandKey: isHoldingCommandKey
|
324
|
-
});
|
268
|
+
handleRowHeaderClick(index, event, columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData);
|
325
269
|
};
|
326
270
|
}, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]);
|
327
271
|
|
@@ -371,7 +315,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
371
315
|
"data-row-index": index,
|
372
316
|
"data-column-index": "header",
|
373
317
|
type: "button",
|
374
|
-
onClick:
|
318
|
+
onClick: handleRowHeaderClickEvent(index),
|
375
319
|
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
|
376
320
|
style: {
|
377
321
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
@@ -393,14 +337,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
393
337
|
"data-row-index": cell.row.index,
|
394
338
|
"data-column-index": index,
|
395
339
|
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
|
396
|
-
onMouseDown:
|
397
|
-
onMouseOver:
|
340
|
+
onMouseDown: handleBodyCellClickEvent(cell, index),
|
341
|
+
onMouseOver: handleBodyCellHoverEvent(cell, index),
|
398
342
|
onFocus: function onFocus() {},
|
399
343
|
type: "button"
|
400
344
|
}, cell.render('Cell')));
|
401
345
|
}));
|
402
346
|
}
|
403
|
-
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas,
|
347
|
+
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
|
404
348
|
var spreadsheetBodyRef = useRef();
|
405
349
|
return /*#__PURE__*/React__default.createElement("div", _extends({
|
406
350
|
ref: spreadsheetBodyRef,
|
@@ -428,6 +372,10 @@ DataSpreadsheetBody.propTypes = {
|
|
428
372
|
row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
429
373
|
column: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
430
374
|
}),
|
375
|
+
/**
|
376
|
+
*This is the ref of the button input, which is the active cell element
|
377
|
+
*/
|
378
|
+
activeCellRef: PropTypes.object,
|
431
379
|
/**
|
432
380
|
* Is the user clicking and holding in the data spreadsheet body
|
433
381
|
*/
|
@@ -1,6 +1,8 @@
|
|
1
|
-
export function useMoveActiveCell({ spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell, }: {
|
1
|
+
export function useMoveActiveCell({ spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell, activeCellContent, isActiveHeaderCellChanged, }: {
|
2
2
|
spreadsheetRef: any;
|
3
3
|
activeCellCoordinates: any;
|
4
4
|
containerHasFocus: any;
|
5
5
|
createActiveCell: any;
|
6
|
+
activeCellContent: any;
|
7
|
+
isActiveHeaderCellChanged: any;
|
6
8
|
}): void;
|
@@ -5,15 +5,22 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import { useEffect } from 'react';
|
8
|
+
import { useEffect, useCallback } from 'react';
|
9
9
|
|
10
10
|
// Moves the placement of the active cell
|
11
11
|
var useMoveActiveCell = function useMoveActiveCell(_ref) {
|
12
12
|
var spreadsheetRef = _ref.spreadsheetRef,
|
13
13
|
activeCellCoordinates = _ref.activeCellCoordinates,
|
14
14
|
containerHasFocus = _ref.containerHasFocus,
|
15
|
-
createActiveCell = _ref.createActiveCell
|
15
|
+
createActiveCell = _ref.createActiveCell,
|
16
|
+
activeCellContent = _ref.activeCellContent,
|
17
|
+
isActiveHeaderCellChanged = _ref.isActiveHeaderCellChanged;
|
18
|
+
//new active cell is created when the activeCellContent changes or navigate through headers
|
19
|
+
// Otherwise new active cell will display the old value in a glance
|
16
20
|
useEffect(function () {
|
21
|
+
performCreateActiveCell();
|
22
|
+
}, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
|
23
|
+
var performCreateActiveCell = useCallback(function () {
|
17
24
|
var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
|
18
25
|
var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
|
19
26
|
var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
|
@@ -24,7 +31,7 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
|
|
24
31
|
addToHeader: shouldPlaceActiveCellInHeader
|
25
32
|
});
|
26
33
|
}
|
27
|
-
}, [activeCellCoordinates,
|
34
|
+
}, [spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell]);
|
28
35
|
};
|
29
36
|
|
30
37
|
export { useMoveActiveCell };
|
@@ -0,0 +1,4 @@
|
|
1
|
+
export function handleBodyCellClick(cell: any, columnIndex: any, event: any, ...rest: any[]): void;
|
2
|
+
export function handleBodyCellHover(cell: any, columnIndex: any, ...rest: any[]): void;
|
3
|
+
export function handleRowHeaderClick(index: any, event: any, ...rest: any[]): void;
|
4
|
+
export function handleKeyPress(event: any, ...rest: any[]): any;
|
@@ -0,0 +1,304 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import { pkg } from '../../../settings.js';
|
10
|
+
import { checkForHoldingKey } from './checkForHoldingKey.js';
|
11
|
+
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
|
12
|
+
import uuidv4 from '../../../global/js/utils/uuidv4.js';
|
13
|
+
import { removeCellSelections } from './removeCellSelections.js';
|
14
|
+
import { handleHeaderCellSelection } from './handleHeaderCellSelection.js';
|
15
|
+
import { includesShift, handleMultipleKeys, includesResourceKey } from './handleMultipleKeys.js';
|
16
|
+
import { handleActiveCellInSelectionEnter } from './handleActiveCellInSelectionEnter.js';
|
17
|
+
import { handleActiveCellInSelectionTab } from './handleActiveCellInSelectionTab.js';
|
18
|
+
import { handleCellDeletion } from './handleCellDeletion.js';
|
19
|
+
|
20
|
+
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
21
|
+
|
22
|
+
// onClick fn for each cell in the data spreadsheet body,
|
23
|
+
// adds the active cell highlight
|
24
|
+
|
25
|
+
var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event) {
|
26
|
+
for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
|
27
|
+
rest[_key - 3] = arguments[_key];
|
28
|
+
}
|
29
|
+
var currentMatcher = rest[0],
|
30
|
+
activeCellCoordinates = rest[1],
|
31
|
+
selectionAreas = rest[2],
|
32
|
+
setActiveCellCoordinates = rest[3],
|
33
|
+
setSelectionAreas = rest[4],
|
34
|
+
setContainerHasFocus = rest[5],
|
35
|
+
setClickAndHoldActive = rest[6],
|
36
|
+
setCurrentMatcher = rest[7],
|
37
|
+
ref = rest[8],
|
38
|
+
setSelectionAreaData = rest[9],
|
39
|
+
setActiveCellInsideSelectionArea = rest[10],
|
40
|
+
activeCellRef = rest[11],
|
41
|
+
setValidStartingPoint = rest[12];
|
42
|
+
event.preventDefault();
|
43
|
+
var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
|
44
|
+
var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
|
45
|
+
setValidStartingPoint(isValidSelectionAreaStart);
|
46
|
+
var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
|
47
|
+
var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
|
48
|
+
setContainerHasFocus(true);
|
49
|
+
var activeCoordinates = {
|
50
|
+
row: cell.row.index,
|
51
|
+
column: columnIndex
|
52
|
+
};
|
53
|
+
var tempMatcher = uuidv4();
|
54
|
+
setClickAndHoldActive(true);
|
55
|
+
|
56
|
+
// prevent multiple selections unless cmd key is held
|
57
|
+
// meaning that selectionAreas should only have one item by default
|
58
|
+
if (isHoldingCommandKey) {
|
59
|
+
var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
60
|
+
activeCellElement.setAttribute('data-selection-id', tempMatcher);
|
61
|
+
setActiveCellInsideSelectionArea(true);
|
62
|
+
setActiveCellCoordinates(activeCoordinates);
|
63
|
+
setCurrentMatcher(tempMatcher);
|
64
|
+
setSelectionAreas(function (prev) {
|
65
|
+
return [].concat(_toConsumableArray(prev), [{
|
66
|
+
point1: activeCoordinates,
|
67
|
+
matcher: tempMatcher
|
68
|
+
}]);
|
69
|
+
});
|
70
|
+
} else if (isHoldingShiftKey) {
|
71
|
+
setContainerHasFocus(true);
|
72
|
+
var selectionAreaClone = deepCloneObject(selectionAreas);
|
73
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
74
|
+
return item.matcher === currentMatcher;
|
75
|
+
});
|
76
|
+
if (indexOfItemToUpdate === -1) {
|
77
|
+
// There is always a selectionArea with a point1 object that updates
|
78
|
+
// whenever the activeCellCoordinates update, we should always be able
|
79
|
+
// to find an index, but if we do not for some reason we should return
|
80
|
+
// at this point.
|
81
|
+
return;
|
82
|
+
} else {
|
83
|
+
// Update the selectionArea that was found, do not update currentMatcher
|
84
|
+
selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
|
85
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
|
86
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
87
|
+
selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
|
88
|
+
setSelectionAreas(selectionAreaClone);
|
89
|
+
}
|
90
|
+
} else {
|
91
|
+
activeCellRef.current.style.display = 'none';
|
92
|
+
setActiveCellInsideSelectionArea(false);
|
93
|
+
setActiveCellCoordinates(activeCoordinates);
|
94
|
+
// remove all previous cell selections
|
95
|
+
removeCellSelections({
|
96
|
+
spreadsheetRef: ref
|
97
|
+
});
|
98
|
+
setSelectionAreas([{
|
99
|
+
point1: activeCoordinates,
|
100
|
+
matcher: tempMatcher
|
101
|
+
}]);
|
102
|
+
setCurrentMatcher(tempMatcher);
|
103
|
+
setSelectionAreaData([]);
|
104
|
+
}
|
105
|
+
};
|
106
|
+
var handleBodyCellHover = function handleBodyCellHover(cell, columnIndex) {
|
107
|
+
for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
|
108
|
+
rest[_key2 - 2] = arguments[_key2];
|
109
|
+
}
|
110
|
+
var clickAndHoldActive = rest[0],
|
111
|
+
currentMatcher = rest[1],
|
112
|
+
setSelectionAreas = rest[2];
|
113
|
+
if (clickAndHoldActive) {
|
114
|
+
var cellCoordinates = {
|
115
|
+
row: cell.row.index,
|
116
|
+
column: columnIndex
|
117
|
+
};
|
118
|
+
setSelectionAreas(function (prev) {
|
119
|
+
var _selectionAreaClone$i, _selectionAreaClone$i2;
|
120
|
+
var selectionAreaClone = deepCloneObject(prev);
|
121
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
122
|
+
return item.matcher === currentMatcher;
|
123
|
+
});
|
124
|
+
// No items in the array match up with the currentMatcher value
|
125
|
+
if (indexOfItemToUpdate === -1) {
|
126
|
+
return prev;
|
127
|
+
}
|
128
|
+
// Do not update state if you're still hovering on the same cell
|
129
|
+
if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
|
130
|
+
return prev;
|
131
|
+
}
|
132
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
|
133
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
134
|
+
return selectionAreaClone;
|
135
|
+
});
|
136
|
+
}
|
137
|
+
};
|
138
|
+
var handleRowHeaderClick = function handleRowHeaderClick(index, event) {
|
139
|
+
for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
|
140
|
+
rest[_key3 - 2] = arguments[_key3];
|
141
|
+
}
|
142
|
+
var columns = rest[0],
|
143
|
+
ref = rest[1],
|
144
|
+
setSelectionAreas = rest[2],
|
145
|
+
setCurrentMatcher = rest[3],
|
146
|
+
setActiveCellCoordinates = rest[4],
|
147
|
+
activeCellCoordinates = rest[5],
|
148
|
+
rows = rest[6],
|
149
|
+
setSelectionAreaData = rest[7];
|
150
|
+
var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
|
151
|
+
handleHeaderCellSelection({
|
152
|
+
type: 'row',
|
153
|
+
activeCellCoordinates: activeCellCoordinates,
|
154
|
+
rows: rows,
|
155
|
+
columns: columns,
|
156
|
+
setActiveCellCoordinates: setActiveCellCoordinates,
|
157
|
+
setCurrentMatcher: setCurrentMatcher,
|
158
|
+
setSelectionAreas: setSelectionAreas,
|
159
|
+
spreadsheetRef: ref,
|
160
|
+
index: index,
|
161
|
+
setSelectionAreaData: setSelectionAreaData,
|
162
|
+
isHoldingCommandKey: isHoldingCommandKey
|
163
|
+
});
|
164
|
+
};
|
165
|
+
var handleKeyPress = function handleKeyPress(event) {
|
166
|
+
for (var _len4 = arguments.length, rest = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
167
|
+
rest[_key4 - 1] = arguments[_key4];
|
168
|
+
}
|
169
|
+
var activeCellInsideSelectionArea = rest[0],
|
170
|
+
updateActiveCellCoordinates = rest[1],
|
171
|
+
activeCellCoordinates = rest[2],
|
172
|
+
removeActiveCell = rest[3],
|
173
|
+
columns = rest[4],
|
174
|
+
rows = rest[5],
|
175
|
+
spreadsheetRef = rest[6],
|
176
|
+
currentMatcher = rest[7],
|
177
|
+
removeCellEditor = rest[8],
|
178
|
+
selectionAreas = rest[9],
|
179
|
+
handleHomeEndKey = rest[10],
|
180
|
+
keysPressedList = rest[11],
|
181
|
+
usingMac = rest[12],
|
182
|
+
updateData = rest[13],
|
183
|
+
checkForReturnCondition = rest[14],
|
184
|
+
handleArrowKeyPress = rest[15],
|
185
|
+
setSelectionAreas = rest[16],
|
186
|
+
setSelectionAreaData = rest[17],
|
187
|
+
setCurrentMatcher = rest[18],
|
188
|
+
activeCellRef = rest[19],
|
189
|
+
setActiveCellCoordinates = rest[20],
|
190
|
+
setContainerHasFocus = rest[21],
|
191
|
+
setActiveCellContent = rest[22];
|
192
|
+
var key = event.key;
|
193
|
+
// Command keys need to be returned as there is default browser behavior with these keys
|
194
|
+
// Needs to be returned in editing mode
|
195
|
+
if (checkForReturnCondition(key)) {
|
196
|
+
return;
|
197
|
+
}
|
198
|
+
|
199
|
+
// Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
|
200
|
+
if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
|
201
|
+
if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !includesShift(keysPressedList)) {
|
202
|
+
setSelectionAreas([]);
|
203
|
+
setSelectionAreaData([]);
|
204
|
+
removeCellSelections({
|
205
|
+
spreadsheetRef: spreadsheetRef
|
206
|
+
});
|
207
|
+
}
|
208
|
+
}
|
209
|
+
if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
|
210
|
+
handleMultipleKeys({
|
211
|
+
activeCellCoordinates: activeCellCoordinates,
|
212
|
+
event: event,
|
213
|
+
keysPressedList: keysPressedList,
|
214
|
+
selectionAreas: selectionAreas,
|
215
|
+
currentMatcher: currentMatcher,
|
216
|
+
rows: rows,
|
217
|
+
setSelectionAreas: setSelectionAreas,
|
218
|
+
columns: columns,
|
219
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates,
|
220
|
+
spreadsheetRef: spreadsheetRef,
|
221
|
+
removeCellSelections: removeCellSelections,
|
222
|
+
blockClass: blockClass,
|
223
|
+
setCurrentMatcher: setCurrentMatcher,
|
224
|
+
usingMac: usingMac
|
225
|
+
});
|
226
|
+
}
|
227
|
+
|
228
|
+
// Allow arrow key navigation if there are less than two activeKeys OR
|
229
|
+
// if one of the activeCellCoordinates is in a header position
|
230
|
+
// Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
|
231
|
+
|
232
|
+
if (keysPressedList.length < 2 && !includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
|
233
|
+
switch (key) {
|
234
|
+
case 'Backspace':
|
235
|
+
case 'Delete':
|
236
|
+
{
|
237
|
+
var deleteParams = {
|
238
|
+
selectionAreas: selectionAreas,
|
239
|
+
currentMatcher: currentMatcher,
|
240
|
+
rows: rows,
|
241
|
+
setActiveCellContent: setActiveCellContent,
|
242
|
+
updateData: updateData,
|
243
|
+
activeCellCoordinates: activeCellCoordinates
|
244
|
+
};
|
245
|
+
handleCellDeletion(deleteParams);
|
246
|
+
break;
|
247
|
+
}
|
248
|
+
// Enter
|
249
|
+
case 'Enter':
|
250
|
+
{
|
251
|
+
handleActiveCellInSelectionEnter({
|
252
|
+
activeCellInsideSelectionArea: activeCellInsideSelectionArea,
|
253
|
+
activeCellCoordinates: activeCellCoordinates,
|
254
|
+
activeCellRef: activeCellRef,
|
255
|
+
selectionAreas: selectionAreas,
|
256
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates
|
257
|
+
});
|
258
|
+
break;
|
259
|
+
}
|
260
|
+
// HOME
|
261
|
+
case 'Home':
|
262
|
+
case 'End':
|
263
|
+
{
|
264
|
+
event.preventDefault();
|
265
|
+
if (includesResourceKey(keysPressedList, usingMac)) {
|
266
|
+
return;
|
267
|
+
}
|
268
|
+
handleHomeEndKey({
|
269
|
+
type: key
|
270
|
+
});
|
271
|
+
break;
|
272
|
+
}
|
273
|
+
// Tab
|
274
|
+
case 'Tab':
|
275
|
+
{
|
276
|
+
if (activeCellInsideSelectionArea) {
|
277
|
+
event.preventDefault();
|
278
|
+
return handleActiveCellInSelectionTab({
|
279
|
+
activeCellInsideSelectionArea: activeCellInsideSelectionArea,
|
280
|
+
activeCellCoordinates: activeCellCoordinates,
|
281
|
+
activeCellRef: activeCellRef,
|
282
|
+
selectionAreas: selectionAreas,
|
283
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates
|
284
|
+
});
|
285
|
+
}
|
286
|
+
setSelectionAreas([]);
|
287
|
+
removeActiveCell();
|
288
|
+
removeCellEditor();
|
289
|
+
setContainerHasFocus(false);
|
290
|
+
setActiveCellCoordinates(null);
|
291
|
+
break;
|
292
|
+
}
|
293
|
+
case 'ArrowLeft':
|
294
|
+
case 'ArrowUp':
|
295
|
+
case 'ArrowRight':
|
296
|
+
case 'ArrowDown':
|
297
|
+
{
|
298
|
+
handleArrowKeyPress(key);
|
299
|
+
}
|
300
|
+
}
|
301
|
+
}
|
302
|
+
};
|
303
|
+
|
304
|
+
export { handleBodyCellClick, handleBodyCellHover, handleKeyPress, handleRowHeaderClick };
|
@@ -98,7 +98,8 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
98
98
|
instance: datagridState,
|
99
99
|
keysPressedList: keysPressedList,
|
100
100
|
state: inlineEditState,
|
101
|
-
usingMac: usingMac
|
101
|
+
usingMac: usingMac,
|
102
|
+
ref: multiKeyTrackingRef
|
102
103
|
});
|
103
104
|
},
|
104
105
|
onFocus: withInlineEdit && function () {
|
@@ -35,7 +35,10 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
|
|
35
35
|
link: emptyStateLink
|
36
36
|
};
|
37
37
|
var validEmptyStates = ['error', 'noData', 'notFound'];
|
38
|
-
return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(
|
38
|
+
return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
|
39
|
+
role: undefined
|
40
|
+
}), {
|
41
|
+
"aria-live": null,
|
39
42
|
className: "".concat(blockClass, "__empty-state-body")
|
40
43
|
}), /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, {
|
41
44
|
colSpan: headers.length,
|
@@ -20,7 +20,9 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
|
|
20
20
|
var getTableBodyProps = datagridState.getTableBodyProps,
|
21
21
|
rows = datagridState.rows,
|
22
22
|
prepareRow = datagridState.prepareRow;
|
23
|
-
return /*#__PURE__*/React__default.createElement("tbody", _extends({}, getTableBodyProps(
|
23
|
+
return /*#__PURE__*/React__default.createElement("tbody", _extends({}, getTableBodyProps({
|
24
|
+
role: undefined
|
25
|
+
}), {
|
24
26
|
className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
|
25
27
|
}), rows.map(function (row) {
|
26
28
|
prepareRow(row);
|
@@ -16,7 +16,10 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
|
|
16
16
|
var getTableBodyProps = datagridState.getTableBodyProps,
|
17
17
|
rows = datagridState.rows,
|
18
18
|
prepareRow = datagridState.prepareRow;
|
19
|
-
return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(
|
19
|
+
return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
|
20
|
+
role: undefined
|
21
|
+
}), {
|
22
|
+
"aria-live": null,
|
20
23
|
className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
|
21
24
|
}), rows.map(function (row) {
|
22
25
|
prepareRow(row);
|