@carbon/ibm-products 2.43.2-canary.73 → 2.43.2-canary.75

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.
@@ -44,6 +44,12 @@ interface DataSpreadsheetProps {
44
44
  * The event handler that is called when the active cell changes
45
45
  */
46
46
  onActiveCellChange?: () => void;
47
+ /**
48
+ * Callback for columns after being dragged
49
+ */
50
+ onColDrag?: ({ ...args }: {
51
+ [x: string]: any;
52
+ }) => void;
47
53
  /**
48
54
  * The setter fn for the data prop
49
55
  */
@@ -32,7 +32,7 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
32
32
  import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
33
33
  import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
34
34
 
35
- var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
35
+ var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
36
36
  // The block part of our conventional BEM class names (blockClass__E--M).
37
37
  var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
38
38
  var componentName = 'DataSpreadsheet';
@@ -43,6 +43,7 @@ var defaults = {
43
43
  data: Object.freeze([]),
44
44
  defaultEmptyRowCount: 16,
45
45
  onDataUpdate: Object.freeze(function () {}),
46
+ onColDrag: Object.freeze(function () {}),
46
47
  onActiveCellChange: Object.freeze(function () {}),
47
48
  onSelectionAreaChange: Object.freeze(function () {}),
48
49
  theme: 'light'
@@ -62,6 +63,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
62
63
  defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
63
64
  _ref$onDataUpdate = _ref.onDataUpdate,
64
65
  onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
66
+ _ref$onColDrag = _ref.onColDrag,
67
+ onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
65
68
  id = _ref.id,
66
69
  _ref$onActiveCellChan = _ref.onActiveCellChange,
67
70
  onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
@@ -82,66 +85,75 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
82
85
  var localRef = useRef();
83
86
  var spreadsheetRef = ref || localRef;
84
87
  var focusedElement = useActiveElement();
85
- var _useState = useState(false),
88
+ var _useState = useState(columns),
86
89
  _useState2 = _slicedToArray(_useState, 2),
87
- containerHasFocus = _useState2[0],
88
- setContainerHasFocus = _useState2[1];
89
- var _useState3 = useState(null),
90
+ currentColumns = _useState2[0],
91
+ setCurrentColumns = _useState2[1];
92
+ var _useState3 = useState([]),
90
93
  _useState4 = _slicedToArray(_useState3, 2),
91
- activeCellCoordinates = _useState4[0],
92
- setActiveCellCoordinates = _useState4[1];
93
- var _useState5 = useState([]),
94
+ pastColumns = _useState4[0],
95
+ setPastColumns = _useState4[1];
96
+ var _useState5 = useState(false),
94
97
  _useState6 = _slicedToArray(_useState5, 2),
95
- selectionAreas = _useState6[0],
96
- setSelectionAreas = _useState6[1];
97
- var _useState7 = useState([]),
98
+ containerHasFocus = _useState6[0],
99
+ setContainerHasFocus = _useState6[1];
100
+ var _useState7 = useState(null),
98
101
  _useState8 = _slicedToArray(_useState7, 2),
99
- selectionAreaData = _useState8[0],
100
- setSelectionAreaData = _useState8[1];
101
- var _useState9 = useState(false),
102
+ activeCellCoordinates = _useState8[0],
103
+ setActiveCellCoordinates = _useState8[1];
104
+ var _useState9 = useState([]),
102
105
  _useState10 = _slicedToArray(_useState9, 2),
103
- clickAndHoldActive = _useState10[0],
104
- setClickAndHoldActive = _useState10[1];
105
- var _useState11 = useState(''),
106
+ selectionAreas = _useState10[0],
107
+ setSelectionAreas = _useState10[1];
108
+ var _useState11 = useState([]),
106
109
  _useState12 = _slicedToArray(_useState11, 2),
107
- currentMatcher = _useState12[0],
108
- setCurrentMatcher = _useState12[1];
110
+ selectionAreaData = _useState12[0],
111
+ setSelectionAreaData = _useState12[1];
109
112
  var _useState13 = useState(false),
110
113
  _useState14 = _slicedToArray(_useState13, 2),
111
- isEditing = _useState14[0],
112
- setIsEditing = _useState14[1];
114
+ clickAndHoldActive = _useState14[0],
115
+ setClickAndHoldActive = _useState14[1];
113
116
  var _useState15 = useState(''),
114
117
  _useState16 = _slicedToArray(_useState15, 2),
115
- cellEditorValue = _useState16[0],
116
- setCellEditorValue = _useState16[1];
118
+ currentMatcher = _useState16[0],
119
+ setCurrentMatcher = _useState16[1];
117
120
  var _useState17 = useState(false),
118
121
  _useState18 = _slicedToArray(_useState17, 2),
119
- headerCellHoldActive = _useState18[0],
120
- setHeaderCellHoldActive = _useState18[1];
121
- var _useState19 = useState(false),
122
+ isEditing = _useState18[0],
123
+ setIsEditing = _useState18[1];
124
+ var _useState19 = useState(''),
122
125
  _useState20 = _slicedToArray(_useState19, 2),
123
- selectedHeaderReorderActive = _useState20[0],
124
- setSelectedHeaderReorderActive = _useState20[1];
125
- var isBlurSpreadsheet = useRef(false);
126
+ cellEditorValue = _useState20[0],
127
+ setCellEditorValue = _useState20[1];
126
128
  var _useState21 = useState(false),
127
129
  _useState22 = _slicedToArray(_useState21, 2),
128
- isActiveHeaderCellChanged = _useState22[0],
129
- setIsActiveHeaderCellChanged = _useState22[1];
130
+ headerCellHoldActive = _useState22[0],
131
+ setHeaderCellHoldActive = _useState22[1];
130
132
  var _useState23 = useState(false),
131
133
  _useState24 = _slicedToArray(_useState23, 2),
132
- activeCellInsideSelectionArea = _useState24[0],
133
- setActiveCellInsideSelectionArea = _useState24[1];
134
+ selectedHeaderReorderActive = _useState24[0],
135
+ setSelectedHeaderReorderActive = _useState24[1];
136
+ var isBlurSpreadsheet = useRef(false);
137
+ var _useState25 = useState(false),
138
+ _useState26 = _slicedToArray(_useState25, 2),
139
+ isActiveHeaderCellChanged = _useState26[0],
140
+ setIsActiveHeaderCellChanged = _useState26[1];
141
+ var _useState27 = useState(false),
142
+ _useState28 = _slicedToArray(_useState27, 2),
143
+ activeCellInsideSelectionArea = _useState28[0],
144
+ setActiveCellInsideSelectionArea = _useState28[1];
134
145
  var previousState = usePreviousValue({
135
146
  activeCellCoordinates: activeCellCoordinates,
136
147
  isEditing: isEditing,
137
- cellEditorValue: cellEditorValue
148
+ cellEditorValue: cellEditorValue,
149
+ selectedHeaderReorderActive: selectedHeaderReorderActive
138
150
  }) || {};
139
151
  var cellSizeValue = getCellSize(cellSize);
140
152
  var cellEditorRef = useRef();
141
- var _useState25 = useState(),
142
- _useState26 = _slicedToArray(_useState25, 2),
143
- activeCellContent = _useState26[0],
144
- setActiveCellContent = _useState26[1];
153
+ var _useState29 = useState(),
154
+ _useState30 = _slicedToArray(_useState29, 2),
155
+ activeCellContent = _useState30[0],
156
+ setActiveCellContent = _useState30[1];
145
157
  var activeCellRef = useRef();
146
158
  var cellEditorRulerRef = useRef();
147
159
  var hasCustomRowHeader = typeof renderRowHeader === 'function';
@@ -188,6 +200,28 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
188
200
  });
