@carbon/ibm-products 2.23.0 → 2.25.0

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

@@ -0,0 +1,2 @@
+export const DataSpreadsheetBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -1,42 +1,39 @@
-"use strict";
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DataSpreadsheetBody = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactWindow = require("react-window");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _layout = require("@carbon/layout");
-var _settings = require("../../settings");
-var _deepCloneObject = require("../../global/js/utils/deepCloneObject");
-var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-var _hooks = require("../../global/js/hooks");
-var _removeCellSelections = require("./utils/removeCellSelections");
-var _createCellSelectionArea = require("./utils/createCellSelectionArea");
-var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
-var _checkSelectedHeaderCell = require("./utils/checkSelectedHeaderCell");
-var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
-var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
-var _hooks2 = require("./hooks");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2022, 2022
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       *
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * This source code is licensed under the Apache-2.0 license found in the
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * LICENSE file in the root directory of this source tree.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
-var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
-var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index$1 = require('../../node_modules/prop-types/index.js');
+var reactWindow = require('react-window');
+var index = require('../../node_modules/classnames/index.js');
+var layout = require('@carbon/layout');
+var settings = require('../../settings.js');
+var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
+var removeCellSelections = require('./utils/removeCellSelections.js');
+var createCellSelectionArea = require('./utils/createCellSelectionArea.js');
+var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
+var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
+var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
+var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.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 _div;
+var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
+var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var columns = _ref.columns,
     activeCellCoordinates = _ref.activeCellCoordinates,
     defaultColumn = _ref.defaultColumn,
@@ -65,25 +62,25 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
     setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
     setColumnOrder = _ref.setColumnOrder,
     visibleColumns = _ref.visibleColumns;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     validStartingPoint = _useState2[0],
     setValidStartingPoint = _useState2[1];
-  var contentScrollRef = (0, _react.useRef)();
-  var previousState = (0, _hooks.usePreviousValue)({
+  var contentScrollRef = React.useRef();
+  var previousState = usePreviousValue.usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
     rowHeight: defaultColumn.rowHeight
   });
 
   // Set custom css property containing the spreadsheet total width
-  (0, _react.useEffect)(function () {
-    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), (0, _layout.px)(totalColumnsWidth + scrollBarSize));
+  React.useEffect(function () {
+    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px(totalColumnsWidth + scrollBarSize));
   }, [ref, scrollBarSize, totalColumnsWidth]);
 
   // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (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)) {
