@carbon/ibm-products 2.45.0 → 2.46.0

package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -14,22 +14,24 @@ var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var util = require('./util.js');
 
 var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
+  var _activeElement$closes;
   var activeElement = document.activeElement;
+  if (!((_activeElement$closes = activeElement.closest(".".concat(DataConfigs.blockClass, "__popover"))) !== null && _activeElement$closes !== void 0 && _activeElement$closes.querySelector('[role="dialog"]'))) {
+    handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
+  }
+};
+var handleKeyDownForPopover = function handleKeyDownForPopover(evt, conditionBuilderRef, popoverRef) {
   if (excludeKeyPress(evt)) {
     return;
   }
-  if (activeElement.closest("[role=\"dialog\"]")) {
-    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
-  } else {
-    handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
-  }
+  handleKeyPressForPopover(evt, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, conditionBuilderRef);
 };
+
 //skipping keyboard handling for date and time fields to get take carbon's
 var excludeKeyPress = function excludeKeyPress(evt) {
-  var _evt$target$closest, _evt$target$closest2;
-  return !['Escape'].includes(evt.key) && (((_evt$target$closest = evt.target.closest(".".concat(DataConfigs.blockClass, "__item-date"))) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.length) || ((_evt$target$closest2 = evt.target.closest(".".concat(DataConfigs.blockClass, "__item-time"))) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.length));
+  return !['Escape'].includes(evt.key) && (evt.target.closest(".".concat(DataConfigs.blockClass, "__item-date")) || evt.target.closest(".".concat(DataConfigs.blockClass, "__item-time")));
 };
-var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer, conditionBuilderRef) {
   var _parentContainer$quer;
   var key = evt.key;
   var isHoldingShiftKey = util.checkForHoldingKey(evt, 'shiftKey');
@@ -39,22 +41,22 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
     case 'ArrowUp':
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        util.traverseReverse(eachElem, index, allElements);
+        util.traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
       });
       break;
     case 'ArrowDown':
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        util.traverseClockVise(eachElem, index, allElements);
+        util.traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
       });
       break;
     case 'Tab':
       allItems = [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(DataConfigs.blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
       allItems.forEach(function (eachElem, index, allElements) {
         if (isHoldingShiftKey) {
-          util.traverseReverse(eachElem, index, allElements, true, true);
+          util.traverseReverse(eachElem, index, allElements, true, true, conditionBuilderRef);
         } else {
-          util.traverseClockVise(eachElem, index, allElements, true, true);
+          util.traverseClockVise(eachElem, index, allElements, true, true, conditionBuilderRef);
         }
       });
       evt.preventDefault();
@@ -74,40 +76,41 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
           //for button , enter key is click which already handled by framework, else trigger click
-          util.focusThisField(evt);
+          util.focusThisField(evt, conditionBuilderRef);
           (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
         }
       }
       break;
     case 'Escape':
-      //focus the corresponding field in which the popover is triggered
-      util.focusThisField(evt);
+      //focus the corresponding field in which the popover is triggered\
+      util.focusThisField(evt, conditionBuilderRef);
       break;
   }
 };
 var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
