@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -7,27 +7,26 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
 var reactTable = require('react-table');
-var index = require('../../node_modules/prop-types/index.js');
-var cx = require('classnames');
-var settings = require('../../settings.js');
+var React = require('react');
 var DataSpreadsheetBody = require('./DataSpreadsheetBody.js');
 var DataSpreadsheetHeader = require('./DataSpreadsheetHeader.js');
-var devtools = require('../../global/js/utils/devtools.js');
-var getScrollbarWidth = require('../../global/js/utils/getScrollbarWidth.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
-var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
+var index = require('../../_virtual/index.js');
 var createActiveCellFn = require('./utils/createActiveCellFn.js');
+var cx = require('classnames');
+var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
 var getCellSize = require('./utils/getCellSize.js');
+var devtools = require('../../global/js/utils/devtools.js');
+var getScrollbarWidth = require('../../global/js/utils/getScrollbarWidth.js');
+var handleEditSubmit = require('./utils/handleEditSubmit.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
+var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
+var settings = require('../../settings.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var selectAllCells = require('./utils/selectAllCells.js');
-var handleEditSubmit = require('./utils/handleEditSubmit.js');
-var commonEventHandlers = require('./utils/commonEventHandlers.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var useActiveElement = require('../../global/js/hooks/useActiveElement.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useMultipleKeyTracking = require('./hooks/useMultipleKeyTracking.js');
@@ -36,12 +35,8 @@ var useSpreadsheetOutsideClick = require('./hooks/useSpreadsheetOutsideClick.js'
 var useMoveActiveCell = require('./hooks/useMoveActiveCell.js');
 var useSpreadsheetEdit = require('./hooks/useSpreadsheetEdit.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "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 +47,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'
@@ -59,7 +55,7 @@ var defaults = {
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
-exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$cellSize = _ref.cellSize,
     cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
     className = _ref.className,
@@ -71,11 +67,19 @@ 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,
     _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
     onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+    renderRowHeader = _ref.renderRowHeader,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    _ref$disableColumnSwa = _ref.disableColumnSwapping,
+    disableColumnSwapping = _ref$disableColumnSwa === void 0 ? false : _ref$disableColumnSwa,
+    _ref$readOnlyTable = _ref.readOnlyTable,
+    readOnlyTable = _ref$readOnlyTable === void 0 ? false : _ref$readOnlyTable,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -85,71 +89,86 @@ 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 isBlurSpreadsheet = React.useRef(false);
-  var _useState19 = React.useState(false),
+    isEditing = _useState18[0],
+    setIsEditing = _useState18[1];
+  var _useState19 = React.useState(''),
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    isActiveHeaderCellChanged = _useState20[0],
-    setIsActiveHeaderCellChanged = _useState20[1];
+    cellEditorValue = _useState20[0],
+    setCellEditorValue = _useState20[1];
   var _useState21 = React.useState(false),
     _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
-    activeCellInsideSelectionArea = _useState22[0],
-    setActiveCellInsideSelectionArea = _useState22[1];
+    headerCellHoldActive = _useState22[0],
+    setHeaderCellHoldActive = _useState22[1];
+  var _useState23 = React.useState(false),
+    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
+    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 _useState23 = React.useState(),
-    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    activeCellContent = _useState24[0],
-    setActiveCellContent = _useState24[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';
+  var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = React.useMemo(function () {
     return {
       width: 150,
-      rowHeaderWidth: 64,
+      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
       rowHeight: cellSizeValue
     };
-  }, [cellSizeValue]);
+  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
   var _useMultipleKeyTracki = useMultipleKeyTracking.useMultipleKeyTracking({
       ref: multiKeyTrackingRef,
       containerHasFocus: containerHasFocus,
@@ -185,6 +204,34 @@ 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 (_rollupPluginBabelHelpers.typeof(currentColumns[itemIndex].Header) === 'object') {
+          if (currentColumns[itemIndex].column_name) {
+            currentHeaders.push(currentColumns[itemIndex].column_name);
+          } else {
+            currentHeaders.push(getNodeTextContent.getNodeTextContent(currentColumns[itemIndex].Header));
+          }
+        } else 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 () {
@@ -216,9 +263,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
     if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
-        var _activeCellFullData$r;
         var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-        setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
+        if (activeCellFullData) {
+          setActiveCellContent(activeCellFullData.render('Cell'));
+        } else {
+          setActiveCellContent(null);
+        }
       }
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
@@ -301,7 +351,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     // selections using keyboard. Opting out of the selection area updates here means
     // that the active cell is being moved within a selection area
     if (newActiveCell.row !== 'header' && newActiveCell.column !== 'header' && !optOutOfSelectionAreaUpdate) {
-      var tempMatcher = uuidv4["default"]();
+      var tempMatcher = uuidv4.default();
       setSelectionAreas([{
         point1: newActiveCell,
         matcher: tempMatcher
@@ -425,17 +475,14 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPressEvent = React.useCallback(function (event) {
-    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent);
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress]);
+    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent, readOnlyTable);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, readOnlyTable]);
   var startEditMode = function startEditMode() {
+    var _activeCellFullData$r;
     setIsEditing(true);
     setClickAndHoldActive(false);
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-    var activeCellValue;
-    if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
-      var _activeCellFullData$r2;
-      activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
-    }
+    var activeCellValue = activeCellFullData === null || activeCellFullData === void 0 || (_activeCellFullData$r = activeCellFullData.row) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[Number(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value;
     setCellEditorValue(activeCellValue || '');
     if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
       cellEditorRulerRef.current.textContent = activeCellValue;
@@ -477,7 +524,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   // Mouse down on active cell
   var handleActiveCellMouseDown = function handleActiveCellMouseDown() {
     if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
-      var tempMatcher = uuidv4["default"]();
+      var tempMatcher = uuidv4.default();
       setClickAndHoldActive(true);
       removeCellSelections.removeCellSelections({
         matcher: null,
@@ -497,7 +544,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   // Go into edit mode if 'Enter' key is pressed on activeCellRef
   var handleActiveCellKeyDown = function handleActiveCellKeyDown(event) {
     var key = event.key;
-    if (key === 'Enter' && !activeCellInsideSelectionArea) {
+    if (key === 'Enter' && !activeCellInsideSelectionArea && !readOnlyTable) {
       if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header') {
         startEditMode();
       }
@@ -553,8 +600,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   };
 
   // Go into edit mode if double click is detected on activeCellRef
-  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick() {
-    startEditMode();
+  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick(readOnlyTable) {
+    if (!readOnlyTable) {
+      startEditMode();
+    }
   };
   useSpreadsheetEdit.useSpreadsheetEdit({
     isEditing: isEditing,
@@ -585,7 +634,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
         if (indexOfItemToUpdate === -1) {
           return prev;
         }
-        if (_rollupPluginBabelHelpers["typeof"](selectionAreaClone[indexOfItemToUpdate].point2) === 'object' && selectionAreaClone[indexOfItemToUpdate].areaCreated) {
+        if (_rollupPluginBabelHelpers.typeof(selectionAreaClone[indexOfItemToUpdate].point2) === 'object' && selectionAreaClone[indexOfItemToUpdate].areaCreated) {
           selectionAreaClone[indexOfItemToUpdate].point2 = selectionAreaClone[indexOfItemToUpdate].point1;
           selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
           setActiveCellInsideSelectionArea(false);
@@ -603,8 +652,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
   // cspell:words rowcount colcount
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
-    className: cx__default["default"](blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
+    className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
@@ -615,15 +664,17 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
     }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
-  }, /*#__PURE__*/React__default["default"].createElement(DataSpreadsheetHeader.DataSpreadsheetHeader, {
+  }, /*#__PURE__*/React.createElement(DataSpreadsheetHeader.DataSpreadsheetHeader, {
     ref: spreadsheetRef,
     activeCellCoordinates: activeCellCoordinates,
     cellSize: cellSize,
     columns: columns,
     currentMatcher: currentMatcher,
     defaultColumn: defaultColumn,
+    selectedHeaderReorderActive: selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
     headerGroups: headerGroups,
     rows: rows,
     scrollBarSize: scrollBarSize,
@@ -632,27 +683,35 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    disableColumnSwapping: disableColumnSwapping,
+    readOnlyTable: readOnlyTable,
     totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
     headerCellHoldActive: headerCellHoldActive,
     visibleColumns: visibleColumns,
     selectAllAriaLabel: selectAllAriaLabel
-  }), /*#__PURE__*/React__default["default"].createElement(DataSpreadsheetBody.DataSpreadsheetBody, {
+  }), /*#__PURE__*/React.createElement(DataSpreadsheetBody.DataSpreadsheetBody, {
     activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
+    setCurrentColumns: setCurrentColumns,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
     currentMatcher: currentMatcher,
     setCurrentMatcher: setCurrentMatcher,
     setContainerHasFocus: setContainerHasFocus,
+    selectedHeaderReorderActive: selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    hasCustomRowHeader: hasCustomRowHeader,
     onDataUpdate: onDataUpdate,
+    renderRowHeaderDirection: renderRowHeaderDirection,
+    renderRowHeader: renderRowHeader,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -670,17 +729,19 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setHeaderCellHoldActive: setHeaderCellHoldActive,
     setColumnOrder: setColumnOrder,
     visibleColumns: visibleColumns
-  }), /*#__PURE__*/React__default["default"].createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     onMouseDown: handleActiveCellMouseDown,
     onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
-    onDoubleClick: handleActiveCellDoubleClick,
+    onDoubleClick: function onDoubleClick() {
+      return handleActiveCellDoubleClick(readOnlyTable);
+    },
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
-    className: cx__default["default"]("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
+    className: cx("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
-  }, activeCellContent), /*#__PURE__*/React__default["default"].createElement("textarea", {
+  }, activeCellContent), /*#__PURE__*/React.createElement("textarea", {
     id: "".concat(blockClass, "__cell-editor-text-area"),
     value: cellEditorValue,
     onKeyDown: handleEditSubmit.handleEditSubmit({
@@ -697,15 +758,17 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       updateData: updateData
     }),
     onChange: function onChange(event) {
-      setCellEditorValue(event.target.value);
-      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
-        cellEditorRulerRef.current.textContent = event.target.value;
+      if (previousState.isEditing) {
+        setCellEditorValue(event.target.value);
+        if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+          cellEditorRulerRef.current.textContent = event.target.value;
+        }
       }
     },
     ref: cellEditorRef,
     "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : '',
-    className: cx__default["default"]("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
-  }), /*#__PURE__*/React__default["default"].createElement("pre", {
+    className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
+  }), /*#__PURE__*/React.createElement("pre", {
     "aria-hidden": true,
     ref: cellEditorRulerRef,
     className: "".concat(blockClass, "__cell-editor-ruler")
@@ -726,62 +789,86 @@ exports.DataSpreadsheet.propTypes = {
   /**
    * Specifies the cell height
    */
-  cellSize: index["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  cellSize: index.default.oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * The data that will build the column headers
    */
   /**@ts-ignore */
-  columns: index["default"].arrayOf(index["default"].shape({
-    Header: index["default"].string,
-    accessor: index["default"].oneOfType([index["default"].string, index["default"].func]),
-    Cell: index["default"].func // optional cell formatter
+  columns: index.default.arrayOf(index.default.shape({
+    Header: index.default.string,
+    accessor: index.default.oneOfType([index.default.string, index.default.func]),
+    Cell: index.default.func // optional cell formatter
   })),
   /**
    * The spreadsheet data that will be rendered in the body of the spreadsheet component
    */
   /**@ts-ignore */
-  data: index["default"].arrayOf(index["default"].shape),
+  data: index.default.arrayOf(index.default.shape),
   /**
    * Sets the number of empty rows to be created when there is no data provided
    */
-  defaultEmptyRowCount: index["default"].number,
+  defaultEmptyRowCount: index.default.number,
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: index.default.bool,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index.default.bool,
   /**
    * The spreadsheet id
    */
-  id: index["default"].oneOfType([index["default"].number, index["default"].string]),
+  id: index.default.oneOfType([index.default.number, index.default.string]),
   /**
    * The event handler that is called when the active cell changes
    */
-  onActiveCellChange: index["default"].func,
+  onActiveCellChange: index.default.func,
+  /**
+   * Callback for when columns are dropped after dragged
+   */
+  onColDrag: index.default.func,
   /**
    * The setter fn for the data prop
    */
-  onDataUpdate: index["default"].func,
+  onDataUpdate: index.default.func,
   /**
    * The event handler that is called when the selection area values change
    */
-  onSelectionAreaChange: index["default"].func,
+  onSelectionAreaChange: index.default.func,
+  /**
+   * Read-only table
+   */
+  readOnlyTable: index.default.bool,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index.default.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index.default.oneOf(['left', 'right']),
   /**
    * The aria label applied to the Select all button
    */
-  selectAllAriaLabel: index["default"].string.isRequired,
+  selectAllAriaLabel: index.default.string.isRequired,
   /**
    * The aria label applied to the Data spreadsheet component
    */
-  spreadsheetAriaLabel: index["default"].string.isRequired,
+  spreadsheetAriaLabel: index.default.string.isRequired,
   /**
    * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
    */
-  theme: index["default"].oneOf(['light', 'dark']),
+  theme: index.default.oneOf(['light', 'dark']),
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar
    */
-  totalVisibleColumns: index["default"].number
+  totalVisibleColumns: index.default.number
 
   /* TODO: add types and DocGen for all props. */
 };

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

@@ -48,10 +48,26 @@ 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
      */
     onActiveCellChange?: () => void;
+    /**
+     * Check if user is using custom component
+     */
+    hasCustomRowHeader?: boolean;
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeaderDirection?: string;
     /**
      * The event handler that is called to set the rows for the empty spreadsheet
      */
@@ -79,7 +95,15 @@ interface DataSpreadsheetBodyProps {
     /**
      * Array of selection area data
      */
-    selectionAreaData?: object[];
+    selectionAreaData?: any[];
+    /**
+     * Header reordering is active
+     */
+    selectedHeaderReorderActive?: boolean;
+    /**
+     * Set header reordering active or not
+     */
+    setSelectedHeaderReorderActive?: Dispatch<SetStateAction<boolean>>;
     /**
      * Array of selection areas
      */