@@ -93,7 +90,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
   }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
 
   // Create cell selection areas based on selectionAreas array
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (selectionAreas && selectionAreas.length) {
       selectionAreas.map(function (area) {
         // Setup selection area data that will be sent back to consumer via onSelectionAreaChange prop
@@ -120,15 +117,15 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
             selectionId: area.matcher
           };
           setSelectionAreaData(function (prev) {
-            var prevValues = (0, _deepCloneObject.deepCloneObject)(prev);
+            var prevValues = deepCloneObject.deepCloneObject(prev);
             var newAreaData = prevValues.filter(function (item) {
               return item.selectionId !== area.matcher;
             });
-            return [].concat((0, _toConsumableArray2.default)(newAreaData), [selectionData]);
+            return [].concat(_rollupPluginBabelHelpers.toConsumableArray(newAreaData), [selectionData]);
           });
         }
         if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
-          (0, _createCellSelectionArea.createCellSelectionArea)({
+          createCellSelectionArea.createCellSelectionArea({
             ref: ref,
             area: area,
             blockClass: blockClass,
@@ -156,7 +153,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
     }
     return cellContainer;
   };
-  (0, _hooks2.useSpreadsheetMouseUp)({
+  useSpreadsheetMouseUp.useSpreadsheetMouseUp({
     currentMatcher: currentMatcher,
     setClickAndHoldActive: setClickAndHoldActive,
     setSelectionAreas: setSelectionAreas,
@@ -176,7 +173,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
   // Make sure that if the cellSize prop changes, the active
   // cell also gets updated with the new size and new top placement
   // value. All of the cell selections will be updated as well
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
     var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
     if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
@@ -185,13 +182,13 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
         var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
         var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
         var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
-        activeCellButton.style.top = (0, _layout.px)(newActiveCellTopPosition);
-        (0, _removeCellSelections.removeCellSelections)({
+        activeCellButton.style.top = layout.px(newActiveCellTopPosition);
+        removeCellSelections.removeCellSelections({
           spreadsheetRef: ref
         });
         selectionAreas.map(function (area) {
           if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
-            return (0, _createCellSelectionArea.createCellSelectionArea)({
+            return createCellSelectionArea.createCellSelectionArea({
               ref: ref,
               area: area,
               blockClass: blockClass,
@@ -209,7 +206,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
 
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
-  var handleBodyCellClick = (0, _react.useCallback)(function (cell, columnIndex) {
+  var handleBodyCellClick = React.useCallback(function (cell, columnIndex) {
     return function (event) {
       event.preventDefault();
       var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
@@ -222,7 +219,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
         row: cell.row.index,
         column: columnIndex
       };
-      var tempMatcher = (0, _uuidv.default)();
+      var tempMatcher = uuidv4["default"]();
       setClickAndHoldActive(true);
 
       // prevent multiple selections unless cmd key is held
@@ -234,14 +231,14 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
         setActiveCellCoordinates(activeCoordinates);
         setCurrentMatcher(tempMatcher);
         setSelectionAreas(function (prev) {
-          return [].concat((0, _toConsumableArray2.default)(prev), [{
+          return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prev), [{
             point1: activeCoordinates,
             matcher: tempMatcher
           }]);
         });
       } else if (isHoldingShiftKey) {
         setContainerHasFocus(true);
-        var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
+        var selectionAreaClone = deepCloneObject.deepCloneObject(selectionAreas);
         var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
           return item.matcher === currentMatcher;
         });
@@ -263,7 +260,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
         setActiveCellInsideSelectionArea(false);
         setActiveCellCoordinates(activeCoordinates);
         // remove all previous cell selections
-        (0, _removeCellSelections.removeCellSelections)({
+        removeCellSelections.removeCellSelections({
           spreadsheetRef: ref
         });
         setSelectionAreas([{
@@ -279,16 +276,16 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
     var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
     headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
   };
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     contentScrollRef.current.addEventListener('scroll', function (event) {
-      return handleBodyScroll(event);
+      return handleBodyScroll();
     });
     var contentScrollElementRef = contentScrollRef.current;
     return function () {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
   });
-  var handleBodyCellHover = (0, _react.useCallback)(function (cell, columnIndex) {
+  var handleBodyCellHover = React.useCallback(function (cell, columnIndex) {
     return function () {
       if (clickAndHoldActive) {
         var cellCoordinates = {
@@ -297,7 +294,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
         };
         setSelectionAreas(function (prev) {
           var _selectionAreaClone$i, _selectionAreaClone$i2;
-          var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
+          var selectionAreaClone = deepCloneObject.deepCloneObject(prev);
           var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
             return item.matcher === currentMatcher;
           });
@@ -316,10 +313,10 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
       }
     };
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
-  var handleRowHeaderClick = (0, _react.useCallback)(function (index) {
+  var handleRowHeaderClick = React.useCallback(function (index) {
     return function (event) {
       var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      (0, _handleHeaderCellSelection.handleHeaderCellSelection)({
+      handleHeaderCellSelection.handleHeaderCellSelection({
         type: 'row',
         activeCellCoordinates: activeCellCoordinates,
         rows: rows,
@@ -337,11 +334,11 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
 
   // Builds the empty rows and calls `onDataUpdate` to set the new empty rows
   // using defaultEmptyRowCount to determine how many empty rows are created.
-  (0, _react.useEffect)(function () {
+  React.useEffect(function () {
     if (!(rows !== null && rows !== void 0 && rows.length)) {
       var buildEmptyRows = function buildEmptyRows() {
         var emptyRowData = [];
-        (0, _toConsumableArray2.default)(Array(defaultEmptyRowCount)).map(function () {
+        _rollupPluginBabelHelpers.toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
           var _headerGroups$;
           var emptyCell = {};
           (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
@@ -355,72 +352,72 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
     }
   }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
   var RenderEmptyRows = function RenderEmptyRows() {
-    return /*#__PURE__*/_react.default.createElement("div", null);
+    return _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null));
   };
 
   // Renders each row/cell in the spreadsheet body
-  var RenderRow = (0, _react.useCallback)(function (_ref3) {
-    var index = _ref3.index,
+  var RenderRow = React.useCallback(function (_ref3) {
+    var index$1 = _ref3.index,
       style = _ref3.style;
-    var row = rows[index];
+    var row = rows[index$1];
     if (rows && rows.length) {
       prepareRow(row);
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, row.getRowProps({
         style: style
       }), {
-        className: (0, _classnames.default)("".concat(blockClass, "__tr")),
-        "data-row-index": index,
-        "aria-rowindex": index + 1,
+        className: index["default"]("".concat(blockClass, "__tr")),
+        "data-row-index": index$1,
+        "aria-rowindex": index$1 + 1,
         "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
         role: "rowheader",
         className: "".concat(blockClass, "__td-th--cell-container")
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        id: "".concat(blockClass, "__cell--").concat(index, "--header"),
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        id: "".concat(blockClass, "__cell--").concat(index$1, "--header"),
         tabIndex: -1,
-        "data-row-index": index,
+        "data-row-index": index$1,
         "data-column-index": "header",
         type: "button",
-        onClick: handleRowHeaderClick(index),
-        className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'row', columns))),
+        onClick: handleRowHeaderClick(index$1),
+        className: index["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$1 || checkActiveHeaderCell.checkActiveHeaderCell(index$1, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell.checkSelectedHeaderCell(index$1, selectionAreas, 'row', columns))),
         style: {
           width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
         }
-      }, index + 1)), row.cells.map(function (cell, index) {
+      }, index$1 + 1)), row.cells.map(function (cell, index$1) {
         var _cell$column;
-        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-          key: "cell_".concat(index),
-          "aria-colindex": index + 1
+        return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+          key: "cell_".concat(index$1),
+          "aria-colindex": index$1 + 1
         }, cell.getCellProps(), {
           role: "gridcell",
-          style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
+          style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cell.getCellProps().style), {}, {
             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.createElement("button", {
-          id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
+        }), /*#__PURE__*/React__default["default"].createElement("button", {
+          id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index$1),
           tabIndex: -1,
           "data-row-index": cell.row.index,
-          "data-column-index": index,
-          className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-          onMouseDown: handleBodyCellClick(cell, index),
-          onMouseOver: handleBodyCellHover(cell, index),
+          "data-column-index": index$1,
+          className: index["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
+          onMouseDown: handleBodyCellClick(cell, index$1),
+          onMouseOver: handleBodyCellHover(cell, index$1),
           onFocus: function onFocus() {},
           type: "button"
         }, cell.render('Cell')));
       }));
     }
   }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
-  var spreadsheetBodyRef = (0, _react.useRef)();
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  var spreadsheetBodyRef = React.useRef();
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,
-    className: (0, _classnames.default)("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps()), /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
-    className: (0, _classnames.default)("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
+    className: index["default"]("".concat(blockClass, "__body--container"))
+  }, getTableBodyProps()), /*#__PURE__*/React__default["default"].createElement(reactWindow.FixedSizeList, {
+    className: index["default"]("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
     itemCount: rows.length || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
-    width: (0, _getSpreadsheetWidth.getSpreadsheetWidth)({
+    width: getSpreadsheetWidth.getSpreadsheetWidth({
       scrollBarSizeValue: scrollBarSize,
       totalVisibleColumns: totalVisibleColumns,
       defaultColumn: defaultColumn,
@@ -434,125 +431,127 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
-  activeCellCoordinates: _propTypes.default.shape({
-    row: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    column: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  activeCellCoordinates: index$1["default"].shape({
+    row: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].number]),
+    column: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].number])
   }),
   /**
    * Is the user clicking and holding in the data spreadsheet body
    */
-  clickAndHoldActive: _propTypes.default.bool,
+  clickAndHoldActive: index$1["default"].bool,
   /**
    * All of the spreadsheet columns
    */
-  columns: _propTypes.default.array,
+  columns: index$1["default"].array,
   /**
    * This represents the id of the current cell selection area
    */
-  currentMatcher: _propTypes.default.string,
+  currentMatcher: index$1["default"].string,
   /**
    * Default spreadsheet sizing values
    */
-  defaultColumn: _propTypes.default.shape({
-    rowHeight: _propTypes.default.number,
-    rowHeaderWidth: _propTypes.default.number,
-    width: _propTypes.default.number
+  defaultColumn: index$1["default"].shape({
+    rowHeight: index$1["default"].number,
+    rowHeaderWidth: index$1["default"].number,
+    width: index$1["default"].number
   }),
   /**
    * Sets the number of empty rows to be created when there is no data provided
    */
-  defaultEmptyRowCount: _propTypes.default.number,
+  defaultEmptyRowCount: index$1["default"].number,
   /**
    * Function to set table body prop values
    */
-  getTableBodyProps: _propTypes.default.func,
+  getTableBodyProps: index$1["default"].func,
   /**
    * Headers provided from useTable hook
    */
-  headerGroups: _propTypes.default.arrayOf(_propTypes.default.object),
+  headerGroups: index$1["default"].arrayOf(index$1["default"].object),
   /**
    * The spreadsheet id
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  id: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
   /**
    * The event handler that is called when the active cell changes
    */
-  onActiveCellChange: _propTypes.default.func,
+  onActiveCellChange: index$1["default"].func,
   /**
    * The event handler that is called to set the rows for the empty spreadsheet
    */
-  onDataUpdate: _propTypes.default.func,
+  onDataUpdate: index$1["default"].func,
   /**
    * The event handler that is called when the selection areas change
    */
-  onSelectionAreaChange: _propTypes.default.func,
+  onSelectionAreaChange: index$1["default"].func,
   /**
    * Prepare row function from react-table
    */
-  prepareRow: _propTypes.default.func,
+  prepareRow: index$1["default"].func,
   /**
    * All of the spreadsheet row data
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object),
+  rows: index$1["default"].arrayOf(index$1["default"].object),
   /**
    * The scrollbar width
    */
-  scrollBarSize: _propTypes.default.number,
+  scrollBarSize: index$1["default"].number,
   /**
    * Array of selection area data
    */
-  selectionAreaData: _propTypes.default.array,
+  selectionAreaData: index$1["default"].array,
   /**
    * Array of selection areas
    */
-  selectionAreas: _propTypes.default.array,
+  selectionAreas: index$1["default"].array,
   /**
    * Setter fn for activeCellCoordinates state value
    */
-  setActiveCellCoordinates: _propTypes.default.func,
+  setActiveCellCoordinates: index$1["default"].func,
   /**
    * Setter fn for active cell inside of selection area
    */
-  setActiveCellInsideSelectionArea: _propTypes.default.func,
+  setActiveCellInsideSelectionArea: index$1["default"].func,
   /**
    * Setter fn for clickAndHold state value
    */
-  setClickAndHoldActive: _propTypes.default.func,
+  setClickAndHoldActive: index$1["default"].func,
   /**
    * Setter fn for column ordering, provided from react-table
    */
-  setColumnOrder: _propTypes.default.func,
+  setColumnOrder: index$1["default"].func,
   /**
    * Setter fn for containerHasFocus state value
    */
-  setContainerHasFocus: _propTypes.default.func,
+  setContainerHasFocus: index$1["default"].func,
   /**
    * Setter fn for currentMatcher state value
    */
-  setCurrentMatcher: _propTypes.default.func,
+  setCurrentMatcher: index$1["default"].func,
   /**
    * Setter fn for header cell hold active value
    */
-  setHeaderCellHoldActive: _propTypes.default.func,
+  setHeaderCellHoldActive: index$1["default"].func,
   /**
    * Setter fn for selectionAreaData state value
    */
-  setSelectionAreaData: _propTypes.default.func,
+  setSelectionAreaData: index$1["default"].func,
   /**
    * Setter fn for selectionAreas state value
    */
-  setSelectionAreas: _propTypes.default.func,
+  setSelectionAreas: index$1["default"].func,
   /**
    * The total columns width
    */
-  totalColumnsWidth: _propTypes.default.number,
+  totalColumnsWidth: index$1["default"].number,
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar
    */
-  totalVisibleColumns: _propTypes.default.number,
+  totalVisibleColumns: index$1["default"].number,
   /**
    * Prop from react-table used to reorder columns
    */
-  visibleColumns: _propTypes.default.array
-};
+  visibleColumns: index$1["default"].array
+};
+
+exports.DataSpreadsheetBody = DataSpreadsheetBody;

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

@@ -0,0 +1,2 @@
+export const DataSpreadsheetHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';