+  var _document$activeEleme3;
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
       if (variant == 'tree') {
-        var _evt$target$closest3;
-        var allCellsInRow = Array.from((_evt$target$closest3 = evt.target.closest('[role="row"]')) === null || _evt$target$closest3 === void 0 ? void 0 : _evt$target$closest3.querySelectorAll('[role="gridcell"] button'));
-        if (evt.target.getAttribute('role') == 'row') {
+        var _evt$target$closest;
+        var allCellsInRow = Array.from((_evt$target$closest = evt.target.closest('[role="row"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('[role="gridcell"] button'));
+        if (allCellsInRow.length === 1) {
+          evt.target = evt.target.closest('[role="row"]');
+          handleRowNavigationTree(evt, conditionBuilderRef, variant);
+          //focus next row
+        } else if (evt.target.getAttribute('role') == 'row') {
           //when current focus is on a row, then we need to enter inside and focus the first cell of that row
-          if (allCellsInRow.length === 1) {
-            handleRowNavigationTree(evt, conditionBuilderRef, variant);
-            //focus next row
-          } else {
-            var _allCellsInRow$;
-            (_allCellsInRow$ = allCellsInRow[0]) === null || _allCellsInRow$ === void 0 || _allCellsInRow$.focus();
-          }
+
+          //focus first cell
+          util.manageTabIndexAndFocus(allCellsInRow[0], conditionBuilderRef);
         } else {
           //finding the next cell to be focussed
           //next cell = current cell index + 1
 
           var currentItemIndex = allCellsInRow.indexOf(evt.target);
           if (currentItemIndex < allCellsInRow.length - 1) {
-            util.focusThisItem(allCellsInRow[currentItemIndex + 1]);
+            util.focusThisItem(allCellsInRow[currentItemIndex + 1], conditionBuilderRef);
           }
         }
       } else {
@@ -118,17 +121,17 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       evt.preventDefault();
       if (variant == 'tree') {
         if (evt.target.getAttribute('role') !== 'row') {
-          var _evt$target$closest4;
+          var _evt$target$closest2;
           //when any cell is focussed, arrow left will select the previous cell or current row
 
-          var allItems = Array.from((_evt$target$closest4 = evt.target.closest('[role="row"]')) === null || _evt$target$closest4 === void 0 ? void 0 : _evt$target$closest4.querySelectorAll('[role="gridcell"] button'));
-          var _currentItemIndex = allItems.indexOf(evt.target);
+          var _allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
+          var _currentItemIndex = _allCellsInRow.indexOf(evt.target);
           if (_currentItemIndex > 0) {
-            util.focusThisItem(allItems[_currentItemIndex - 1]);
+            util.focusThisItem(_allCellsInRow[_currentItemIndex - 1], conditionBuilderRef);
           } else {
             //focus the row
             var wrapper = evt.target.closest("[role=\"row\"]");
-            wrapper.focus();
+            util.manageTabIndexAndFocus(wrapper, conditionBuilderRef);
           }
         }
       } else {
@@ -144,6 +147,12 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
         handleRowNavigation(evt, conditionBuilderRef, variant);
       }
       break;
+    case 'Enter':
+      if (((_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || (_document$activeEleme3 = _document$activeEleme3.querySelectorAll("button")) === null || _document$activeEleme3 === void 0 ? void 0 : _document$activeEleme3.length) === 1) {
+        var _document$activeEleme4;
+        (_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")[0]) === null || _document$activeEleme4 === void 0 || _document$activeEleme4.click();
+      }
+      break;
   }
 };
 var getRows = function getRows(conditionBuilderRef) {
@@ -159,9 +168,9 @@ var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
 var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
-  navigateToNextRowCell(evt, currentRowIndex, rows, variant);
+  navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
 };
-function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+var handleRowNavigationTree = function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   var nextRowIndex = currentRowIndex;
@@ -179,15 +188,13 @@ function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
       nextRowIndex = rows.length - 1;
     }
     if (nextRowIndex !== currentRowIndex) {
-      rows[currentRowIndex].setAttribute('tabindex', '-1');
-      rows[nextRowIndex].setAttribute('tabindex', '0');
-      rows[nextRowIndex].focus();
+      util.manageTabIndexAndFocus(rows[nextRowIndex], conditionBuilderRef);
     }
   } else {
-    navigateToNextRowCell(evt, currentRowIndex, rows, variant);
+    navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
   }
-}
-var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows, variant) {
+};
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef) {
   //when the current focussed element is a cell of any row, arrow up/down will focus the next row same cell.
 
   var nextRowIndex = currentRowIndex;
@@ -200,21 +207,21 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   var nextRow = rows[nextRowIndex];
   var itemName = evt.target.dataset.name;
   if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
-    var _nextRow$querySelecto;
-    nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
+    util.manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
   } else if (variant === 'tree') {
     //when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
-    nextRow === null || nextRow === void 0 || nextRow.focus();
+    util.manageTabIndexAndFocus(nextRow, conditionBuilderRef);
   }
 };
 var handleCellNavigation = function handleCellNavigation(evt, conditionBuilderRef) {
   conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
     if (evt.key === 'ArrowRight') {
-      util.traverseClockVise(eachElem, index, allElements);
+      util.traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
     } else {
-      util.traverseReverse(eachElem, index, allElements);
+      util.traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
     }
   });
 };
 
 exports.handleKeyDown = handleKeyDown;
+exports.handleKeyDownForPopover = handleKeyDownForPopover;

package/lib/components/ConditionBuilder/utils/util.d.ts

@@ -1,6 +1,7 @@
-export function focusThisField(evt: any): void;
-export function focusThisItem(currentElement: any): void;
-export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
-export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function focusThisField(evt: any, conditionBuilderRef: any): void;
+export function focusThisItem(currentElement: any, conditionBuilderRef: any): void;
+export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
+export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
-export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;
+export function checkIsValid(item: any): any;
+export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;

