npm - @carbon/ibm-products - Versions diffs - 2.43.2-canary.31 → 2.43.2-canary.317 - Mend

@carbon/ibm-products 2.43.2-canary.31 → 2.43.2-canary.317

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1260) hide show

package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts CHANGED Viewed

@@ -4,10 +4,10 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import { Column } from 'react-table';
 import { Size, Theme } from './types';
-interface DataSpreadsheetProps {
+import { Column } from 'react-table';
+import React from 'react';
+export interface DataSpreadsheetProps {
     /**
      * Specifies the cell height
      */
@@ -20,6 +20,10 @@ interface DataSpreadsheetProps {
      * The data that will build the column headers
      */
     columns?: readonly Column<object>[];
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * The spreadsheet data that will be rendered in the body of the spreadsheet component
      */
@@ -28,6 +32,10 @@ interface DataSpreadsheetProps {
      * Sets the number of empty rows to be created when there is no data provided
      */
     defaultEmptyRowCount?: number;
+    /**
+     * Check if has custom row header component attached
+     */
+    hasCustomRowHeader?: boolean;
     /**
      * The spreadsheet id
      */
@@ -36,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
      */
@@ -46,6 +60,18 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the selection area values change
      */
     onSelectionAreaChange?: () => void;
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
+    /**
+     * Position of the custom row numbering component
+     */
+    renderRowHeaderDirection?: 'left' | 'right';
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
     /**
      * The aria label applied to the Select all button
      */
@@ -68,4 +94,3 @@ interface DataSpreadsheetProps {
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 export declare let DataSpreadsheet: React.ForwardRefExoticComponent<DataSpreadsheetProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/DataSpreadsheet/DataSpreadsheet.js CHANGED Viewed

@@ -6,24 +6,25 @@
  */
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useTable, useBlockLayout, useColumnOrder } from 'react-table';
-import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from 'classnames';
-import { pkg } from '../../settings.js';
+import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { DataSpreadsheetBody } from './DataSpreadsheetBody.js';
 import { DataSpreadsheetHeader } from './DataSpreadsheetHeader.js';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
-import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
+import PropTypes from '../../_virtual/index.js';
 import { createActiveCellFn } from './utils/createActiveCellFn.js';
+import cx from 'classnames';
+import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
 import { getCellSize } from './utils/getCellSize.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth.js';
+import { handleEditSubmit } from './utils/handleEditSubmit.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
+import { handleKeyPress } from './utils/commonEventHandlers.js';
+import { pkg } from '../../settings.js';
 import { removeCellSelections } from './utils/removeCellSelections.js';
 import { selectAllCells } from './utils/selectAllCells.js';
-import { handleEditSubmit } from './utils/handleEditSubmit.js';
-import { handleKeyPress } from './utils/commonEventHandlers.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { useActiveElement } from '../../global/js/hooks/useActiveElement.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useMultipleKeyTracking } from './hooks/useMultipleKeyTracking.js';
@@ -32,7 +33,8 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
 import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "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(pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -43,6 +45,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'
@@ -62,89 +65,108 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     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,
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _objectWithoutProperties(_ref, _excluded);
   var multiKeyTrackingRef = useRef(null);
-  var localRef = useRef();
+  var localRef = useRef(undefined);
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
-  var _useState = useState(false),
+  var _useState = useState(columns),
     _useState2 = _slicedToArray(_useState, 2),
-    containerHasFocus = _useState2[0],
-    setContainerHasFocus = _useState2[1];
-  var _useState3 = useState(null),
+    currentColumns = _useState2[0],
+    setCurrentColumns = _useState2[1];
+  var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    activeCellCoordinates = _useState4[0],
-    setActiveCellCoordinates = _useState4[1];
-  var _useState5 = useState([]),
+    pastColumns = _useState4[0],
+    setPastColumns = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectionAreas = _useState6[0],
-    setSelectionAreas = _useState6[1];
-  var _useState7 = useState([]),
+    containerHasFocus = _useState6[0],
+    setContainerHasFocus = _useState6[1];
+  var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectionAreaData = _useState8[0],
-    setSelectionAreaData = _useState8[1];
-  var _useState9 = useState(false),
+    activeCellCoordinates = _useState8[0],
+    setActiveCellCoordinates = _useState8[1];
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    clickAndHoldActive = _useState10[0],
-    setClickAndHoldActive = _useState10[1];
-  var _useState11 = useState(''),
+    selectionAreas = _useState10[0],
+    setSelectionAreas = _useState10[1];
+  var _useState11 = useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    currentMatcher = _useState12[0],
-    setCurrentMatcher = _useState12[1];
+    selectionAreaData = _useState12[0],
+    setSelectionAreaData = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isEditing = _useState14[0],
-    setIsEditing = _useState14[1];
+    clickAndHoldActive = _useState14[0],
+    setClickAndHoldActive = _useState14[1];
   var _useState15 = useState(''),
     _useState16 = _slicedToArray(_useState15, 2),
-    cellEditorValue = _useState16[0],
-    setCellEditorValue = _useState16[1];
+    currentMatcher = _useState16[0],
+    setCurrentMatcher = _useState16[1];
   var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    headerCellHoldActive = _useState18[0],
-    setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = useState(false),
+    isEditing = _useState18[0],
+    setIsEditing = _useState18[1];
+  var _useState19 = useState(''),
     _useState20 = _slicedToArray(_useState19, 2),
-    selectedHeaderReorderActive = _useState20[0],
-    setSelectedHeaderReorderActive = _useState20[1];
-  var isBlurSpreadsheet = useRef(false);
+    cellEditorValue = _useState20[0],
+    setCellEditorValue = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    isActiveHeaderCellChanged = _useState22[0],
-    setIsActiveHeaderCellChanged = _useState22[1];
+    headerCellHoldActive = _useState22[0],
+    setHeaderCellHoldActive = _useState22[1];
   var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    activeCellInsideSelectionArea = _useState24[0],
-    setActiveCellInsideSelectionArea = _useState24[1];
+    selectedHeaderReorderActive = _useState24[0],
+    setSelectedHeaderReorderActive = _useState24[1];
+  var isBlurSpreadsheet = useRef(false);
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isActiveHeaderCellChanged = _useState26[0],
+    setIsActiveHeaderCellChanged = _useState26[1];
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    activeCellInsideSelectionArea = _useState28[0],
+    setActiveCellInsideSelectionArea = _useState28[1];
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing,
-    cellEditorValue: cellEditorValue
+    cellEditorValue: cellEditorValue,
+    selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
-  var cellEditorRef = useRef();
-  var _useState25 = useState(),
-    _useState26 = _slicedToArray(_useState25, 2),
-    activeCellContent = _useState26[0],
-    setActiveCellContent = _useState26[1];
-  var activeCellRef = useRef();
-  var cellEditorRulerRef = useRef();
+  var cellEditorRef = useRef(undefined);
+  var _useState29 = useState(),
+    _useState30 = _slicedToArray(_useState29, 2),
+    activeCellContent = _useState30[0],
+    setActiveCellContent = _useState30[1];
+  var activeCellRef = useRef(undefined);
+  var cellEditorRulerRef = useRef(undefined);
+  var hasCustomRowHeader = typeof renderRowHeader === 'function';
+  var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = useMemo(function () {
     return {
       width: 150,
-      rowHeaderWidth: 64,
+      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
       rowHeight: cellSizeValue
     };
-  }, [cellSizeValue]);
+  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
   var _useMultipleKeyTracki = useMultipleKeyTracking({
       ref: multiKeyTrackingRef,
       containerHasFocus: containerHasFocus,
@@ -180,6 +202,34 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       });
     });
   }, [cellEditorValue, onDataUpdate]);