189
201
  });
190
202
  }, [cellEditorValue, onDataUpdate]);
203
+ useEffect(function () {
204
+ var currentHeaders = [];
205
+ if (Object.keys(currentColumns).length > 0) {
206
+ Object.keys(currentColumns).forEach(function (itemIndex) {
207
+ if (currentColumns[itemIndex].Header) {
208
+ currentHeaders.push(currentColumns[itemIndex].Header);
209
+ }
210
+ });
211
+ }
212
+ if (previousState.selectedHeaderReorderActive) {
213
+ setPastColumns(currentHeaders);
214
+ }
215
+ if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
216
+ onColDrag({
217
+ headers: currentHeaders,
218
+ data: activeCellContent.props.data
219
+ });
220
+ if (currentHeaders.length === 0) {
221
+ setPastColumns([]);
222
+ }
223
+ }
224
+ }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
191
225
 
192
226
  // Removes the active cell element
193
227
  var removeActiveCell = useCallback(function () {
@@ -650,6 +684,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
650
684
  }), /*#__PURE__*/React__default.createElement(DataSpreadsheetBody, {
651
685
  activeCellRef: activeCellRef,
652
686
  activeCellCoordinates: activeCellCoordinates,
687
+ setCurrentColumns: setCurrentColumns,
653
688
  ref: spreadsheetRef,
654
689
  clickAndHoldActive: clickAndHoldActive,
655
690
  setClickAndHoldActive: setClickAndHoldActive,
@@ -783,6 +818,10 @@ DataSpreadsheet.propTypes = {
783
818
  * The event handler that is called when the active cell changes
784
819
  */
785
820
  onActiveCellChange: PropTypes.func,
821
+ /**
822
+ * Callback for when columns are dropped after dragged
823
+ */
824
+ onColDrag: PropTypes.func,
786
825
  /**
787
826
  * The setter fn for the data prop
788
827
  */
@@ -48,6 +48,10 @@ interface DataSpreadsheetBodyProps {
48
48
  * The spreadsheet id
49
49
  */
50
50
  id?: number | string;
51
+ /**
52
+ * Set current columns after drag drop
53
+ */
54
+ setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
51
55
  /**
52
56
  * The event handler that is called when the active cell changes
53
57
  */
@@ -33,6 +33,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
33
33
  defaultEmptyRowCount = _ref.defaultEmptyRowCount,
34
34
  getTableBodyProps = _ref.getTableBodyProps,
35
35
  headerGroups = _ref.headerGroups,
36
+ setCurrentColumns = _ref.setCurrentColumns,
36
37
  id = _ref.id,
37
38
  onDataUpdate = _ref.onDataUpdate,
38
39
  renderRowHeader = _ref.renderRowHeader,
@@ -309,7 +310,11 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
309
310
  };
310
311
  buildEmptyRows();
311
312
  }
312
- }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
313
+ if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
314
+ var headers = headerGroups[0].headers;
315
+ setCurrentColumns(headers);
316
+ }
317
+ }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
313
318
  var RenderEmptyRows = function RenderEmptyRows() {
314
319
  return _div || (_div = /*#__PURE__*/React__default.createElement("div", null));
315
320
  };