package/lib/components/ConditionBuilder/utils/util.js

@@ -9,40 +9,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var focusThisField = function focusThisField(evt) {
-  setTimeout(function () {
-    var _evt$target$closest, _evt$target$closest2;
-    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
-    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
-  }, 0);
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+
+var focusThisField = function focusThisField(evt, conditionBuilderRef) {
+  if (evt) {
+    setTimeout(function () {
+      var _evt$target$closest, _evt$target$closest2, _evt$target$closest3;
+      manageTabIndexAndFocus((_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelector('button'), conditionBuilderRef);
+      (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.click();
+      (_evt$target$closest3 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest3 === void 0 || (_evt$target$closest3 = _evt$target$closest3.querySelector('button')) === null || _evt$target$closest3 === void 0 || _evt$target$closest3.focus();
+    }, 0);
+  }
 };
-var focusThisItem = function focusThisItem(currentElement) {
+var focusThisItem = function focusThisItem(currentElement, conditionBuilderRef) {
   setTimeout(function () {
     //document.activeElement.setAttribute('tabindex', '-1');
     // currentElement.setAttribute('tabindex', '0');
-    currentElement === null || currentElement === void 0 || currentElement.focus();
+    manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };
-var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== allElements.length - 1) {
-      focusThisItem(allElements[index + 1]);
+      focusThisItem(allElements[index + 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[0]);
+    focusThisItem(allElements[0], conditionBuilderRef);
   }
 };
-var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== 0) {
-      focusThisItem(allElements[index - 1]);
+      focusThisItem(allElements[index - 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[allElements.length - 1]);
+    focusThisItem(allElements[allElements.length - 1], conditionBuilderRef);
   }
 };
 var checkForHoldingKey = function checkForHoldingKey(evt, key) {
@@ -52,9 +57,24 @@ var checkForHoldingKey = function checkForHoldingKey(evt, key) {
   }
   return evt[key];
 };
+var checkIsValid = function checkIsValid(item) {
+  return item && item !== 'INVALID';
+};
+var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, conditionBuilderRef) {
+  var _currentElement$close, _conditionBuilderRef$;
+  var contentContainer = (_currentElement$close = currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(DataConfigs.blockClass, "__content-container"))) !== null && _currentElement$close !== void 0 ? _currentElement$close : currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(DataConfigs.blockClass, "__actions-container"));
+  contentContainer && Array.from(contentContainer.querySelectorAll('[tabindex="0"]')).map(function (element) {
+    return element === null || element === void 0 ? void 0 : element.setAttribute('tabindex', '-1');
+  });
+  currentElement === null || currentElement === void 0 || currentElement.setAttribute('tabindex', '0');
+  (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(DataConfigs.blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
+  currentElement === null || currentElement === void 0 || currentElement.focus();
+};
 
 exports.checkForHoldingKey = checkForHoldingKey;
+exports.checkIsValid = checkIsValid;
 exports.focusThisField = focusThisField;
 exports.focusThisItem = focusThisItem;
+exports.manageTabIndexAndFocus = manageTabIndexAndFocus;
 exports.traverseClockVise = traverseClockVise;
 exports.traverseReverse = traverseReverse;

package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -44,6 +44,12 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Callback for columns after being dragged
+     */
+    onColDrag?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
     /**
      * The setter fn for the data prop
      */

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -41,7 +41,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -52,6 +52,7 @@ var defaults = {
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
   onDataUpdate: Object.freeze(function () {}),
+  onColDrag: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
   onSelectionAreaChange: Object.freeze(function () {}),
   theme: 'light'
@@ -71,6 +72,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
     _ref$onDataUpdate = _ref.onDataUpdate,
     onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
+    _ref$onColDrag = _ref.onColDrag,
+    onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
     id = _ref.id,
     _ref$onActiveCellChan = _ref.onActiveCellChange,
     onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
@@ -91,66 +94,75 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var localRef = React.useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement.useActiveElement();
-  var _useState = React.useState(false),
+  var _useState = React.useState(columns),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    containerHasFocus = _useState2[0],
-    setContainerHasFocus = _useState2[1];
-  var _useState3 = React.useState(null),
+    currentColumns = _useState2[0],
+    setCurrentColumns = _useState2[1];
+  var _useState3 = React.useState([]),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    activeCellCoordinates = _useState4[0],
-    setActiveCellCoordinates = _useState4[1];
-  var _useState5 = React.useState([]),
+    pastColumns = _useState4[0],
+    setPastColumns = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    selectionAreas = _useState6[0],
-    setSelectionAreas = _useState6[1];
-  var _useState7 = React.useState([]),
+    containerHasFocus = _useState6[0],
+    setContainerHasFocus = _useState6[1];
+  var _useState7 = React.useState(null),
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    selectionAreaData = _useState8[0],
-    setSelectionAreaData = _useState8[1];
-  var _useState9 = React.useState(false),
+    activeCellCoordinates = _useState8[0],
+    setActiveCellCoordinates = _useState8[1];
+  var _useState9 = React.useState([]),
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    clickAndHoldActive = _useState10[0],
-    setClickAndHoldActive = _useState10[1];
-  var _useState11 = React.useState(''),
+    selectionAreas = _useState10[0],
+    setSelectionAreas = _useState10[1];
+  var _useState11 = React.useState([]),
     _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    currentMatcher = _useState12[0],
-    setCurrentMatcher = _useState12[1];
+    selectionAreaData = _useState12[0],
+    setSelectionAreaData = _useState12[1];
   var _useState13 = React.useState(false),
     _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-    isEditing = _useState14[0],
-    setIsEditing = _useState14[1];
+    clickAndHoldActive = _useState14[0],
+    setClickAndHoldActive = _useState14[1];
   var _useState15 = React.useState(''),
     _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
-    cellEditorValue = _useState16[0],
-    setCellEditorValue = _useState16[1];
+    currentMatcher = _useState16[0],
+    setCurrentMatcher = _useState16[1];
   var _useState17 = React.useState(false),
     _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
-    headerCellHoldActive = _useState18[0],
-    setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = React.useState(false),
+    isEditing = _useState18[0],
+    setIsEditing = _useState18[1];
+  var _useState19 = React.useState(''),
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    selectedHeaderReorderActive = _useState20[0],
-    setSelectedHeaderReorderActive = _useState20[1];
-  var isBlurSpreadsheet = React.useRef(false);
+    cellEditorValue = _useState20[0],
+    setCellEditorValue = _useState20[1];
   var _useState21 = React.useState(false),
     _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
-    isActiveHeaderCellChanged = _useState22[0],
-    setIsActiveHeaderCellChanged = _useState22[1];
+    headerCellHoldActive = _useState22[0],
+    setHeaderCellHoldActive = _useState22[1];
   var _useState23 = React.useState(false),
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    activeCellInsideSelectionArea = _useState24[0],
-    setActiveCellInsideSelectionArea = _useState24[1];
+    selectedHeaderReorderActive = _useState24[0],
+    setSelectedHeaderReorderActive = _useState24[1];
+  var isBlurSpreadsheet = React.useRef(false);
+  var _useState25 = React.useState(false),
+    _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
+    isActiveHeaderCellChanged = _useState26[0],
+    setIsActiveHeaderCellChanged = _useState26[1];
+  var _useState27 = React.useState(false),
+    _useState28 = _rollupPluginBabelHelpers.slicedToArray(_useState27, 2),
+    activeCellInsideSelectionArea = _useState28[0],
+    setActiveCellInsideSelectionArea = _useState28[1];
   var previousState = usePreviousValue.usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing,
-    cellEditorValue: cellEditorValue
+    cellEditorValue: cellEditorValue,
+    selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize.getCellSize(cellSize);
   var cellEditorRef = React.useRef();
-  var _useState25 = React.useState(),
-    _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
-    activeCellContent = _useState26[0],
-    setActiveCellContent = _useState26[1];
+  var _useState29 = React.useState(),
+    _useState30 = _rollupPluginBabelHelpers.slicedToArray(_useState29, 2),
+    activeCellContent = _useState30[0],
+    setActiveCellContent = _useState30[1];
   var activeCellRef = React.useRef();
   var cellEditorRulerRef = React.useRef();
   var hasCustomRowHeader = typeof renderRowHeader === 'function';
@@ -197,6 +209,28 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       });
     });
   }, [cellEditorValue, onDataUpdate]);
