@carbon/ibm-products 2.43.2-canary.3 → 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,13 +35,19 @@ 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,
     setSelectionAreaData = _ref.setSelectionAreaData,
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
+    selectedHeaderReorderActive = _ref.selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive = _ref.setSelectedHeaderReorderActive,
     selectionAreas = _ref.selectionAreas,
     setContainerHasFocus = _ref.setContainerHasFocus,
     setSelectionAreas = _ref.setSelectionAreas,
@@ -84,8 +83,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // back to the consumer
   React.useEffect(function () {
     if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
-      var _previousState$select;
-      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
+      var _previousState$select, _selectionAreaData$, _previousState$select2;
+      var selectionChanged = false;
+      if ((previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length) || (selectionAreaData === null || selectionAreaData === void 0 || (_selectionAreaData$ = selectionAreaData[0]) === null || _selectionAreaData$ === void 0 ? void 0 : _selectionAreaData$.cells.length) !== (previousState === null || previousState === void 0 || (_previousState$select2 = previousState.selectionAreaData) === null || _previousState$select2 === void 0 || (_previousState$select2 = _previousState$select2[0]) === null || _previousState$select2 === void 0 ? void 0 : _previousState$select2.cells.length)) {
+        selectionChanged = true;
+      }
+      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || selectionChanged) {
         onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
       }
     }
@@ -141,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,
@@ -160,6 +163,8 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setClickAndHoldActive: setClickAndHoldActive,
     setSelectionAreas: setSelectionAreas,
     setValidStartingPoint: setValidStartingPoint,
+    selectedHeaderReorderActive: selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
     validStartingPoint: validStartingPoint,
     ref: ref,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
@@ -213,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.
@@ -307,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
@@ -322,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, {
@@ -355,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() {},
@@ -368,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,
@@ -395,135 +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,
   /**
    * 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,
   /**
    * 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
      */
@@ -56,6 +64,14 @@ interface DataSpreadsheetHeaderProps {
      * Setter fn for activeCellCoordinates value
      */
     setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Header reordering is active
+     */
+    selectedHeaderReorderActive?: boolean;
+    /**
+     * Set header reordering active or not
+     */
+    setSelectedHeaderReorderActive?: Dispatch<SetStateAction<boolean>>;
     /**
      * Setter fn for currentMatcher value
      */