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

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -7,11 +7,9 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var reactWindow = require('react-window');
 var cx = require('classnames');
 var layout = require('@carbon/layout');
@@ -27,11 +25,6 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.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 _div;
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -42,8 +35,12 @@ 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,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    hasCustomRowHeader = _ref.hasCustomRowHeader,
     prepareRow = _ref.prepareRow,
     rows = _ref.rows,
     selectionAreaData = _ref.selectionAreaData,
@@ -147,7 +144,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return;
       });
     }
-  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns]);
+  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns, hasCustomRowHeader]);
   var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
     var rowStart = _ref2.rowStart,
       rowEnd = _ref2.rowEnd,
@@ -221,7 +218,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
+  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
@@ -315,9 +312,13 @@ 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));
+    return _div || (_div = /*#__PURE__*/React.createElement("div", null));
   };
 
   // Renders each row/cell in the spreadsheet body
@@ -330,31 +331,32 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var rowProps = propsHelper.prepareProps(row.getRowProps({
         style: style
       }), 'key');
-      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
         key: _rollupPluginBabelHelpers.objectSpread2({}, row.getRowProps().key)
       }, rowProps, {
-        className: cx__default["default"]("".concat(blockClass, "__tr")),
+        className: cx("".concat(blockClass, "__tr")),
         "data-row-index": index,
         "aria-rowindex": index + 1,
         "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         role: "rowheader",
         className: "".concat(blockClass, "__td-th--cell-container")
-      }, /*#__PURE__*/React__default["default"].createElement("button", {
+      }, /*#__PURE__*/React.createElement("button", {
         id: "".concat(blockClass, "__cell--").concat(index, "--header"),
         tabIndex: -1,
         "data-row-index": index,
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClickEvent(index),
-        className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
+        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td_custom"), hasCustomRowHeader ? true : false), "".concat(blockClass, "__td-th--active-header"), !hasCustomRowHeader && ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+          flexDirection: hasCustomRowHeader ? renderRowHeaderDirection === 'Left' ? 'row-reverse' : row : undefined
         }
-      }, index + 1)), row.cells.map(function (cell, index) {
+      }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map(function (cell, index) {
         var _cell$column;
         var cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
-        return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
           key: "cell_".concat(index),
           "aria-colindex": index + 1
         }, cellProps, {
@@ -363,12 +365,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             display: 'grid',
             minWidth: (cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
           })
-        }), /*#__PURE__*/React__default["default"].createElement("button", {
+        }), /*#__PURE__*/React.createElement("button", {
           id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
           tabIndex: -1,
           "data-row-index": cell.row.index,
           "data-column-index": index,
-          className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
+          className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
           onMouseDown: handleBodyCellClickEvent(cell, index),
           onMouseOver: handleBodyCellHoverEvent(cell, index),
           onFocus: function onFocus() {},
@@ -376,13 +378,13 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
+  }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = React.useRef();
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     ref: spreadsheetBodyRef,
-    className: cx__default["default"]("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React__default["default"].createElement(reactWindow.FixedSizeList, {
-    className: cx__default["default"]("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
+    className: cx("".concat(blockClass, "__body--container"))
+  }, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React.createElement(reactWindow.FixedSizeList, {
+    className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
     itemCount: (rows === null || rows === void 0 ? void 0 : rows.length) || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
@@ -403,143 +405,159 @@ DataSpreadsheetBody.propTypes = {
    * Object containing the active cell coordinates
    */
   /**@ts-ignore */
-  activeCellCoordinates: index["default"].shape({
-    row: index["default"].oneOfType([index["default"].string, index["default"].number]),
-    column: index["default"].oneOfType([index["default"].string, index["default"].number])
+  activeCellCoordinates: index.default.shape({
+    row: index.default.oneOfType([index.default.string, index.default.number]),
+    column: index.default.oneOfType([index.default.string, index.default.number])
   }),
   /**
    *This is the ref of the button input, which is the active cell element
    */
   /**@ts-ignore */
-  activeCellRef: index["default"].object,
+  activeCellRef: index.default.object,
   /**
    * Is the user clicking and holding in the data spreadsheet body
    */
-  clickAndHoldActive: index["default"].bool,
+  clickAndHoldActive: index.default.bool,
   /**
    * All of the spreadsheet columns
    */
-  columns: index["default"].array,
+  columns: index.default.array,
   /**
    * This represents the id of the current cell selection area
    */
-  currentMatcher: index["default"].string,
+  currentMatcher: index.default.string,
   /**
    * Default spreadsheet sizing values
    */
   /**@ts-ignore */
-  defaultColumn: index["default"].shape({
-    rowHeight: index["default"].number,
-    rowHeaderWidth: index["default"].number,
-    width: index["default"].number
+  defaultColumn: index.default.shape({
+    rowHeight: index.default.number,
+    rowHeaderWidth: index.default.number,
+    width: index.default.number
   }),
   /**
    * Sets the number of empty rows to be created when there is no data provided
    */
-  defaultEmptyRowCount: index["default"].number,
+  defaultEmptyRowCount: index.default.number,
   /**
    * Function to set table body prop values
    */
   /**@ts-ignore */
-  getTableBodyProps: index["default"].func,
+  getTableBodyProps: index.default.func,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index.default.bool,
   /**
    * Headers provided from useTable hook
    */
-  headerGroups: index["default"].arrayOf(index["default"].object),
+  headerGroups: index.default.arrayOf(index.default.object),
   /**
    * 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,
   /**
    * The event handler that is called to set the rows for the empty spreadsheet
    */
-  onDataUpdate: index["default"].func,
+  onDataUpdate: index.default.func,
   /**
    * The event handler that is called when the selection areas change
    */
-  onSelectionAreaChange: index["default"].func,
+  onSelectionAreaChange: index.default.func,
   /**
    * Prepare row function from react-table
    */
-  prepareRow: index["default"].func,
+  prepareRow: index.default.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index.default.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index.default.string,
   /**
    * All of the spreadsheet row data
    */
-  rows: index["default"].arrayOf(index["default"].object),
+  rows: index.default.arrayOf(index.default.object),
   /**
    * The scrollbar width
    */
-  scrollBarSize: index["default"].number,
+  scrollBarSize: index.default.number,
   /**
    * Header reordering is active
    */
-  selectedHeaderReorderActive: index["default"].bool,
+  selectedHeaderReorderActive: index.default.bool,
   /**
    * Array of selection area data
    */
-  selectionAreaData: index["default"].array,
+  selectionAreaData: index.default.array,
   /**
    * Array of selection areas
    */
-  selectionAreas: index["default"].array,
+  selectionAreas: index.default.array,
   /**
    * Setter fn for activeCellCoordinates state value
    */
-  setActiveCellCoordinates: index["default"].func,
+  setActiveCellCoordinates: index.default.func,
   /**
    * Setter fn for active cell inside of selection area
    */
-  setActiveCellInsideSelectionArea: index["default"].func,
+  setActiveCellInsideSelectionArea: index.default.func,
   /**
    * Setter fn for clickAndHold state value
    */
-  setClickAndHoldActive: index["default"].func,
+  setClickAndHoldActive: index.default.func,
   /**
    * Setter fn for column ordering, provided from react-table
    */
-  setColumnOrder: index["default"].func,
+  setColumnOrder: index.default.func,
   /**
    * Setter fn for containerHasFocus state value
    */
-  setContainerHasFocus: index["default"].func,
+  setContainerHasFocus: index.default.func,
+  /**
+   * Set current columns after drag drop
+   */
+  setCurrentColumns: index.default.func,
   /**
    * Setter fn for currentMatcher state value
    */
-  setCurrentMatcher: index["default"].func,
+  setCurrentMatcher: index.default.func,
   /**
    * Setter fn for header cell hold active value
    */
-  setHeaderCellHoldActive: index["default"].func,
+  setHeaderCellHoldActive: index.default.func,
   /**
    * Set header reordering active or not
    */
-  setSelectedHeaderReorderActive: index["default"].func,
+  setSelectedHeaderReorderActive: index.default.func,
   /**
    * Setter fn for selectionAreaData state value
    */
-  setSelectionAreaData: index["default"].func,
+  setSelectionAreaData: index.default.func,
   /**
    * Setter fn for selectionAreas state value
    */
-  setSelectionAreas: index["default"].func,
+  setSelectionAreas: index.default.func,
   /**
    * The total columns width
    */
-  totalColumnsWidth: index["default"].number,
+  totalColumnsWidth: index.default.number,
   /**
    * 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,
   /**
    * Prop from react-table used to reorder columns
    */
   /**@ts-ignore */
-  visibleColumns: index["default"].array
+  visibleColumns: index.default.array
 };
 
 exports.DataSpreadsheetBody = DataSpreadsheetBody;

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

@@ -16,6 +16,10 @@ interface DataSpreadsheetHeaderProps {
      * Specifies the cell height
      */
     cellSize?: Size;
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * All of the spreadsheet columns
      */
@@ -36,6 +40,10 @@ interface DataSpreadsheetHeaderProps {
      * Headers provided from useTable hook
      */
     headerGroups?: any[];
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
     /**
      * All of the spreadsheet row data
      */

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -7,11 +7,9 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var layout = require('@carbon/layout');
 var settings = require('../../settings.js');
@@ -25,11 +23,6 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseMove = require('./hooks/useSpreadsheetMouseMove.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 blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var activeCellCoordinates = _ref.activeCellCoordinates,
@@ -45,6 +38,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
     setCurrentMatcher = _ref.setCurrentMatcher,
     setSelectionAreas = _ref.setSelectionAreas,
+    readOnlyTable = _ref.readOnlyTable,
+    disableColumnSwapping = _ref.disableColumnSwapping,
     setSelectionAreaData = _ref.setSelectionAreaData,
     rows = _ref.rows,
     totalVisibleColumns = _ref.totalVisibleColumns,
@@ -151,12 +146,12 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     headerCellHoldActive: headerCellHoldActive,
     defaultColumn: defaultColumn
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(blockClass, "__header--container")),
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__header--container")),
     role: "rowgroup"
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(function (headerGroup, index) {
     var headerProps = propsHelper.prepareProps(headerGroup.getHeaderGroupProps(), 'key');
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
       key: "header_".concat(index)
     }, headerProps, {
       style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
@@ -172,36 +167,39 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         overflow: 'hidden'
       }),
       className: "".concat(blockClass, "__tr")
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       role: "columnheader",
       className: "".concat(blockClass, "__select-all-cell-container"),
       style: {
         width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
         height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
       }
-    }, /*#__PURE__*/React__default["default"].createElement("button", {
+    }, /*#__PURE__*/React.createElement("button", {
       id: "".concat(blockClass, "__cell--header--header"),
       "data-row-index": "header",
       "data-column-index": "header",
       type: "button",
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+      },
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
-      className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
+      className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
       var colProps = propsHelper.prepareProps(column.getHeaderProps(), 'key');
       var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
-      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
         key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
-      }, colProps), /*#__PURE__*/React__default["default"].createElement("button", {
+      }, colProps), /*#__PURE__*/React.createElement("button", {
         id: "".concat(blockClass, "__cell--header--").concat(index),
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
-        onMouseUp: selectedHeader && typeof setSelectedHeaderReorderActive === 'function' ? function () {
+        onMouseDown: selectedHeader && !readOnlyTable && !disableColumnSwapping ? handleHeaderMouseDown(index) : undefined,
+        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? function () {
           return setSelectedHeaderReorderActive(false);
         } : undefined,
         onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
@@ -209,7 +207,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--active-header-disabledSwapping"), disableColumnSwapping || readOnlyTable), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -220,99 +218,107 @@ DataSpreadsheetHeader.propTypes = {
    * Object containing the active cell coordinates
    */
   /**@ts-ignore */
-  activeCellCoordinates: index["default"].shape({
-    row: index["default"].oneOfType([index["default"].number, index["default"].string]),
-    column: index["default"].oneOfType([index["default"].number, index["default"].string])
+  activeCellCoordinates: index.default.shape({
+    row: index.default.oneOfType([index.default.number, index.default.string]),
+    column: index.default.oneOfType([index.default.number, index.default.string])
   }),
   /**
    * Specifies the cell height
    */
-  cellSize: index["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  cellSize: index.default.oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * All of the spreadsheet columns
    */
-  columns: index["default"].array,
+  columns: index.default.array,
   /**
    * uuid that corresponds to the current selection area
    */
-  currentMatcher: index["default"].string,
+  currentMatcher: index.default.string,
   /**
    * Default spreadsheet sizing values
    */
   /**@ts-ignore */
-  defaultColumn: index["default"].shape({
-    rowHeight: index["default"].number,
-    rowHeaderWidth: index["default"].number,
-    width: index["default"].number
+  defaultColumn: index.default.shape({
+    rowHeight: index.default.number,
+    rowHeaderWidth: index.default.number,
+    width: index.default.number
   }),
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: index.default.bool,
   /**
    * Whether or not a click/hold is active on a header cell
    */
-  headerCellHoldActive: index["default"].bool,
+  headerCellHoldActive: index.default.bool,
   /**
    * Headers provided from useTable hook
    */
-  headerGroups: index["default"].arrayOf(index["default"].object),
+  headerGroups: index.default.arrayOf(index.default.object),
+  /**
+   * Read-only table
+   */
+  readOnlyTable: index.default.bool,
   /**
    * All of the spreadsheet row data
    */
   /**@ts-ignore */
-  rows: index["default"].arrayOf(index["default"].object),
+  rows: index.default.arrayOf(index.default.object),
   /**
    * The scrollbar width
    */
-  scrollBarSize: index["default"].number,
+  scrollBarSize: index.default.number,
   /**
    * The aria label applied to the Select all button
    */
-  selectAllAriaLabel: index["default"].string.isRequired,
+  selectAllAriaLabel: index.default.string.isRequired,
   /**
    * Header reordering is active
    */
-  selectedHeaderReorderActive: index["default"].bool,
+  selectedHeaderReorderActive: index.default.bool,
   /**
    * All of the cell selection area items
    */
   /**@ts-ignore */
-  selectionAreas: index["default"].arrayOf(index["default"].object),
+  selectionAreas: index.default.arrayOf(index.default.object),
   /**
    * Setter fn for activeCellCoordinates value
    */
-  setActiveCellCoordinates: index["default"].func,
+  setActiveCellCoordinates: index.default.func,
   /**
    * Setter fn for currentMatcher value
    */
-  setCurrentMatcher: index["default"].func,
+  setCurrentMatcher: index.default.func,
   /**
    * Setter fn for header cell hold active value
    */
-  setHeaderCellHoldActive: index["default"].func,
+  setHeaderCellHoldActive: index.default.func,
   /**
    * Set header reordering active or not
    */
-  setSelectedHeaderReorderActive: index["default"].func,
+  setSelectedHeaderReorderActive: index.default.func,
   /**
    * Setter fn for selectionAreaData state value
    */
-  setSelectionAreaData: index["default"].func,
+  setSelectionAreaData: index.default.func,
   /**
    * Setter fn for selectionAreas value
    */
-  setSelectionAreas: index["default"].func,
+  setSelectionAreas: index.default.func,
   /**
    * 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,
   /**
    * Function used to update the active cell coordinates
    */
-  updateActiveCellCoordinates: index["default"].func,
+  updateActiveCellCoordinates: index.default.func,
   /**
    * Array of visible columns provided by react-table useTable hook
    */
   /**@ts-ignore */
-  visibleColumns: index["default"].array
+  visibleColumns: index.default.array
 };
 
 exports.DataSpreadsheetHeader = DataSpreadsheetHeader;

package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 // Moves the placement of the active cell

package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var handleMultipleKeys = require('../utils/handleMultipleKeys.js');

package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var settings = require('../../../settings.js');
 

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var layout = require('@carbon/layout');