@@ -513,6 +518,10 @@ DataSpreadsheetBody.propTypes = {
513
518
  * Setter fn for containerHasFocus state value
514
519
  */
515
520
  setContainerHasFocus: PropTypes.func,
521
+ /**
522
+ * Set current columns after drag drop
523
+ */
524
+ setCurrentColumns: PropTypes.func,
516
525
  /**
517
526
  * Setter fn for currentMatcher state value
518
527
  */
@@ -15,6 +15,7 @@ export interface PrevState {
15
15
  isEditing?: boolean;
16
16
  selectionAreaData?: any[];
17
17
  clickAndHoldActive?: boolean;
18
+ selectedHeaderReorderActive?: boolean;
18
19
  rowHeight?: number;
19
20
  cellSize?: Size;
20
21
  }
@@ -73,15 +73,39 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
73
73
  onSaveColumnPrefs(updatedColumns);
74
74
  };
75
75
  var onCheckboxCheck = function onCheckboxCheck(col, value) {
76
+ // Update the visibility of columns based on a single column or an array of columns
76
77
  var changedDefinitions = columnObjects.map(function (definition) {
77
- if ((Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) && definition.canFilter && !definition.disabled) {
78
- return _objectSpread2(_objectSpread2({}, definition), {}, {
78
+ // If select all is clicked
79
+ if (Array.isArray(col)) {
80
+ return col.includes(definition) && definition.canFilter && !definition.disabled ? _objectSpread2(_objectSpread2({}, definition), {}, {
79
81
  isVisible: value
80
- });
82
+ }) : definition;
81
83
  }
82
- return definition;
84
+ // If a single checkbox is clicked which is written below as a default return
85
+ return col.id === definition.id ? _objectSpread2(_objectSpread2({}, definition), {}, {
86
+ isVisible: value
87
+ }) : definition;
83
88
  });
84
- setColumnObjects(changedDefinitions);
89
+
90
+ // Count the number of visible columns excluding certain IDs after 1st mutation
91
+ var selectedColumnsCount = changedDefinitions.filter(function (definition) {
92
+ return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
93
+ }).length;
94
+
95
+ // Ensure special columns are visible if any other columns are visible
96
+ var finalDefinitions = changedDefinitions.map(function (definition) {
97
+ // If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
98
+ if (selectedColumnsCount > 0) {
99
+ return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
100
+ isVisible: true
101
+ }) : definition;
102
+ }
103
+ // Else we remove selection column and actions column
104
+ return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
105
+ isVisible: false
106
+ }) : definition;
107
+ });
108
+ setColumnObjects(finalDefinitions);
85
109
  setDirty();