+  React.useEffect(function () {
+    var currentHeaders = [];
+    if (Object.keys(currentColumns).length > 0) {
+      Object.keys(currentColumns).forEach(function (itemIndex) {
+        if (currentColumns[itemIndex].Header) {
+          currentHeaders.push(currentColumns[itemIndex].Header);
+        }
+      });
+    }
+    if (previousState.selectedHeaderReorderActive) {
+      setPastColumns(currentHeaders);
+    }
+    if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
+      onColDrag({
+        headers: currentHeaders,
+        data: activeCellContent.props.data
+      });
+      if (currentHeaders.length === 0) {
+        setPastColumns([]);
+      }
+    }
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
 
   // Removes the active cell element
   var removeActiveCell = React.useCallback(function () {
@@ -659,6 +693,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   }), /*#__PURE__*/React__default["default"].createElement(DataSpreadsheetBody.DataSpreadsheetBody, {
     activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
+    setCurrentColumns: setCurrentColumns,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
@@ -792,6 +827,10 @@ exports.DataSpreadsheet.propTypes = {
    * The event handler that is called when the active cell changes
    */
   onActiveCellChange: index["default"].func,
+  /**
+   * Callback for when columns are dropped after dragged
+   */
+  onColDrag: index["default"].func,
   /**
    * The setter fn for the data prop
    */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -48,6 +48,10 @@ interface DataSpreadsheetBodyProps {
      * The spreadsheet id
      */
     id?: number | string;
+    /**
+     * Set current columns after drag drop
+     */
+    setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
     /**
      * The event handler that is called when the active cell changes
      */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -42,6 +42,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultEmptyRowCount = _ref.defaultEmptyRowCount,
     getTableBodyProps = _ref.getTableBodyProps,
     headerGroups = _ref.headerGroups,
+    setCurrentColumns = _ref.setCurrentColumns,
     id = _ref.id,
     onDataUpdate = _ref.onDataUpdate,
     renderRowHeader = _ref.renderRowHeader,
@@ -318,7 +319,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       };
       buildEmptyRows();
     }
-  }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
+    if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
+      var headers = headerGroups[0].headers;
+      setCurrentColumns(headers);
+    }
+  }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
   var RenderEmptyRows = function RenderEmptyRows() {
     return _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null));
   };
