@carbon/ibm-products 2.29.0 → 2.30.0-alpha.11
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +48 -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-released-only.css +44 -3
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +48 -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 +48 -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/AboutModal/AboutModal.js +3 -25
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +120 -145
- package/es/components/Datagrid/Datagrid/DatagridRow.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -3
- package/es/components/Datagrid/useActionsColumn.js +6 -2
- package/es/components/Toolbar/ToolbarButton.d.ts +24 -3
- package/es/components/Toolbar/ToolbarButton.js +2 -2
- package/lib/components/AboutModal/AboutModal.js +1 -23
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +120 -145
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -3
- package/lib/components/Datagrid/useActionsColumn.js +6 -2
- package/lib/components/Toolbar/ToolbarButton.d.ts +24 -3
- package/lib/components/Toolbar/ToolbarButton.js +2 -2
- package/package.json +4 -3
- package/scss/components/AboutModal/_about-modal.scss +7 -2
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +8 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +54 -0
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +5 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +1 -1
- package/scss/components/TagSet/_tag-set.scss +1 -0
@@ -5,15 +5,14 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties,
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
|
10
|
-
import React__default, {
|
10
|
+
import React__default, { useRef, useEffect } from 'react';
|
11
11
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
12
12
|
import cx from 'classnames';
|
13
13
|
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
14
14
|
import { pkg } from '../../settings.js';
|
15
15
|
import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
|
16
|
-
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
|
17
16
|
import uuidv4 from '../../global/js/utils/uuidv4.js';
|
18
17
|
|
19
18
|
var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "portalTarget", "title", "version"];
|
@@ -45,25 +44,10 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
45
44
|
title = _ref.title,
|
46
45
|
version = _ref.version,
|
47
46
|
rest = _objectWithoutProperties(_ref, _excluded);
|
48
|
-
var _useState = useState(true),
|
49
|
-
_useState2 = _slicedToArray(_useState, 2),
|
50
|
-
hasScrollingContent = _useState2[0],
|
51
|
-
setHasScrollingContent = _useState2[1];
|
52
47
|
var bodyRef = useRef(null);
|
53
48
|
var contentRef = useRef(null);
|
54
49
|
var contentId = uuidv4();
|
55
50
|
var renderPortalUse = usePortalTarget(portalTargetIn);
|
56
|
-
var handleResize = function handleResize() {
|
57
|
-
var _bodyRef$current, _bodyRef$current2, _bodyRef$current3, _bodyRef$current4;
|
58
|
-
if (!((_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.clientHeight)) {
|
59
|
-
return;
|
60
|
-
}
|
61
|
-
setHasScrollingContent(
|
62
|
-
// if our scroll height exceeds the client height enable scrolling
|
63
|
-
((_bodyRef$current2 = bodyRef.current) === null || _bodyRef$current2 === void 0 ? void 0 : _bodyRef$current2.clientHeight) < (hasScrollingContent ?
|
64
|
-
// Carbon modal adds 32px bottom margin when scrolling content is enabled
|
65
|
-
((_bodyRef$current3 = bodyRef.current) === null || _bodyRef$current3 === void 0 ? void 0 : _bodyRef$current3.scrollHeight) - 32 : (_bodyRef$current4 = bodyRef.current) === null || _bodyRef$current4 === void 0 ? void 0 : _bodyRef$current4.scrollHeight));
|
66
|
-
};
|
67
51
|
|
68
52
|
// We can't add a ref directly to the ModalBody, so track it in a ref
|
69
53
|
// as the parent of the current bodyRef element
|
@@ -71,9 +55,6 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
71
55
|
var _contentRef$current;
|
72
56
|
bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
|
73
57
|
}, [bodyRef]);
|
74
|
-
|
75
|
-
// Detect resize of the ModalBody to recalculate whether scrolling is enabled
|
76
|
-
useResizeObserver(bodyRef, handleResize);
|
77
58
|
return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
|
78
59
|
className: cx(blockClass,
|
79
60
|
// Apply the block class to the main HTML element
|
@@ -93,10 +74,7 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
93
74
|
label: title,
|
94
75
|
labelClassName: "".concat(blockClass, "__title")
|
95
76
|
}), /*#__PURE__*/React__default.createElement(ModalBody, {
|
96
|
-
"
|
97
|
-
"aria-labelledby": hasScrollingContent ? contentId : undefined,
|
98
|
-
className: "".concat(blockClass, "__body"),
|
99
|
-
hasScrollingContent: hasScrollingContent
|
77
|
+
className: "".concat(blockClass, "__body")
|
100
78
|
}, /*#__PURE__*/React__default.createElement("div", {
|
101
79
|
className: "".concat(blockClass, "__body-content"),
|
102
80
|
ref: contentRef,
|
@@ -292,29 +292,121 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
292
292
|
updateActiveCellCoordinates({
|
293
293
|
coords: coordinatesClone,
|
294
294
|
updatedValue: {
|
295
|
-
column: type === '
|
295
|
+
column: type === 'Home' ? 0 : columns.length - 1
|
296
296
|
}
|
297
297
|
});
|
298
298
|
removeCellSelections({
|
299
299
|
spreadsheetRef: spreadsheetRef
|
300
300
|
});
|
301
301
|
}, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
|
302
|
+
var checkforReturnConditon = useCallback(function (key) {
|
303
|
+
return isEditing || key === 'Meta' || key === 'Control';
|
304
|
+
}, [isEditing]);
|
305
|
+
var handleArrowkeyPress = useCallback(function (arrowKey) {
|
306
|
+
event.preventDefault();
|
307
|
+
handleInitialArrowPress();
|
308
|
+
var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
|
309
|
+
var updatedValue;
|
310
|
+
switch (arrowKey) {
|
311
|
+
// Left
|
312
|
+
case 'ArrowLeft':
|
313
|
+
{
|
314
|
+
if (coordinatesClone.column === 'header') {
|
315
|
+
return;
|
316
|
+
}
|
317
|
+
if (typeof coordinatesClone.column === 'number') {
|
318
|
+
if (coordinatesClone.column === 0) {
|
319
|
+
updatedValue = {
|
320
|
+
column: 'header'
|
321
|
+
};
|
322
|
+
} else {
|
323
|
+
updatedValue = {
|
324
|
+
column: coordinatesClone.column - 1
|
325
|
+
};
|
326
|
+
}
|
327
|
+
}
|
328
|
+
break;
|
329
|
+
}
|
330
|
+
// Up
|
331
|
+
case 'ArrowUp':
|
332
|
+
{
|
333
|
+
if (coordinatesClone.row === 'header') {
|
334
|
+
return;
|
335
|
+
}
|
336
|
+
if (typeof coordinatesClone.row === 'number') {
|
337
|
+
// set row back to header if we are at index 0
|
338
|
+
if (coordinatesClone.row === 0) {
|
339
|
+
updatedValue = {
|
340
|
+
row: 'header'
|
341
|
+
};
|
342
|
+
} else {
|
343
|
+
// if we are at any other index than 0, subtract 1 from current row index
|
344
|
+
updatedValue = {
|
345
|
+
row: coordinatesClone.row - 1
|
346
|
+
};
|
347
|
+
}
|
348
|
+
}
|
349
|
+
break;
|
350
|
+
}
|
351
|
+
// Right
|
352
|
+
case 'ArrowRight':
|
353
|
+
{
|
354
|
+
if (coordinatesClone.column === 'header') {
|
355
|
+
updatedValue = {
|
356
|
+
column: 0
|
357
|
+
};
|
358
|
+
}
|
359
|
+
if (typeof coordinatesClone.column === 'number') {
|
360
|
+
// Prevent active cell coordinates from updating if the active
|
361
|
+
// cell is in the last column, ie we can't go any further to the right
|
362
|
+
if (columns.length - 1 === coordinatesClone.column) {
|
363
|
+
return;
|
364
|
+
} else {
|
365
|
+
updatedValue = {
|
366
|
+
column: coordinatesClone.column + 1
|
367
|
+
};
|
368
|
+
}
|
369
|
+
}
|
370
|
+
break;
|
371
|
+
}
|
372
|
+
// Down
|
373
|
+
case 'ArrowDown':
|
374
|
+
{
|
375
|
+
if (coordinatesClone.row === 'header') {
|
376
|
+
updatedValue = {
|
377
|
+
row: 0
|
378
|
+
};
|
379
|
+
}
|
380
|
+
if (typeof coordinatesClone.row === 'number') {
|
381
|
+
// Prevent active cell coordinates from updating if the active
|
382
|
+
// cell is in the last row, ie we can't go any further down since
|
383
|
+
// we are in the last row
|
384
|
+
if (rows.length - 1 === coordinatesClone.row) {
|
385
|
+
return;
|
386
|
+
} else {
|
387
|
+
updatedValue = {
|
388
|
+
row: coordinatesClone.row + 1
|
389
|
+
};
|
390
|
+
}
|
391
|
+
}
|
392
|
+
break;
|
393
|
+
}
|
394
|
+
}
|
395
|
+
if (updatedValue) {
|
396
|
+
updateActiveCellCoordinates({
|
397
|
+
coords: coordinatesClone,
|
398
|
+
updatedValue: updatedValue
|
399
|
+
});
|
400
|
+
}
|
401
|
+
}, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
|
302
402
|
var handleKeyPress = useCallback(function (event) {
|
303
403
|
var key = event.key;
|
304
|
-
if (isEditing) {
|
305
|
-
return;
|
306
|
-
}
|
307
404
|
// Command keys need to be returned as there is default browser behavior with these keys
|
308
|
-
|
309
|
-
|
310
|
-
}
|
311
|
-
// Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
|
312
|
-
if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1 && !isEditing) {
|
313
|
-
event.preventDefault();
|
314
|
-
}
|
315
|
-
if (['Tab'].indexOf(key) > -1 && isEditing) {
|
405
|
+
// Needs to be returned in editing mode
|
406
|
+
if (checkforReturnConditon(key)) {
|
316
407
|
return;
|
317
408
|
}
|
409
|
+
|
318
410
|
// Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
|
319
411
|
if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
|
320
412
|
if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !includesShift(keysPressedList)) {
|
@@ -325,7 +417,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
325
417
|
});
|
326
418
|
}
|
327
419
|
}
|
328
|
-
if (
|
420
|
+
if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
|
329
421
|
handleMultipleKeys({
|
330
422
|
activeCellCoordinates: activeCellCoordinates,
|
331
423
|
event: event,
|
@@ -343,27 +435,24 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
343
435
|
usingMac: usingMac
|
344
436
|
});
|
345
437
|
}
|
346
|
-
|
347
|
-
selectionAreas: selectionAreas,
|
348
|
-
currentMatcher: currentMatcher,
|
349
|
-
rows: rows,
|
350
|
-
setActiveCellContent: setActiveCellContent,
|
351
|
-
updateData: updateData,
|
352
|
-
activeCellCoordinates: activeCellCoordinates
|
353
|
-
};
|
438
|
+
|
354
439
|
// Allow arrow key navigation if there are less than two activeKeys OR
|
355
440
|
// if one of the activeCellCoordinates is in a header position
|
441
|
+
// Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
|
442
|
+
|
356
443
|
if (keysPressedList.length < 2 && !includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
|
357
444
|
switch (key) {
|
358
|
-
// Backspace
|
359
445
|
case 'Backspace':
|
360
|
-
{
|
361
|
-
handleCellDeletion(deleteParams);
|
362
|
-
break;
|
363
|
-
}
|
364
|
-
// Delete
|
365
446
|
case 'Delete':
|
366
447
|
{
|
448
|
+
var deleteParams = {
|
449
|
+
selectionAreas: selectionAreas,
|
450
|
+
currentMatcher: currentMatcher,
|
451
|
+
rows: rows,
|
452
|
+
setActiveCellContent: setActiveCellContent,
|
453
|
+
updateData: updateData,
|
454
|
+
activeCellCoordinates: activeCellCoordinates
|
455
|
+
};
|
367
456
|
handleCellDeletion(deleteParams);
|
368
457
|
break;
|
369
458
|
}
|
@@ -381,22 +470,14 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
381
470
|
}
|
382
471
|
// HOME
|
383
472
|
case 'Home':
|
384
|
-
{
|
385
|
-
if (includesResourceKey(keysPressedList, usingMac)) {
|
386
|
-
return;
|
387
|
-
}
|
388
|
-
handleHomeEndKey({
|
389
|
-
type: 'home'
|
390
|
-
});
|
391
|
-
break;
|
392
|
-
}
|
393
473
|
case 'End':
|
394
474
|
{
|
475
|
+
event.preventDefault();
|
395
476
|
if (includesResourceKey(keysPressedList, usingMac)) {
|
396
477
|
return;
|
397
478
|
}
|
398
479
|
handleHomeEndKey({
|
399
|
-
type:
|
480
|
+
type: key
|
400
481
|
});
|
401
482
|
break;
|
402
483
|
}
|
@@ -420,122 +501,16 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
420
501
|
setActiveCellCoordinates(null);
|
421
502
|
break;
|
422
503
|
}
|
423
|
-
// Left
|
424
504
|
case 'ArrowLeft':
|
425
|
-
{
|
426
|
-
handleInitialArrowPress();
|
427
|
-
var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
|
428
|
-
if (coordinatesClone.column === 'header') {
|
429
|
-
return;
|
430
|
-
}
|
431
|
-
if (typeof coordinatesClone.column === 'number') {
|
432
|
-
if (coordinatesClone.column === 0) {
|
433
|
-
updateActiveCellCoordinates({
|
434
|
-
coords: coordinatesClone,
|
435
|
-
updatedValue: {
|
436
|
-
column: 'header'
|
437
|
-
}
|
438
|
-
});
|
439
|
-
return;
|
440
|
-
}
|
441
|
-
updateActiveCellCoordinates({
|
442
|
-
coords: coordinatesClone,
|
443
|
-
updatedValue: {
|
444
|
-
column: coordinatesClone.column - 1
|
445
|
-
}
|
446
|
-
});
|
447
|
-
}
|
448
|
-
break;
|
449
|
-
}
|
450
|
-
// Up
|
451
505
|
case 'ArrowUp':
|
452
|
-
{
|
453
|
-
handleInitialArrowPress();
|
454
|
-
var _coordinatesClone = _objectSpread2({}, activeCellCoordinates);
|
455
|
-
if (_coordinatesClone.row === 'header') {
|
456
|
-
return;
|
457
|
-
}
|
458
|
-
if (typeof _coordinatesClone.row === 'number') {
|
459
|
-
// set row back to header if we are at index 0
|
460
|
-
if (_coordinatesClone.row === 0) {
|
461
|
-
updateActiveCellCoordinates({
|
462
|
-
coords: _coordinatesClone,
|
463
|
-
updatedValue: {
|
464
|
-
row: 'header'
|
465
|
-
}
|
466
|
-
});
|
467
|
-
return;
|
468
|
-
}
|
469
|
-
// if we are at any other index than 0, subtract 1 from current row index
|
470
|
-
updateActiveCellCoordinates({
|
471
|
-
coords: _coordinatesClone,
|
472
|
-
updatedValue: {
|
473
|
-
row: _coordinatesClone.row - 1
|
474
|
-
}
|
475
|
-
});
|
476
|
-
}
|
477
|
-
break;
|
478
|
-
}
|
479
|
-
// Right
|
480
506
|
case 'ArrowRight':
|
481
|
-
{
|
482
|
-
handleInitialArrowPress();
|
483
|
-
var _coordinatesClone2 = _objectSpread2({}, activeCellCoordinates);
|
484
|
-
if (_coordinatesClone2.column === 'header') {
|
485
|
-
updateActiveCellCoordinates({
|
486
|
-
coords: _coordinatesClone2,
|
487
|
-
updatedValue: {
|
488
|
-
column: 0
|
489
|
-
}
|
490
|
-
});
|
491
|
-
}
|
492
|
-
if (typeof _coordinatesClone2.column === 'number') {
|
493
|
-
// Prevent active cell coordinates from updating if the active
|
494
|
-
// cell is in the last column, ie we can't go any further to the right
|
495
|
-
if (columns.length - 1 === _coordinatesClone2.column) {
|
496
|
-
return;
|
497
|
-
}
|
498
|
-
updateActiveCellCoordinates({
|
499
|
-
coords: _coordinatesClone2,
|
500
|
-
updatedValue: {
|
501
|
-
column: _coordinatesClone2.column + 1
|
502
|
-
}
|
503
|
-
});
|
504
|
-
}
|
505
|
-
break;
|
506
|
-
}
|
507
|
-
// Down
|
508
507
|
case 'ArrowDown':
|
509
508
|
{
|
510
|
-
|
511
|
-
var _coordinatesClone3 = _objectSpread2({}, activeCellCoordinates);
|
512
|
-
if (_coordinatesClone3.row === 'header') {
|
513
|
-
updateActiveCellCoordinates({
|
514
|
-
coords: _coordinatesClone3,
|
515
|
-
updatedValue: {
|
516
|
-
row: 0
|
517
|
-
}
|
518
|
-
});
|
519
|
-
}
|
520
|
-
if (typeof _coordinatesClone3.row === 'number') {
|
521
|
-
// Prevent active cell coordinates from updating if the active
|
522
|
-
// cell is in the last row, ie we can't go any further down since
|
523
|
-
// we are in the last row
|
524
|
-
if (rows.length - 1 === _coordinatesClone3.row) {
|
525
|
-
return;
|
526
|
-
}
|
527
|
-
updateActiveCellCoordinates({
|
528
|
-
coords: _coordinatesClone3,
|
529
|
-
updatedValue: {
|
530
|
-
row: _coordinatesClone3.row + 1
|
531
|
-
}
|
532
|
-
});
|
533
|
-
}
|
534
|
-
break;
|
509
|
+
handleArrowkeyPress(key);
|
535
510
|
}
|
536
511
|
}
|
537
512
|
}
|
538
|
-
}, [activeCellInsideSelectionArea, updateActiveCellCoordinates,
|
513
|
+
}, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkforReturnConditon, handleArrowkeyPress]);
|
539
514
|
var startEditMode = function startEditMode() {
|
540
515
|
setIsEditing(true);
|
541
516
|
setClickAndHoldActive(false);
|
@@ -153,7 +153,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
153
153
|
return h.id === cell.column.id;
|
154
154
|
});
|
155
155
|
return /*#__PURE__*/React__default.createElement(TableCell, _extends({
|
156
|
-
className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
|
156
|
+
className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
|
157
157
|
}, restProps, {
|
158
158
|
key: cell.column.id,
|
159
159
|
title: title
|
@@ -12,9 +12,10 @@ import { Checkbox } from '@carbon/react';
|
|
12
12
|
import { isColumnVisible } from './common.js';
|
13
13
|
import DraggableElement from '../../DraggableElement.js';
|
14
14
|
import { pkg } from '../../../../../settings.js';
|
15
|
+
import { getNodeTextContent } from '../../../../../global/js/utils/getNodeTextContent.js';
|
15
16
|
import { useSensor, PointerSensor, KeyboardSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
|
16
17
|
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
17
|
-
import {
|
18
|
+
import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
18
19
|
|
19
20
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
20
21
|
var matchedColsById = function matchedColsById(col1, col2) {
|
@@ -144,7 +145,8 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
144
145
|
onDragEnd: handleDragEnd,
|
145
146
|
onDragStart: handleDragStart,
|
146
147
|
onDragMove: handleDragUpdate,
|
147
|
-
sensors: sensors
|
148
|
+
sensors: sensors,
|
149
|
+
modifiers: [restrictToParentElement, restrictToVerticalAxis]
|
148
150
|
}, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
149
151
|
className: "".concat(blockClass, "__draggable-underlay"),
|
150
152
|
"aria-hidden": "true",
|
@@ -403,9 +403,12 @@ var useFilters = function useFilters(_ref) {
|
|
403
403
|
});
|
404
404
|
return updatedFilters[0];
|
405
405
|
};
|
406
|
-
|
407
|
-
|
408
|
-
|
406
|
+
if (savedFilters && savedFilters.length) {
|
407
|
+
var _cleanFilters;
|
408
|
+
setFiltersObjectArray(savedFilters);
|
409
|
+
var filterStateCopy = (_cleanFilters = cleanFilters(filtersState)) !== null && _cleanFilters !== void 0 ? _cleanFilters : [];
|
410
|
+
setFiltersState(filterStateCopy);
|
411
|
+
}
|
409
412
|
}
|
410
413
|
if (!isFetching) {
|
411
414
|
setFetchingReset(false);
|
@@ -12,7 +12,7 @@ import { IconSkeleton, IconButton, OverflowMenu, OverflowMenuItem } from '@carbo
|
|
12
12
|
import { pkg } from '../../settings.js';
|
13
13
|
import { prepareProps } from '../../global/js/utils/props-helper.js';
|
14
14
|
|
15
|
-
var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
|
15
|
+
var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"],
|
16
16
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
17
17
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
18
18
|
var useActionsColumn = function useActionsColumn(hooks) {
|
@@ -54,8 +54,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
54
54
|
_onClick = preparedActionProps.onClick,
|
55
55
|
icon = preparedActionProps.icon,
|
56
56
|
shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
|
57
|
+
shouldDisableMenuItem = preparedActionProps.shouldDisableMenuItem,
|
58
|
+
disabled = preparedActionProps.disabled,
|
57
59
|
rest = _objectWithoutProperties(preparedActionProps, _excluded);
|
58
60
|
var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
|
61
|
+
var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
|
59
62
|
if (hidden) {
|
60
63
|
return null;
|
61
64
|
}
|
@@ -77,7 +80,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
77
80
|
}
|
78
81
|
e.stopPropagation();
|
79
82
|
_onClick(id, row, e);
|
80
|
-
}
|
83
|
+
},
|
84
|
+
disabled: isDisabledByRow
|
81
85
|
}), /*#__PURE__*/React__default.createElement(Icon, null)));
|
82
86
|
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(OverflowMenu, {
|
83
87
|
align: "left",
|
@@ -1,4 +1,25 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 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
|
+
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
8
|
+
import { IconButton } from '@carbon/react';
|
4
9
|
import React from 'react';
|
10
|
+
export declare const blockClass: string;
|
11
|
+
interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
|
12
|
+
/** Determines whether the caret is rendered */
|
13
|
+
caret?: boolean;
|
14
|
+
/** Provide an optional class to be applied to the containing node */
|
15
|
+
className?: string;
|
16
|
+
/** Specifies the label for the icon button */
|
17
|
+
iconDescription: string;
|
18
|
+
/** Specifies the icon to be used by the ToolbarButton component */
|
19
|
+
renderIcon: React.ElementType;
|
20
|
+
}
|
21
|
+
/** Toolbar buttons are common functions performed as part of a products interface or an open window. */
|
22
|
+
export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
|
23
|
+
children?: React.ReactNode;
|
24
|
+
} & React.RefAttributes<unknown>>;
|
25
|
+
export {};
|
@@ -15,11 +15,11 @@ import { ToolbarContext, blockClass as blockClass$1 } from './Toolbar.js';
|
|
15
15
|
|
16
16
|
var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
|
17
17
|
var blockClass = "".concat(blockClass$1, "__button");
|
18
|
-
|
19
18
|
/** Toolbar buttons are common functions performed as part of a products interface or an open window. */
|
20
19
|
var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
21
20
|
var _useContext;
|
22
|
-
var caret = _ref.caret,
|
21
|
+
var _ref$caret = _ref.caret,
|
22
|
+
caret = _ref$caret === void 0 ? false : _ref$caret,
|
23
23
|
children = _ref.children,
|
24
24
|
className = _ref.className,
|
25
25
|
renderIcon = _ref.renderIcon,
|
@@ -17,7 +17,6 @@ var cx = require('classnames');
|
|
17
17
|
var devtools = require('../../global/js/utils/devtools.js');
|
18
18
|
var settings = require('../../settings.js');
|
19
19
|
var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
|
20
|
-
var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
|
21
20
|
var uuidv4 = require('../../global/js/utils/uuidv4.js');
|
22
21
|
|
23
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
@@ -54,25 +53,10 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
54
53
|
title = _ref.title,
|
55
54
|
version = _ref.version,
|
56
55
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
57
|
-
var _useState = React.useState(true),
|
58
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
59
|
-
hasScrollingContent = _useState2[0],
|
60
|
-
setHasScrollingContent = _useState2[1];
|
61
56
|
var bodyRef = React.useRef(null);
|
62
57
|
var contentRef = React.useRef(null);
|
63
58
|
var contentId = uuidv4["default"]();
|
64
59
|
var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
|
65
|
-
var handleResize = function handleResize() {
|
66
|
-
var _bodyRef$current, _bodyRef$current2, _bodyRef$current3, _bodyRef$current4;
|
67
|
-
if (!((_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.clientHeight)) {
|
68
|
-
return;
|
69
|
-
}
|
70
|
-
setHasScrollingContent(
|
71
|
-
// if our scroll height exceeds the client height enable scrolling
|
72
|
-
((_bodyRef$current2 = bodyRef.current) === null || _bodyRef$current2 === void 0 ? void 0 : _bodyRef$current2.clientHeight) < (hasScrollingContent ?
|
73
|
-
// Carbon modal adds 32px bottom margin when scrolling content is enabled
|
74
|
-
((_bodyRef$current3 = bodyRef.current) === null || _bodyRef$current3 === void 0 ? void 0 : _bodyRef$current3.scrollHeight) - 32 : (_bodyRef$current4 = bodyRef.current) === null || _bodyRef$current4 === void 0 ? void 0 : _bodyRef$current4.scrollHeight));
|
75
|
-
};
|
76
60
|
|
77
61
|
// We can't add a ref directly to the ModalBody, so track it in a ref
|
78
62
|
// as the parent of the current bodyRef element
|
@@ -80,9 +64,6 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
80
64
|
var _contentRef$current;
|
81
65
|
bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
|
82
66
|
}, [bodyRef]);
|
83
|
-
|
84
|
-
// Detect resize of the ModalBody to recalculate whether scrolling is enabled
|
85
|
-
useResizeObserver.useResizeObserver(bodyRef, handleResize);
|
86
67
|
return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
87
68
|
className: cx__default["default"](blockClass,
|
88
69
|
// Apply the block class to the main HTML element
|
@@ -102,10 +83,7 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
102
83
|
label: title,
|
103
84
|
labelClassName: "".concat(blockClass, "__title")
|
104
85
|
}), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
|
105
|
-
"
|
106
|
-
"aria-labelledby": hasScrollingContent ? contentId : undefined,
|
107
|
-
className: "".concat(blockClass, "__body"),
|
108
|
-
hasScrollingContent: hasScrollingContent
|
86
|
+
className: "".concat(blockClass, "__body")
|
109
87
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
110
88
|
className: "".concat(blockClass, "__body-content"),
|
111
89
|
ref: contentRef,
|