86
110
  };
87
111
  var setDirty = function setDirty() {
@@ -96,14 +120,14 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
96
120
  }, [columnObjects]);
97
121
  var string = searchText.trim().toLowerCase();
98
122
  useEffect(function () {
99
- var notFilterableCount = columnObjects.filter(function (col) {
100
- return !col.canFilter;
101
- }).length;
102
123
  var actionCount = columnObjects.filter(function (col) {
103
124
  return col.id === 'actions';
104
125
  }).length;
105
- setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount - actionCount);
106
- setTotalColumns(columnObjects.length - notFilterableCount - actionCount);
126
+ var datagridSelectionCount = columnObjects.filter(function (col) {
127
+ return col.id === 'datagridSelection';
128
+ }).length;
129
+ setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
130
+ setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
107
131
  }, [getVisibleColumnsCount, columnObjects]);
108
132
  return /*#__PURE__*/React__default.createElement(TearsheetNarrow, {
109
133
  className: "".concat(blockClass, "__customize-columns-tearsheet"),
@@ -44,6 +44,12 @@ interface DataSpreadsheetProps {
44
44
  * The event handler that is called when the active cell changes
45
45
  */
46
46
  onActiveCellChange?: () => void;
47
+ /**
48
+ * Callback for columns after being dragged
49
+ */
50
+ onColDrag?: ({ ...args }: {
51
+ [x: string]: any;
52
+ }) => void;
47
53
  /**
48
54
  * The setter fn for the data prop
49
55
  */
@@ -41,7 +41,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
41
41
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
42
42
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
43
43
 
44
- var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
44
+ var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
45
45
  // The block part of our conventional BEM class names (blockClass__E--M).
46
46
  var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
47
47
  var componentName = 'DataSpreadsheet';
@@ -52,6 +52,7 @@ var defaults = {
52
52
  data: Object.freeze([]),
53
53
  defaultEmptyRowCount: 16,
54
54
  onDataUpdate: Object.freeze(function () {}),
55
+ onColDrag: Object.freeze(function () {}),
55
56
  onActiveCellChange: Object.freeze(function () {}),
56
57
  onSelectionAreaChange: Object.freeze(function () {}),
57
58
  theme: 'light'
@@ -71,6 +72,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
71
72
  defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
72
73
  _ref$onDataUpdate = _ref.onDataUpdate,
73
74
  onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
75
+ _ref$onColDrag = _ref.onColDrag,
76
+ onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
74
77
  id = _ref.id,
75
78
  _ref$onActiveCellChan = _ref.onActiveCellChange,
76
79
  onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
@@ -91,66 +94,75 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
91
94
  var localRef = React.useRef();
92
95
  var spreadsheetRef = ref || localRef;
93
96
  var focusedElement = useActiveElement.useActiveElement();
94
- var _useState = React.useState(false),
97
+ var _useState = React.useState(columns),
95
98
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
96
- containerHasFocus = _useState2[0],
97
- setContainerHasFocus = _useState2[1];
98
- var _useState3 = React.useState(null),
99
+ currentColumns = _useState2[0],
100
+ setCurrentColumns = _useState2[1];
101
+ var _useState3 = React.useState([]),
99
102
  _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
100
- activeCellCoordinates = _useState4[0],
101
- setActiveCellCoordinates = _useState4[1];
102
- var _useState5 = React.useState([]),
103
+ pastColumns = _useState4[0],
104
+ setPastColumns = _useState4[1];
105
+ var _useState5 = React.useState(false),
103
106
  _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
104
- selectionAreas = _useState6[0],
105
- setSelectionAreas = _useState6[1];
106
- var _useState7 = React.useState([]),
107
+ containerHasFocus = _useState6[0],
108
+ setContainerHasFocus = _useState6[1];
109
+ var _useState7 = React.useState(null),
107
110
  _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
108
- selectionAreaData = _useState8[0],
109
- setSelectionAreaData = _useState8[1];
110
- var _useState9 = React.useState(false),
111
+ activeCellCoordinates = _useState8[0],
112
+ setActiveCellCoordinates = _useState8[1];
113
+ var _useState9 = React.useState([]),
111
114
  _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
112
- clickAndHoldActive = _useState10[0],
113
- setClickAndHoldActive = _useState10[1];
114
- var _useState11 = React.useState(''),
115
+ selectionAreas = _useState10[0],
116
+ setSelectionAreas = _useState10[1];
117
+ var _useState11 = React.useState([]),
115
118
  _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
116
- currentMatcher = _useState12[0],
117
- setCurrentMatcher = _useState12[1];
119
+ selectionAreaData = _useState12[0],
120
+ setSelectionAreaData = _useState12[1];
118
121
  var _useState13 = React.useState(false),
119
122
  _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
120
- isEditing = _useState14[0],
121
- setIsEditing = _useState14[1];
123
+ clickAndHoldActive = _useState14[0],
124
+ setClickAndHoldActive = _useState14[1];
122
125
  var _useState15 = React.useState(''),
123
126
  _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
124
- cellEditorValue = _useState16[0],
125
- setCellEditorValue = _useState16[1];
127
+ currentMatcher = _useState16[0],
128
+ setCurrentMatcher = _useState16[1];
126
129
  var _useState17 = React.useState(false),
127
130
  _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
128
- headerCellHoldActive = _useState18[0],
129
- setHeaderCellHoldActive = _useState18[1];
130
- var _useState19 = React.useState(false),
131
+ isEditing = _useState18[0],
132
+ setIsEditing = _useState18[1];
133
+ var _useState19 = React.useState(''),
131
134
  _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
132
- selectedHeaderReorderActive = _useState20[0],
133
- setSelectedHeaderReorderActive = _useState20[1];
134
- var isBlurSpreadsheet = React.useRef(false);
135
+ cellEditorValue = _useState20[0],
136
+ setCellEditorValue = _useState20[1];
135
137
  var _useState21 = React.useState(false),
136
138
  _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
137
- isActiveHeaderCellChanged = _useState22[0],
138
- setIsActiveHeaderCellChanged = _useState22[1];
139
+ headerCellHoldActive = _useState22[0],
140
+ setHeaderCellHoldActive = _useState22[1];
139
141
  var _useState23 = React.useState(false),
140
142
  _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
141
- activeCellInsideSelectionArea = _useState24[0],
142
- setActiveCellInsideSelectionArea = _useState24[1];
143
+ selectedHeaderReorderActive = _useState24[0],
144
+ setSelectedHeaderReorderActive = _useState24[1];
145
+ var isBlurSpreadsheet = React.useRef(false);
146
+ var _useState25 = React.useState(false),
147
+ _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
148
+ isActiveHeaderCellChanged = _useState26[0],
149
+ setIsActiveHeaderCellChanged = _useState26[1];
150
+ var _useState27 = React.useState(false),
151
+ _useState28 = _rollupPluginBabelHelpers.slicedToArray(_useState27, 2),
152
+ activeCellInsideSelectionArea = _useState28[0],
153
+ setActiveCellInsideSelectionArea = _useState28[1];
143
154
  var previousState = usePreviousValue.usePreviousValue({
144
155
  activeCellCoordinates: activeCellCoordinates,
145
156
  isEditing: isEditing,
146
- cellEditorValue: cellEditorValue
157
+ cellEditorValue: cellEditorValue,
158
+ selectedHeaderReorderActive: selectedHeaderReorderActive
147
159
  }) || {};
148
160
  var cellSizeValue = getCellSize.getCellSize(cellSize);
149
161
  var cellEditorRef = React.useRef();
150
- var _useState25 = React.useState(),
151
- _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
152
- activeCellContent = _useState26[0],
153
- setActiveCellContent = _useState26[1];
162
+ var _useState29 = React.useState(),
163
+ _useState30 = _rollupPluginBabelHelpers.slicedToArray(_useState29, 2),
164
+ activeCellContent = _useState30[0],
165
+ setActiveCellContent = _useState30[1];
154
166
  var activeCellRef = React.useRef();
155
167
  var cellEditorRulerRef = React.useRef();
156
168
  var hasCustomRowHeader = typeof renderRowHeader === 'function';
@@ -197,6 +209,28 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
197
209
  });
198
210
  });