@@ -522,6 +527,10 @@ DataSpreadsheetBody.propTypes = {
    * Setter fn for containerHasFocus state value
    */
   setContainerHasFocus: index["default"].func,
+  /**
+   * Set current columns after drag drop
+   */
+  setCurrentColumns: index["default"].func,
   /**
    * Setter fn for currentMatcher state value
    */

package/lib/components/DataSpreadsheet/types/index.d.ts

@@ -15,6 +15,7 @@ export interface PrevState {
     isEditing?: boolean;
     selectionAreaData?: any[];
     clickAndHoldActive?: boolean;
+    selectedHeaderReorderActive?: boolean;
     rowHeight?: number;
     cellSize?: Size;
 }

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -81,15 +81,39 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     onSaveColumnPrefs(updatedColumns);
   };
   var onCheckboxCheck = function onCheckboxCheck(col, value) {
+    // Update the visibility of columns based on a single column or an array of columns
     var changedDefinitions = columnObjects.map(function (definition) {
-      if ((Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) && definition.canFilter && !definition.disabled) {
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+      // If select all is clicked
+      if (Array.isArray(col)) {
+        return col.includes(definition) && definition.canFilter && !definition.disabled ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
           isVisible: value
-        });
+        }) : definition;
       }
-      return definition;
+      // If a single checkbox is clicked which is written below as a default return
+      return col.id === definition.id ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+        isVisible: value
+      }) : definition;
     });
-    setColumnObjects(changedDefinitions);
+
+    // Count the number of visible columns excluding certain IDs after 1st mutation
+    var selectedColumnsCount = changedDefinitions.filter(function (definition) {
+      return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
+    }).length;
+
+    // Ensure special columns are visible if any other columns are visible
+    var finalDefinitions = changedDefinitions.map(function (definition) {
+      // If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
+      if (selectedColumnsCount > 0) {
+        return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+          isVisible: true
+        }) : definition;
+      }
+      // Else we remove selection column and actions column
+      return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+        isVisible: false
+      }) : definition;
+    });
+    setColumnObjects(finalDefinitions);
     setDirty();
   };
   var setDirty = function setDirty() {
@@ -104,14 +128,14 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
   React.useEffect(function () {
-    var notFilterableCount = columnObjects.filter(function (col) {
-      return !col.canFilter;
-    }).length;
     var actionCount = columnObjects.filter(function (col) {
       return col.id === 'actions';
     }).length;
-    setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount - actionCount);
-    setTotalColumns(columnObjects.length - notFilterableCount - actionCount);
+    var datagridSelectionCount = columnObjects.filter(function (col) {
+      return col.id === 'datagridSelection';
+    }).length;
+    setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
+    setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
   }, [getVisibleColumnsCount, columnObjects]);
   return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, {
     className: "".concat(blockClass, "__customize-columns-tearsheet"),