@carbon/ibm-products 2.27.0 → 2.28.0-alpha.4

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactTable = require('react-table');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var settings = require('../../settings.js');
 var DataSpreadsheetBody = require('./DataSpreadsheetBody.js');
 var DataSpreadsheetHeader = require('./DataSpreadsheetHeader.js');
@@ -42,6 +42,7 @@ var useSpreadsheetEdit = require('./hooks/useSpreadsheetEdit.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // cspell:words rowcount colcount
@@ -707,7 +708,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
-    className: index["default"](blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
+    className: cx__default["default"](blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
@@ -781,7 +782,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     onDoubleClick: handleActiveCellDoubleClick,
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
-    className: index["default"]("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
+    className: cx__default["default"]("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
   }, activeCellContent), /*#__PURE__*/React__default["default"].createElement("textarea", {
     id: "".concat(blockClass, "__cell-editor-text-area"),
@@ -805,7 +806,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     },
     ref: cellEditorRef,
     "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
-    className: index["default"]("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
+    className: cx__default["default"]("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/React__default["default"].createElement("pre", {
     "aria-hidden": true,
     ref: cellEditorRulerRef,
@@ -827,60 +828,60 @@ exports.DataSpreadsheet.propTypes = {
   /**
    * Specifies the cell height
    */
-  cellSize: index$1["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  cellSize: index["default"].oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * The data that will build the column headers
    */
-  columns: index$1["default"].arrayOf(index$1["default"].shape({
-    Header: index$1["default"].string,
-    accessor: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].func]),
-    Cell: index$1["default"].func // optional cell formatter
+  columns: index["default"].arrayOf(index["default"].shape({
+    Header: index["default"].string,
+    accessor: index["default"].oneOfType([index["default"].string, index["default"].func]),
+    Cell: index["default"].func // optional cell formatter
   })),
   /**
    * The spreadsheet data that will be rendered in the body of the spreadsheet component
    */
-  data: index$1["default"].arrayOf(index$1["default"].shape),
+  data: index["default"].arrayOf(index["default"].shape),
   /**
    * Sets the number of empty rows to be created when there is no data provided
    */
-  defaultEmptyRowCount: index$1["default"].number,
+  defaultEmptyRowCount: index["default"].number,
   /**
    * The spreadsheet id
    */
-  id: index$1["default"].oneOfType([index$1["default"].number, index$1["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$1["default"].func,
+  onActiveCellChange: index["default"].func,
   /**
    * The setter fn for the data prop
    */
-  onDataUpdate: index$1["default"].func,
+  onDataUpdate: index["default"].func,
   /**
    * The event handler that is called when the selection area values change
    */
-  onSelectionAreaChange: index$1["default"].func,
+  onSelectionAreaChange: index["default"].func,
   /**
    * The aria label applied to the Select all button
    */
-  selectAllAriaLabel: index$1["default"].string.isRequired,
+  selectAllAriaLabel: index["default"].string.isRequired,
   /**
    * The aria label applied to the Data spreadsheet component
    */
-  spreadsheetAriaLabel: index$1["default"].string.isRequired,
+  spreadsheetAriaLabel: index["default"].string.isRequired,
   /**
    * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
    */
-  theme: index$1["default"].oneOf(['light', 'dark']),
+  theme: index["default"].oneOf(['light', 'dark']),
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar
    */
-  totalVisibleColumns: index$1["default"].number
+  totalVisibleColumns: index["default"].number
 
   /* TODO: add types and DocGen for all props. */
 };

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -11,9 +11,9 @@ 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 index = require('../../node_modules/prop-types/index.js');
 var reactWindow = require('react-window');
-var index = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var layout = require('@carbon/layout');
 var settings = require('../../settings.js');
 var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
@@ -31,6 +31,7 @@ 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");
@@ -358,37 +359,37 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // Renders each row/cell in the spreadsheet body
   var RenderRow = React.useCallback(function (_ref3) {
-    var index$1 = _ref3.index,
+    var index = _ref3.index,
       style = _ref3.style;
-    var row = rows[index$1];
+    var row = rows[index];
     if (rows && rows.length) {
       prepareRow(row);
       return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, row.getRowProps({
         style: style
       }), {
-        className: index["default"]("".concat(blockClass, "__tr")),
-        "data-row-index": index$1,
-        "aria-rowindex": index$1 + 1,
+        className: cx__default["default"]("".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", {
         role: "rowheader",
         className: "".concat(blockClass, "__td-th--cell-container")
       }, /*#__PURE__*/React__default["default"].createElement("button", {
-        id: "".concat(blockClass, "__cell--").concat(index$1, "--header"),
+        id: "".concat(blockClass, "__cell--").concat(index, "--header"),
         tabIndex: -1,
-        "data-row-index": index$1,
+        "data-row-index": index,
         "data-column-index": "header",
         type: "button",
-        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))),
+        onClick: handleRowHeaderClick(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))),
         style: {
           width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
         }
-      }, index$1 + 1)), row.cells.map(function (cell, index$1) {
+      }, index + 1)), row.cells.map(function (cell, index) {
         var _cell$column;
         return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-          key: "cell_".concat(index$1),
-          "aria-colindex": index$1 + 1
+          key: "cell_".concat(index),
+          "aria-colindex": index + 1
         }, cell.getCellProps(), {
           role: "gridcell",
           style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cell.getCellProps().style), {}, {
@@ -396,13 +397,13 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             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", {
-          id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index$1),
+          id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
           tabIndex: -1,
           "data-row-index": cell.row.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),
+          "data-column-index": index,
+          className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
+          onMouseDown: handleBodyCellClick(cell, index),
+          onMouseOver: handleBodyCellHover(cell, index),
           onFocus: function onFocus() {},
           type: "button"
         }, cell.render('Cell')));
@@ -412,9 +413,9 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var spreadsheetBodyRef = React.useRef();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,
-    className: index["default"]("".concat(blockClass, "__body--container"))
+    className: cx__default["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)),
+    className: cx__default["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,
@@ -432,127 +433,127 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
-  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])
+  activeCellCoordinates: index["default"].shape({
+    row: index["default"].oneOfType([index["default"].string, index["default"].number]),
+    column: index["default"].oneOfType([index["default"].string, index["default"].number])
   }),
   /**
    * Is the user clicking and holding in the data spreadsheet body
    */
-  clickAndHoldActive: index$1["default"].bool,
+  clickAndHoldActive: index["default"].bool,
   /**
    * All of the spreadsheet columns
    */
-  columns: index$1["default"].array,
+  columns: index["default"].array,
   /**
    * This represents the id of the current cell selection area
    */
-  currentMatcher: index$1["default"].string,
+  currentMatcher: index["default"].string,
   /**
    * Default spreadsheet sizing values
    */
-  defaultColumn: index$1["default"].shape({
-    rowHeight: index$1["default"].number,
-    rowHeaderWidth: index$1["default"].number,
-    width: index$1["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$1["default"].number,
+  defaultEmptyRowCount: index["default"].number,
   /**
    * Function to set table body prop values
    */
-  getTableBodyProps: index$1["default"].func,
+  getTableBodyProps: index["default"].func,
   /**
    * Headers provided from useTable hook
    */
-  headerGroups: index$1["default"].arrayOf(index$1["default"].object),
+  headerGroups: index["default"].arrayOf(index["default"].object),
   /**
    * The spreadsheet id
    */
-  id: index$1["default"].oneOfType([index$1["default"].number, index$1["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$1["default"].func,
+  onActiveCellChange: index["default"].func,
   /**
    * The event handler that is called to set the rows for the empty spreadsheet
    */
-  onDataUpdate: index$1["default"].func,
+  onDataUpdate: index["default"].func,
   /**
    * The event handler that is called when the selection areas change
    */
-  onSelectionAreaChange: index$1["default"].func,
+  onSelectionAreaChange: index["default"].func,
   /**
    * Prepare row function from react-table
    */
-  prepareRow: index$1["default"].func,
+  prepareRow: index["default"].func,
   /**
    * All of the spreadsheet row data
    */
-  rows: index$1["default"].arrayOf(index$1["default"].object),
+  rows: index["default"].arrayOf(index["default"].object),
   /**
    * The scrollbar width
    */
-  scrollBarSize: index$1["default"].number,
+  scrollBarSize: index["default"].number,
   /**
    * Array of selection area data
    */
-  selectionAreaData: index$1["default"].array,
+  selectionAreaData: index["default"].array,
   /**
    * Array of selection areas
    */
-  selectionAreas: index$1["default"].array,
+  selectionAreas: index["default"].array,
   /**
    * Setter fn for activeCellCoordinates state value
    */
-  setActiveCellCoordinates: index$1["default"].func,
+  setActiveCellCoordinates: index["default"].func,
   /**
    * Setter fn for active cell inside of selection area
    */
-  setActiveCellInsideSelectionArea: index$1["default"].func,
+  setActiveCellInsideSelectionArea: index["default"].func,
   /**
    * Setter fn for clickAndHold state value
    */
-  setClickAndHoldActive: index$1["default"].func,
+  setClickAndHoldActive: index["default"].func,
   /**
    * Setter fn for column ordering, provided from react-table
    */
-  setColumnOrder: index$1["default"].func,
+  setColumnOrder: index["default"].func,
   /**
    * Setter fn for containerHasFocus state value
    */
-  setContainerHasFocus: index$1["default"].func,
+  setContainerHasFocus: index["default"].func,
   /**
    * Setter fn for currentMatcher state value
    */
-  setCurrentMatcher: index$1["default"].func,
+  setCurrentMatcher: index["default"].func,
   /**
    * Setter fn for header cell hold active value
    */
-  setHeaderCellHoldActive: index$1["default"].func,
+  setHeaderCellHoldActive: index["default"].func,
   /**
    * Setter fn for selectionAreaData state value
    */
-  setSelectionAreaData: index$1["default"].func,
+  setSelectionAreaData: index["default"].func,
   /**
    * Setter fn for selectionAreas state value
    */
-  setSelectionAreas: index$1["default"].func,
+  setSelectionAreas: index["default"].func,
   /**
    * The total columns width
    */
-  totalColumnsWidth: index$1["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$1["default"].number,
+  totalVisibleColumns: index["default"].number,
   /**
    * Prop from react-table used to reorder columns
    */
-  visibleColumns: index$1["default"].array
+  visibleColumns: index["default"].array
 };
 
 exports.DataSpreadsheetBody = DataSpreadsheetBody;

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -11,8 +11,8 @@ 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 index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var layout = require('@carbon/layout');
 var settings = require('../../settings.js');
 var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
@@ -27,6 +27,7 @@ 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) {
@@ -139,11 +140,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultColumn: defaultColumn
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__header--container")),
+    className: cx__default["default"]("".concat(blockClass, "__header--container")),
     role: "rowgroup"
-  }, headerGroups.map(function (headerGroup, index$1) {
+  }, headerGroups.map(function (headerGroup, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-      key: "header_".concat(index$1)
+      key: "header_".concat(index)
     }, headerGroup.getHeaderGroupProps(), {
       style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
         width: getSpreadsheetWidth.getSpreadsheetWidth({
@@ -172,28 +173,28 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
-      className: index["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'))
-    }, "\xA0")), headerGroup.headers.map(function (column, index$1) {
-      var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index$1, selectionAreas, 'column', rows);
+      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'))
+    }, "\xA0")), headerGroup.headers.map(function (column, index) {
+      var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-        key: "column_".concat(index$1),
+        key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
       }, column.getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("button", {
-        id: "".concat(blockClass, "__cell--header--").concat(index$1),
+        id: "".concat(blockClass, "__cell--header--").concat(index),
         "data-row-index": "header",
-        "data-column-index": index$1,
+        "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index$1) : null,
+        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
         onMouseUp: selectedHeader ? function () {
           return setSelectedHeaderReorderActive(false);
         } : null,
-        onClick: !selectedHeader ? handleColumnHeaderClick(index$1) : null,
+        onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
         style: {
           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: index["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$1 || checkActiveHeaderCell.checkActiveHeaderCell(index$1, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        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)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -203,87 +204,87 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
-  activeCellCoordinates: index$1["default"].shape({
-    row: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-    column: index$1["default"].oneOfType([index$1["default"].number, index$1["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$1["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  cellSize: index["default"].oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * All of the spreadsheet columns
    */
-  columns: index$1["default"].array,
+  columns: index["default"].array,
   /**
    * uuid that corresponds to the current selection area
    */
-  currentMatcher: index$1["default"].string,
+  currentMatcher: index["default"].string,
   /**
    * Default spreadsheet sizing values
    */
-  defaultColumn: index$1["default"].shape({
-    rowHeight: index$1["default"].number,
-    rowHeaderWidth: index$1["default"].number,
-    width: index$1["default"].number
+  defaultColumn: index["default"].shape({
+    rowHeight: index["default"].number,
+    rowHeaderWidth: index["default"].number,
+    width: index["default"].number
   }),
   /**
    * Whether or not a click/hold is active on a header cell
    */
-  headerCellHoldActive: index$1["default"].bool,
+  headerCellHoldActive: index["default"].bool,
   /**
    * Headers provided from useTable hook
    */
-  headerGroups: index$1["default"].arrayOf(index$1["default"].object),
+  headerGroups: index["default"].arrayOf(index["default"].object),
   /**
    * All of the spreadsheet row data
    */
-  rows: index$1["default"].arrayOf(index$1["default"].object),
+  rows: index["default"].arrayOf(index["default"].object),
   /**
    * The scrollbar width
    */
-  scrollBarSize: index$1["default"].number,
+  scrollBarSize: index["default"].number,
   /**
    * The aria label applied to the Select all button
    */
-  selectAllAriaLabel: index$1["default"].string.isRequired,
+  selectAllAriaLabel: index["default"].string.isRequired,
   /**
    * All of the cell selection area items
    */
-  selectionAreas: index$1["default"].arrayOf(index$1["default"].object),
+  selectionAreas: index["default"].arrayOf(index["default"].object),
   /**
    * Setter fn for activeCellCoordinates value
    */
-  setActiveCellCoordinates: index$1["default"].func,
+  setActiveCellCoordinates: index["default"].func,
   /**
    * Setter fn for currentMatcher value
    */
-  setCurrentMatcher: index$1["default"].func,
+  setCurrentMatcher: index["default"].func,
   /**
    * Setter fn for header cell hold active value
    */
-  setHeaderCellHoldActive: index$1["default"].func,
+  setHeaderCellHoldActive: index["default"].func,
   /**
    * Setter fn for selectionAreaData state value
    */
-  setSelectionAreaData: index$1["default"].func,
+  setSelectionAreaData: index["default"].func,
   /**
    * Setter fn for selectionAreas value
    */
-  setSelectionAreas: index$1["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$1["default"].number,
+  totalVisibleColumns: index["default"].number,
   /**
    * Function used to update the active cell coordinates
    */
-  updateActiveCellCoordinates: index$1["default"].func,
+  updateActiveCellCoordinates: index["default"].func,
   /**
    * Array of visible columns provided by react-table useTable hook
    */
-  visibleColumns: index$1["default"].array
+  visibleColumns: index["default"].array
 };
 
 exports.DataSpreadsheetHeader = DataSpreadsheetHeader;

package/lib/components/Datagrid/Datagrid/Datagrid.js

@@ -11,8 +11,8 @@ 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 index = require('../../../node_modules/classnames/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../../global/js/utils/devtools.js');
 var settings = require('../../../settings.js');
 var pconsole = require('../../../global/js/utils/pconsole.js');
@@ -23,6 +23,7 @@ var InlineEditContext = require('./addons/InlineEdit/InlineEditContext/InlineEdi
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
@@ -59,7 +60,7 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
   }, /*#__PURE__*/React__default["default"].createElement(InlineEditContext.InlineEditProvider, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     id: tableId,
     ref: ref,
-    className: index["default"](className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
+    className: cx__default["default"](className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, devtools.getDevtoolsProps(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
   }, /*#__PURE__*/React__default["default"].createElement(DatagridContent.DatagridContent, props)) : /*#__PURE__*/React__default["default"].createElement(DatagridContent.DatagridContent, props))));
@@ -76,13 +77,13 @@ exports.Datagrid.propTypes = {
    * Specify a label to be read by screen readers on the container node
    * 'aria-label' of the TableToolbar component.
    */
-  ariaToolbarLabel: index$1["default"].string,
+  ariaToolbarLabel: index["default"].string,
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
-  datagridState: index$1["default"].object.isRequired,
+  datagridState: index["default"].object.isRequired,
   /**
    * Table title
    */
-  title: index$1["default"].string
+  title: index["default"].string
 };