+  useEffect(function () {
+    var currentHeaders = [];
+    if (Object.keys(currentColumns).length > 0) {
+      Object.keys(currentColumns).forEach(function (itemIndex) {
+        if (_typeof(currentColumns[itemIndex].Header) === 'object') {
+          if (currentColumns[itemIndex].column_name) {
+            currentHeaders.push(currentColumns[itemIndex].column_name);
+          } else {
+            currentHeaders.push(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 = useCallback(function () {
@@ -423,17 +473,14 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPressEvent = useCallback(function (event) {
-    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]);
+    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$r;
-      activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.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;
@@ -495,7 +542,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   // 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();
       }
@@ -551,8 +598,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   };
   // 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({
     isEditing: isEditing,
@@ -632,6 +681,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    disableColumnSwapping: disableColumnSwapping,
+    readOnlyTable: readOnlyTable,
     totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
@@ -641,6 +692,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   }), /*#__PURE__*/React__default.createElement(DataSpreadsheetBody, {
     activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
+    setCurrentColumns: setCurrentColumns,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
@@ -654,7 +706,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    hasCustomRowHeader: hasCustomRowHeader,
     onDataUpdate: onDataUpdate,
+    renderRowHeaderDirection: renderRowHeaderDirection,
+    renderRowHeader: renderRowHeader,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -677,7 +732,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
-    onDoubleClick: handleActiveCellDoubleClick,
+    onDoubleClick: function onDoubleClick() {
+      return handleActiveCellDoubleClick(readOnlyTable);
+    },
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
     className: cx("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
@@ -753,6 +810,14 @@ DataSpreadsheet.propTypes = {
    * Sets the number of empty rows to be created when there is no data provided
    */
   defaultEmptyRowCount: PropTypes.number,
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: PropTypes.bool,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: PropTypes.bool,
   /**
    * The spreadsheet id
    */
@@ -761,6 +826,10 @@ DataSpreadsheet.propTypes = {
    * The event handler that is called when the active cell changes
    */
   onActiveCellChange: PropTypes.func,
+  /**
+   * Callback for when columns are dropped after dragged
+   */
+  onColDrag: PropTypes.func,
   /**
    * The setter fn for the data prop
    */
@@ -769,6 +838,18 @@ DataSpreadsheet.propTypes = {
    * The event handler that is called when the selection area values change
    */
   onSelectionAreaChange: PropTypes.func,
+  /**
+   * Read-only table
+   */
+  readOnlyTable: PropTypes.bool,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: PropTypes.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: PropTypes.oneOf(['left', 'right']),
   /**
    * The aria label applied to the Select all button
    */

package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts CHANGED Viewed

@@ -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
      */

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js CHANGED Viewed

@@ -7,7 +7,7 @@
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { FixedSizeList } from 'react-window';
 import cx from 'classnames';
 import { px } from '@carbon/layout';
@@ -33,8 +33,12 @@ var DataSpreadsheetBody = /*#__PURE__*/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,
@@ -61,7 +65,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     validStartingPoint = _useState2[0],
     setValidStartingPoint = _useState2[1];
-  var contentScrollRef = useRef();
+  var contentScrollRef = useRef(undefined);
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
@@ -138,7 +142,7 @@ var DataSpreadsheetBody = /*#__PURE__*/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,
@@ -212,7 +216,7 @@ var DataSpreadsheetBody = /*#__PURE__*/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.
@@ -306,7 +310,11 @@ var DataSpreadsheetBody = /*#__PURE__*/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.createElement("div", null));
   };
@@ -338,11 +346,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClickEvent(index),
-        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
+        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_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(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && 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 = prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -367,8 +376,8 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
-  var spreadsheetBodyRef = useRef();
+  }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
+  var spreadsheetBodyRef = useRef(undefined);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))
@@ -433,6 +442,10 @@ DataSpreadsheetBody.propTypes = {
    */
   /**@ts-ignore */
   getTableBodyProps: PropTypes.func,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: PropTypes.bool,
   /**
    * Headers provided from useTable hook
    */
@@ -457,6 +470,14 @@ DataSpreadsheetBody.propTypes = {
    * Prepare row function from react-table
    */
   prepareRow: PropTypes.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: PropTypes.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: PropTypes.string,
   /**
    * All of the spreadsheet row data
    */
@@ -497,6 +518,10 @@ DataSpreadsheetBody.propTypes = {
    * Setter fn for containerHasFocus state value
    */
   setContainerHasFocus: PropTypes.func,
+  /**
+   * Set current columns after drag drop
+   */
+  setCurrentColumns: PropTypes.func,
   /**
    * Setter fn for currentMatcher state value
    */

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts CHANGED Viewed

@@ -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
      */