199
211
  }, [cellEditorValue, onDataUpdate]);
212
+ React.useEffect(function () {
213
+ var currentHeaders = [];
214
+ if (Object.keys(currentColumns).length > 0) {
215
+ Object.keys(currentColumns).forEach(function (itemIndex) {
216
+ if (currentColumns[itemIndex].Header) {
217
+ currentHeaders.push(currentColumns[itemIndex].Header);
218
+ }
219
+ });
220
+ }
221
+ if (previousState.selectedHeaderReorderActive) {
222
+ setPastColumns(currentHeaders);
223
+ }
224
+ if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
225
+ onColDrag({
226
+ headers: currentHeaders,
227
+ data: activeCellContent.props.data
228
+ });
229
+ if (currentHeaders.length === 0) {
230
+ setPastColumns([]);
231
+ }
232
+ }
233
+ }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
200
234
 
201
235
  // Removes the active cell element
202
236
  var removeActiveCell = React.useCallback(function () {
@@ -659,6 +693,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
659
693
  }), /*#__PURE__*/React__default["default"].createElement(DataSpreadsheetBody.DataSpreadsheetBody, {
660
694
  activeCellRef: activeCellRef,
661
695
  activeCellCoordinates: activeCellCoordinates,
696
+ setCurrentColumns: setCurrentColumns,
662
697
  ref: spreadsheetRef,
663
698
  clickAndHoldActive: clickAndHoldActive,
664
699
  setClickAndHoldActive: setClickAndHoldActive,
@@ -792,6 +827,10 @@ exports.DataSpreadsheet.propTypes = {
792
827
  * The event handler that is called when the active cell changes
793
828
  */
794
829
  onActiveCellChange: index["default"].func,
830
+ /**
831
+ * Callback for when columns are dropped after dragged
832
+ */
833
+ onColDrag: index["default"].func,
795
834
  /**
796
835
  * The setter fn for the data prop
797
836
  */
@@ -48,6 +48,10 @@ interface DataSpreadsheetBodyProps {
48
48
  * The spreadsheet id
49
49
  */
50
50
  id?: number | string;
51
+ /**
52
+ * Set current columns after drag drop
53
+ */
54
+ setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
51
55
  /**
52
56
  * The event handler that is called when the active cell changes
53
57
  */
@@ -42,6 +42,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
42
42
  defaultEmptyRowCount = _ref.defaultEmptyRowCount,
43
43
  getTableBodyProps = _ref.getTableBodyProps,
44
44
  headerGroups = _ref.headerGroups,
45
+ setCurrentColumns = _ref.setCurrentColumns,
45
46
  id = _ref.id,
46
47
  onDataUpdate = _ref.onDataUpdate,
47
48
  renderRowHeader = _ref.renderRowHeader,
@@ -318,7 +319,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
318
319
  };
319
320
  buildEmptyRows();
320
321
  }
321
- }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
322
+ if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
323
+ var headers = headerGroups[0].headers;
324
+ setCurrentColumns(headers);
325
+ }
326
+ }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
322
327
  var RenderEmptyRows = function RenderEmptyRows() {
323
328
  return _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null));
