@carbon/ibm-products 1.25.1 → 1.31.0

package/es/components/AddSelect/AddSelectFilter.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState } from 'react';
-import { Button, ButtonSet, Dropdown, TextInput, Tag } from 'carbon-components-react';
+import { Button, ButtonSet, Dropdown, Search, Tag } from 'carbon-components-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Filter16 } from '@carbon/icons-react';
@@ -93,7 +93,7 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-search")
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(Search, {
     id: "temp-id",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
@@ -108,7 +108,8 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "md"
+    size: "lg",
+    tooltipPosition: "left"
   }), open && /*#__PURE__*/React.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React.createElement("div", {

package/es/components/AddSelect/AddSelectList.js

@@ -7,7 +7,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Button, Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell, Dropdown } from 'carbon-components-react';
+import { Button, Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, Dropdown } from 'carbon-components-react';
 import { ChevronRight16, View16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -19,6 +19,7 @@ export var AddSelectList = function AddSelectList(_ref) {
   var _modifiers$options;
 
   var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
       filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
@@ -38,8 +39,8 @@ export var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(id, checked) {
-    if (checked) {
+  var handleMultiSelection = function handleMultiSelection(value, id) {
+    if (value) {
       var newValues = [].concat(_toConsumableArray(multiSelection), [id]);
       setMultiSelection(newValues);
     } else {
@@ -58,7 +59,11 @@ export var AddSelectList = function AddSelectList(_ref) {
   };
 
   var isSelected = function isSelected(id) {
-    return multiSelection.includes(id);
+    if (multi) {
+      return multiSelection.includes(id);
+    }
+
+    return id === singleSelection;
   };
 
   var getAvatarProps = function getAvatarProps(_ref3) {
@@ -94,30 +99,53 @@ export var AddSelectList = function AddSelectList(_ref) {
     setAppliedModifiers(modifiersClone);
   };
 
+  var metaPanelHandler = function metaPanelHandler(item) {
+    if (item.meta) {
+      setDisplayMetaPanel(item);
+    }
+  };
+
+  var isInMetaPanel = function isInMetaPanel(id) {
+    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-wrapper")
+    className: cx("".concat(blockClass, "-wrapper"), _defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
+    var _cx2;
+
     return /*#__PURE__*/React.createElement(StructuredListRow, {
       key: item.id,
-      className: cx("".concat(blockClass, "-row"), _defineProperty({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
-    }, /*#__PURE__*/React.createElement(StructuredListCell, {
+      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row-selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta-selected"), isInMetaPanel(item.id)), _cx2)),
+      onClick: function onClick(evt) {
+        return metaPanelHandler(item, evt);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
+    },
+    /*#__PURE__*/
+    // hacky way to prevent checkbox from triggering the meta onclick handler
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      onChange: function onChange(checked) {
-        return handleMultiSelection(item.id, checked);
+      onChange: function onChange(value, id) {
+        return handleMultiSelection(value, id);
       },
       labelText: item.title,
       id: item.id,
       checked: isSelected(item.id),
       className: "".concat(blockClass, "-checkbox-wrapper")
-    }), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-checkbox-label-wrapper")
     }, item.avatar && /*#__PURE__*/React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell-icon")
@@ -149,7 +177,7 @@ export var AddSelectList = function AddSelectList(_ref) {
       onChange: function onChange() {
         return handleSingleSelection(item.id);
       },
-      selected: item.id === singleSelection
+      checked: isSelected(item.id)
     }), item.children && /*#__PURE__*/React.createElement(Button, {
       className: "".concat(blockClass, "-view-children"),
       renderIcon: ChevronRight16,
@@ -171,9 +199,6 @@ export var AddSelectList = function AddSelectList(_ref) {
       tooltipPosition: "left",
       tooltipAlignment: "center",
       hasIconOnly: true,
-      onClick: function onClick() {
-        return setDisplayMetaPanel(item);
-      },
       kind: "ghost",
       size: "sm"
     })))));
@@ -181,6 +206,7 @@ export var AddSelectList = function AddSelectList(_ref) {
 };
 AddSelectList.propTypes = {
   appliedModifiers: PropTypes.array,
+  displayMetalPanel: PropTypes.object,
   filteredItems: PropTypes.array,
   metaIconDescription: PropTypes.string,
   modifiers: PropTypes.object,

package/es/components/Card/Card.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
     _excluded3 = ["id", "icon", "onClick", "iconDescription", "onKeyDown", "href"];
 
@@ -31,6 +31,7 @@ var defaults = {
   mediaPosition: 'top',
   overflowActions: Object.freeze([]),
   primaryButtonKind: 'primary',
+  primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
   titleSize: 'default'
@@ -60,6 +61,8 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      _ref$primaryButtonPla = _ref.primaryButtonPlacement,
+      primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -74,9 +77,9 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var blockClass = "".concat(pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0;
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
-  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText;
+  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
   var hasClickEvent = !!onClick || !!onKeyDown;
   var clickableProps = {
@@ -177,10 +180,15 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var getHeaderProps = function getHeaderProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'top' ? getActions() : '',
+      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
+      onPrimaryButtonClick: onPrimaryButtonClick,
+      primaryButtonIcon: primaryButtonIcon,
+      primaryButtonPlacement: primaryButtonPlacement,
+      primaryButtonText: primaryButtonText,
       description: description,
-      hasActions: hasActions && actionsPlacement === 'top',
+      hasActions: hasActions,
       label: label,
       title: title,
       titleSize: titleSize
@@ -199,7 +207,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var getFooterProps = function getFooterProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
@@ -208,6 +216,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       primaryButtonHref: primaryButtonHref,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonKind: primaryButtonKind,
+      primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       productive: productive,
       secondaryButtonHref: secondaryButtonHref,
@@ -256,6 +265,7 @@ Card.propTypes = {
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   primaryButtonText: PropTypes.node,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,

package/es/components/Card/CardFooter.js

@@ -28,6 +28,7 @@ export var CardFooter = function CardFooter(_ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -47,7 +48,7 @@ export var CardFooter = function CardFooter(_ref) {
     size: "field",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/React.createElement(Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/React.createElement(Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "field",
@@ -66,6 +67,7 @@ CardFooter.propTypes = {
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.string,
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   primaryButtonText: PropTypes.string,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,

package/es/components/Card/CardHeader.js

@@ -9,6 +9,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { pkg } from '../../settings';
+import { Button } from 'carbon-components-react';
 var componentName = 'CardHeader';
 var defaults = {
   hasActions: false,
@@ -18,6 +19,11 @@ export var CardHeader = function CardHeader(_ref) {
   var _cx;
 
   var actions = _ref.actions,
+      noActionIcons = _ref.noActionIcons,
+      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+      primaryButtonIcon = _ref.primaryButtonIcon,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
+      primaryButtonText = _ref.primaryButtonText,
       description = _ref.description,
       _ref$hasActions = _ref.hasActions,
       hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
@@ -28,6 +34,8 @@ export var CardHeader = function CardHeader(_ref) {
   var blockClass = "".concat(pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = cx(headerClass, (_cx = {}, _defineProperty(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), _defineProperty(_cx, "".concat(headerClass, "-has-label"), !!label), _defineProperty(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
+  var actionGhostButtonClass = cx(actionGhostButton, _defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   return /*#__PURE__*/React.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React.createElement("div", {
@@ -42,13 +50,24 @@ export var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions)));
+  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "small",
+    renderIcon: primaryButtonIcon,
+    onClick: onPrimaryButtonClick,
+    className: actionGhostButtonClass
+  }, primaryButtonText))));
 };
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
   description: PropTypes.string,
   hasActions: PropTypes.bool,
   label: PropTypes.string,
+  noActionIcons: PropTypes.bool,
+  onPrimaryButtonClick: PropTypes.func,
+  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  primaryButtonText: PropTypes.string,
   title: PropTypes.string,
   titleSize: PropTypes.oneOf(['default', 'large'])
 };

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -39,7 +39,8 @@ import { removeCellSelections } from './utils/removeCellSelections';
 import { selectAllCells } from './utils/selectAllCells';
 import { handleEditSubmit } from './utils/handleEditSubmit';
 import { handleActiveCellInSelectionEnter } from './utils/handleActiveCellInSelectionEnter';
-import { handleActiveCellInSelectionTab } from './utils/handleActiveCellInSelectionTab'; // cspell:words rowcount colcount
+import { handleActiveCellInSelectionTab } from './utils/handleActiveCellInSelectionTab';
+import { handleCellDeletion } from './utils/handleCellDeletion'; // cspell:words rowcount colcount
 // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
@@ -52,13 +53,16 @@ var defaults = {
   defaultEmptyRowCount: 16,
   onDataUpdate: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
-  onSelectionAreaChange: Object.freeze(function () {})
+  onSelectionAreaChange: Object.freeze(function () {}),
+  theme: 'light'
 };
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 
 export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _cx;
+
   var _ref$cellSize = _ref.cellSize,
       cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
       className = _ref.className,
@@ -75,6 +79,9 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
       _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
       onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+      selectAllAriaLabel = _ref.selectAllAriaLabel,
+      spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
+      theme = _ref.theme,
       totalVisibleColumns = _ref.totalVisibleColumns,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -182,11 +189,11 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       visibleColumns = _useTable.visibleColumns; // Update the spreadsheet data after editing a cell
 
 
-  var updateData = useCallback(function (rowIndex, columnId) {
+  var updateData = useCallback(function (rowIndex, columnId, newValue) {
     onDataUpdate(function (prev) {
       return prev.map(function (row, index) {
         if (index === rowIndex) {
-          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, cellEditorValue));
+          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, cellEditorValue || newValue));
         }
 
         return row;
@@ -374,13 +381,34 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
         setCurrentMatcher: setCurrentMatcher,
         usingMac: usingMac
       });
-    } // Allow arrow key navigation if there are less than two activeKeys OR
-    // if one of the activeCellCoordinates is in a header position
+    }
 
+    var deleteParams = {
+      selectionAreas: selectionAreas,
+      currentMatcher: currentMatcher,
+      rows: rows,
+      setActiveCellContent: setActiveCellContent,
+      updateData: updateData
+    }; // Allow arrow key navigation if there are less than two activeKeys OR
+    // if one of the activeCellCoordinates is in a header position
 
     if (keysPressedList.length < 2 && !includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
       switch (key) {
+        // Backspace
+        case 'Backspace':
+          {
+            handleCellDeletion(deleteParams);
+            break;
+          }
+        // Delete
+
+        case 'Delete':
+          {
+            handleCellDeletion(deleteParams);
+            break;
+          }
         // Enter
+
         case 'Enter':
           {
             handleActiveCellInSelectionEnter({
@@ -578,7 +606,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
           }
       }
     }
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac]);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData]);
 
   var startEditMode = function startEditMode() {
     setIsEditing(true);
@@ -614,6 +642,11 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
 
     return;
+  }; // Mouse up on active cell
+
+
+  var handleActiveCellMouseUp = function handleActiveCellMouseUp() {
+    setClickAndHoldActive(false);
   }; // Mouse down on active cell
 
 
@@ -752,12 +785,13 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
   }, [spreadsheetRef, currentMatcher]);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
-    className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
+    className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__container-has-focus"), containerHasFocus), _defineProperty(_cx, "".concat(blockClass, "__").concat(theme), theme === 'dark'), _cx)),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
     "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
     "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
+    "aria-label": spreadsheetAriaLabel,
     onKeyDown: handleKeyPress,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
@@ -783,7 +817,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
     headerCellHoldActive: headerCellHoldActive,
-    visibleColumns: visibleColumns
+    visibleColumns: visibleColumns,
+    selectAllAriaLabel: selectAllAriaLabel
   }), /*#__PURE__*/React.createElement(DataSpreadsheetBody, {
     activeCellCoordinates: activeCellCoordinates,
     ref: spreadsheetRef,
@@ -818,6 +853,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     visibleColumns: visibleColumns
   }), /*#__PURE__*/React.createElement("button", {
     onMouseDown: handleActiveCellMouseDown,
+    onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
     onDoubleClick: handleActiveCellDoubleClick,
@@ -846,7 +882,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     },
     ref: cellEditorRef,
     labelText: "",
-    "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,
+    "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: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/React.createElement("pre", {
     "aria-hidden": true,
@@ -913,6 +949,21 @@ DataSpreadsheet.propTypes = {
    */
   onSelectionAreaChange: PropTypes.func,
 
+  /**
+   * The aria label applied to the Select all button
+   */
+  selectAllAriaLabel: PropTypes.string.isRequired,
+
+  /**
+   * The aria label applied to the Data spreadsheet component
+   */
+  spreadsheetAriaLabel: PropTypes.string.isRequired,
+
+  /**
+   * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+   */
+  theme: PropTypes.oneOf(['light', 'dark']),
+
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -43,6 +43,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
       setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
       headerCellHoldActive = _ref.headerCellHoldActive,
+      selectAllAriaLabel = _ref.selectAllAriaLabel,
       visibleColumns = _ref.visibleColumns;
 
   var _useState = useState(0),
@@ -175,6 +176,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       "data-column-index": "header",
       type: "button",
       tabIndex: -1,
+      "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
       className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _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) {
@@ -258,6 +260,11 @@ DataSpreadsheetHeader.propTypes = {
    */
   scrollBarSize: PropTypes.number,
 
+  /**
+   * The aria label applied to the Select all button
+   */
+  selectAllAriaLabel: PropTypes.string.isRequired,
+
   /**
    * All of the cell selection area items
    */

package/es/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
+import { rangeWithCallback } from '../../../global/js/utils/rangeWithCallback';
+export var handleCellDeletion = function handleCellDeletion(_ref) {
+  var selectionAreas = _ref.selectionAreas,
+      currentMatcher = _ref.currentMatcher,
+      rows = _ref.rows,
+      setActiveCellContent = _ref.setActiveCellContent,
+      updateData = _ref.updateData;
+  var selectionAreaClone = deepCloneObject(selectionAreas);
+  var indexOfCurrentSelectionArea = selectionAreaClone.findIndex(function (item) {
+    return item.matcher === currentMatcher;
+  });
+  var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
+  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
+  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
+  var lowestRowIndex = Math.min(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
+  var greatestRowIndex = Math.max(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
+  rangeWithCallback(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
+    rangeWithCallback(lowestRowIndex, greatestRowIndex, function (rowIndex) {
+      var cellProps = rows[rowIndex].cells[columnIndex];
+      updateData(rowIndex, cellProps === null || cellProps === void 0 ? void 0 : cellProps.column.id, '');
+    });
+  });
+  setActiveCellContent(null);
+};

package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js

@@ -288,7 +288,7 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
     } else {
       setTimeout(function () {
         updateToLastCell();
-      }, 1);
+      }, 1000);
     }
   }
 };

package/es/components/Datagrid/Datagrid/Datagrid.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["datagridState"];
 
@@ -11,21 +10,15 @@ var _excluded = ["datagridState"];
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DataTable } from 'carbon-components-react';
 import cx from 'classnames';
-import DatagridHead from './DatagridHead';
-import DatagridBody from './DatagridBody';
-import DatagridToolbar from './DatagridToolbar';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import pconsole from '../../../global/js/utils/pconsole';
+import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext';
+import { DatagridContent } from './DatagridContent';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
-var TableContainer = DataTable.TableContainer,
-    Table = DataTable.Table;
 export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _getTableProps;
-
   var datagridState = _ref.datagridState,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -34,45 +27,24 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return null;
   }
 
-  var _datagridState$getTab = datagridState.getTableProps,
-      getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
-      withVirtualScroll = datagridState.withVirtualScroll,
+  var withVirtualScroll = datagridState.withVirtualScroll,
       DatagridPagination = datagridState.DatagridPagination,
       isFetching = datagridState.isFetching,
       tableId = datagridState.tableId,
-      CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
       leftPanel = datagridState.leftPanel,
-      fullHeightDatagrid = datagridState.fullHeightDatagrid,
-      _datagridState$vertic = datagridState.verticalAlign,
-      verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
-      variableRowHeight = datagridState.variableRowHeight,
-      className = datagridState.className,
-      gridTitle = datagridState.gridTitle,
-      gridDescription = datagridState.gridDescription,
-      useDenseHeader = datagridState.useDenseHeader;
+      className = datagridState.className;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  var dataGrid = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
-    className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : ''),
-    title: gridTitle,
-    description: gridDescription
-  }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__table-container")
-  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__datagridLeftPanel")
-  }, leftPanel.panelContent), /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
-    className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className)
-  }), /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
-    rows: rows
-  }))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
-    instance: datagridState
-  }));
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     id: tableId,
     ref: ref,
     className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, getDevtoolsProps(componentName)), leftPanel && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex ").concat(blockClass, "__leftPanel-position")
-  }, dataGrid), leftPanel === undefined && dataGrid);
+  }, /*#__PURE__*/React.createElement(DatagridContent, {
+    datagridState: datagridState
+  })), leftPanel === undefined && /*#__PURE__*/React.createElement(DatagridContent, {
+    datagridState: datagridState
+  })));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName); // The display name of the component, used by React. Note that displayName