324
329
  };
@@ -522,6 +527,10 @@ DataSpreadsheetBody.propTypes = {
522
527
  * Setter fn for containerHasFocus state value
523
528
  */
524
529
  setContainerHasFocus: index["default"].func,
530
+ /**
531
+ * Set current columns after drag drop
532
+ */
533
+ setCurrentColumns: index["default"].func,
525
534
  /**
526
535
  * Setter fn for currentMatcher state value
527
536
  */
@@ -15,6 +15,7 @@ export interface PrevState {
15
15
  isEditing?: boolean;
16
16
  selectionAreaData?: any[];
17
17
  clickAndHoldActive?: boolean;
18
+ selectedHeaderReorderActive?: boolean;
18
19
  rowHeight?: number;
19
20
  cellSize?: Size;
20
21
  }
@@ -81,15 +81,39 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
81
81
  onSaveColumnPrefs(updatedColumns);
82
82
  };
83
83
  var onCheckboxCheck = function onCheckboxCheck(col, value) {
84
+ // Update the visibility of columns based on a single column or an array of columns
84
85
  var changedDefinitions = columnObjects.map(function (definition) {
85
- if ((Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) && definition.canFilter && !definition.disabled) {
86
- return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
86
+ // If select all is clicked
87
+ if (Array.isArray(col)) {
88
+ return col.includes(definition) && definition.canFilter && !definition.disabled ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
87
89
  isVisible: value
88
- });
90
+ }) : definition;
89
91
  }
90
- return definition;
92
+ // If a single checkbox is clicked which is written below as a default return
93
+ return col.id === definition.id ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
94
+ isVisible: value
95
+ }) : definition;
91
96
  });
92
- setColumnObjects(changedDefinitions);
97
+
98
+ // Count the number of visible columns excluding certain IDs after 1st mutation
99
+ var selectedColumnsCount = changedDefinitions.filter(function (definition) {
100
+ return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
101
+ }).length;
102
+
103
+ // Ensure special columns are visible if any other columns are visible
104
+ var finalDefinitions = changedDefinitions.map(function (definition) {
105
+ // If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
106
+ if (selectedColumnsCount > 0) {
107
+ return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
108
+ isVisible: true
109
+ }) : definition;
110
+ }
111
+ // Else we remove selection column and actions column
112
+ return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
113
+ isVisible: false
114
+ }) : definition;
115
+ });
116
+ setColumnObjects(finalDefinitions);
93
117
  setDirty();
94
118
  };
95
119
  var setDirty = function setDirty() {
@@ -104,14 +128,14 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
104
128
  }, [columnObjects]);
105
129
  var string = searchText.trim().toLowerCase();
106
130
  React.useEffect(function () {
107
- var notFilterableCount = columnObjects.filter(function (col) {
108
- return !col.canFilter;
109
- }).length;
110
131
  var actionCount = columnObjects.filter(function (col) {
111
132
  return col.id === 'actions';
112
133
  }).length;
113
- setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount - actionCount);
114
- setTotalColumns(columnObjects.length - notFilterableCount - actionCount);
134
+ var datagridSelectionCount = columnObjects.filter(function (col) {
135
+ return col.id === 'datagridSelection';
136
+ }).length;
137
+ setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
138
+ setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
115
139
  }, [getVisibleColumnsCount, columnObjects]);
116
140
  return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, {
117
141
  className: "".concat(blockClass, "__customize-columns-tearsheet"),
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": "2.43.2-canary.73+8daba150a",
4
+ "version": "2.43.2-canary.75+566a33062",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "8daba150a8cd5b2288057a32b53a2c8b9789a45f"
123
+ "gitHead": "566a33062126c93ee66c72b3d89454569e46ae9a"
124
124
  }