@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.3

package/lib/components/AddSelect/AddSelectList.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -40,6 +40,7 @@ var AddSelectList = function AddSelectList(_ref) {
   var _modifiers$options;
 
   var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
       filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
@@ -59,7 +60,10 @@ var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(id, checked) {
+  var handleMultiSelection = function handleMultiSelection(event, _ref2) {
+    var checked = _ref2.checked,
+        id = _ref2.id;
+
     if (checked) {
       var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [id]);
       setMultiSelection(newValues);
@@ -72,21 +76,25 @@ var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
-  var onNavigateItem = function onNavigateItem(_ref2) {
-    var id = _ref2.id,
-        title = _ref2.title;
+  var onNavigateItem = function onNavigateItem(_ref3) {
+    var id = _ref3.id,
+        title = _ref3.title;
     setParentSelected(id, title, parentId);
   };
 
   var isSelected = function isSelected(id) {
-    return multiSelection.includes(id);
+    if (multi) {
+      return multiSelection.includes(id);
+    }
+
+    return id === singleSelection;
   };
 
-  var getAvatarProps = function getAvatarProps(_ref3) {
-    var src = _ref3.src,
-        alt = _ref3.alt,
-        icon = _ref3.icon,
-        backgroundColor = _ref3.backgroundColor;
+  var getAvatarProps = function getAvatarProps(_ref4) {
+    var src = _ref4.src,
+        alt = _ref4.alt,
+        icon = _ref4.icon,
+        backgroundColor = _ref4.backgroundColor;
     return {
       className: "".concat(blockClass, "-cell-avatar"),
       size: 'lg',
@@ -98,8 +106,8 @@ var AddSelectList = function AddSelectList(_ref) {
     };
   };
 
-  var getItemIcon = function getItemIcon(_ref4) {
-    var Icon = _ref4.icon;
+  var getItemIcon = function getItemIcon(_ref5) {
+    var Icon = _ref5.icon;
     return /*#__PURE__*/_react.default.createElement(Icon, null);
   };
 
@@ -114,31 +122,59 @@ 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.default.createElement("div", {
-    className: "".concat(blockClass, "-wrapper")
+    className: (0, _classnames.default)("".concat(blockClass, "-wrapper"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListBody, null, filteredItems.map(function (item) {
+    var _cx2;
+
     return /*#__PURE__*/_react.default.createElement(_react2.StructuredListRow, {
       key: item.id,
-      className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
-    }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListCell, {
-      className: "".concat(blockClass, "-cell")
+      className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-meta-selected"), isInMetaPanel(item.id)), _cx2)),
+      onClick: function onClick(evt) {
+        return metaPanelHandler(item, evt);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-cell"),
+      onClick: function onClick() {
+        metaPanelHandler(item);
+      },
+      onKeyDown: function onKeyDown() {
+        metaPanelHandler(item);
+      },
+      role: "button",
+      tabIndex: "0"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.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.default.createElement("div", {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
     }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      onChange: function onChange(event, _ref5) {
-        var checked = _ref5.checked;
-        return handleMultiSelection(item.id, checked);
-      },
+      onChange: handleMultiSelection,
       labelText: item.title,
       id: item.id,
       checked: isSelected(item.id),
       className: "".concat(blockClass, "-checkbox-wrapper")
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox-label-wrapper")
     }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-icon")
@@ -170,11 +206,11 @@ var AddSelectList = function AddSelectList(_ref) {
       onChange: function onChange() {
         return handleSingleSelection(item.id);
       },
-      selected: item.id === singleSelection
+      checked: isSelected(item.id)
     }), item.children && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       className: "".concat(blockClass, "-view-children"),
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, (0, _extends2.default)({
           size: 16
         }, props));
       },
@@ -192,7 +228,7 @@ var AddSelectList = function AddSelectList(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
       className: "".concat(blockClass, "-view-meta"),
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.View, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.View, (0, _extends2.default)({
           size: 16
         }, props));
       },
@@ -200,9 +236,6 @@ var AddSelectList = function AddSelectList(_ref) {
       tooltipPosition: "left",
       tooltipAlignment: "center",
       hasIconOnly: true,
-      onClick: function onClick() {
-        return setDisplayMetaPanel(item);
-      },
       kind: "ghost",
       size: "sm"
     })))));
@@ -212,6 +245,7 @@ var AddSelectList = function AddSelectList(_ref) {
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
   appliedModifiers: _propTypes.default.array,
+  displayMetalPanel: _propTypes.default.object,
   filteredItems: _propTypes.default.array,
   metaIconDescription: _propTypes.default.string,
   modifiers: _propTypes.default.object,

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
@@ -46,7 +46,7 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     className: "".concat(blockClass, "-title")
   }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
         size: 16
       }, props));
     },

package/lib/components/AddSelect/AddSelectSort.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../settings");
 
@@ -38,14 +38,14 @@ var AddSelectSort = function AddSelectSort(_ref) {
   var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp, {
+      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.ArrowUp, {
         size: 16
       }), cur),
       direction: 'asc',
       attribute: cur
     }, {
       id: "".concat(cur, "-desc"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown, {
+      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.ArrowDown, {
         size: 16
       }), cur),
       direction: 'desc',
@@ -65,7 +65,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
     className: blockClass
   }, sortByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, (0, _extends2.default)({
         size: 32
       }, props));
     },

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -23,13 +23,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _reactResizeDetector = require("react-resize-detector");
+
 var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
-var _reactResizeDetector = require("react-resize-detector");
-
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
@@ -97,7 +97,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.OverflowMenuHorizontal, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.OverflowMenuHorizontal, (0, _extends2.default)({
           size: 32
         }, props));
       },
@@ -126,7 +126,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
       ariaLabel: overflowAriaLabel,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.OverflowMenuHorizontal, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.OverflowMenuHorizontal, (0, _extends2.default)({
           size: 32
         }, props));
       }
@@ -316,7 +316,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
         label: backItem.title || backItem.label,
         align: "right"
-      }, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, {
+      }, /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, {
         size: 16
       }));
     }

package/lib/components/Card/Card.js

@@ -29,7 +29,7 @@ var _CardFooter = require("./CardFooter");
 
 var _settings = require("../../settings");
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "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", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
     _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 
@@ -50,6 +50,7 @@ var defaults = {
   mediaPosition: 'top',
   overflowActions: Object.freeze([]),
   primaryButtonKind: 'primary',
+  primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
   titleSize: 'default'
@@ -80,6 +81,8 @@ var Card = /*#__PURE__*/(0, _react.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,
@@ -93,9 +96,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.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 = {
@@ -195,10 +198,15 @@ var Card = /*#__PURE__*/(0, _react.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
@@ -217,7 +225,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var getFooterProps = function getFooterProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
@@ -226,6 +234,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       primaryButtonHref: primaryButtonHref,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonKind: primaryButtonKind,
+      primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       productive: productive,
       secondaryButtonHref: secondaryButtonHref,
@@ -276,6 +285,7 @@ Card.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.node,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardFooter.js

@@ -44,6 +44,7 @@ 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,
@@ -63,7 +64,7 @@ var CardFooter = function CardFooter(_ref) {
     size: "md",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "md",
@@ -84,6 +85,7 @@ CardFooter.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.string,
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardHeader.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _settings = require("../../settings");
 
+var _react2 = require("@carbon/react");
+
 //
 // Copyright IBM Corp. 2020, 2021
 //
@@ -33,6 +35,11 @@ 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,
@@ -43,6 +50,8 @@ var CardHeader = function CardHeader(_ref) {
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = (0, _classnames.default)(headerClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-has-label"), !!label), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
+  var actionGhostButtonClass = (0, _classnames.default)(actionGhostButton, (0, _defineProperty2.default)({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -57,7 +66,13 @@ var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions)));
+  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    size: "small",
+    renderIcon: primaryButtonIcon,
+    onClick: onPrimaryButtonClick,
+    className: actionGhostButtonClass
+  }, primaryButtonText))));
 };
 
 exports.CardHeader = CardHeader;
@@ -66,6 +81,11 @@ CardHeader.propTypes = {
   description: _propTypes.default.string,
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
+  noActionIcons: _propTypes.default.bool,
+  onPrimaryButtonClick: _propTypes.default.func,
+  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  primaryButtonText: _propTypes.default.string,
   title: _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };

package/lib/components/ComboButton/ComboButton.js

@@ -19,7 +19,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react = require("@carbon/react");
 
@@ -91,11 +91,11 @@ var ComboButton = function ComboButton(_ref) {
     },
     renderIcon: function renderIcon() {
       return /*#__PURE__*/(0, _react2.createElement)(isOpen ? function (props) {
-        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+        return /*#__PURE__*/_react2.default.createElement(_icons.ChevronUp, (0, _extends2.default)({
           size: 16
         }, props));
       } : function (props) {
-        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+        return /*#__PURE__*/_react2.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
           size: 16
         }, props));
       }, {

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -63,7 +63,9 @@ var _handleActiveCellInSelectionEnter = require("./utils/handleActiveCellInSelec
 
 var _handleActiveCellInSelectionTab = require("./utils/handleActiveCellInSelectionTab");
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
+var _handleCellDeletion = require("./utils/handleCellDeletion");
+
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -85,13 +87,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.
  */
 
 var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _cx;
+
   var _ref$cellSize = _ref.cellSize,
       cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
       className = _ref.className,
@@ -108,6 +113,9 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var multiKeyTrackingRef = (0, _react.useRef)();
@@ -214,11 +222,11 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       visibleColumns = _useTable.visibleColumns; // Update the spreadsheet data after editing a cell
 
 
-  var updateData = (0, _react.useCallback)(function (rowIndex, columnId) {
+  var updateData = (0, _react.useCallback)(function (rowIndex, columnId, newValue) {
     onDataUpdate(function (prev) {
       return prev.map(function (row, index) {
         if (index === rowIndex) {
-          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, (0, _defineProperty2.default)({}, columnId, cellEditorValue));
+          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, (0, _defineProperty2.default)({}, columnId, cellEditorValue || newValue));
         }
 
         return row;
@@ -406,13 +414,34 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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 && !(0, _handleMultipleKeys.includesShift)(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
       switch (key) {
+        // Backspace
+        case 'Backspace':
+          {
+            (0, _handleCellDeletion.handleCellDeletion)(deleteParams);
+            break;
+          }
+        // Delete
+
+        case 'Delete':
+          {
+            (0, _handleCellDeletion.handleCellDeletion)(deleteParams);
+            break;
+          }
         // Enter
+
         case 'Enter':
           {
             (0, _handleActiveCellInSelectionEnter.handleActiveCellInSelectionEnter)({
@@ -610,7 +639,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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);
@@ -646,6 +675,11 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
 
     return;
+  }; // Mouse up on active cell
+
+
+  var handleActiveCellMouseUp = function handleActiveCellMouseUp() {
+    setClickAndHoldActive(false);
   }; // Mouse down on active cell
 
 
@@ -784,12 +818,13 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
   }, [spreadsheetRef, currentMatcher]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
-    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
+    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__container-has-focus"), containerHasFocus), (0, _defineProperty2.default)(_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);
@@ -815,7 +850,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
     headerCellHoldActive: headerCellHoldActive,
-    visibleColumns: visibleColumns
+    visibleColumns: visibleColumns,
+    selectAllAriaLabel: selectAllAriaLabel
   }), /*#__PURE__*/_react.default.createElement(_DataSpreadsheetBody.DataSpreadsheetBody, {
     activeCellCoordinates: activeCellCoordinates,
     ref: spreadsheetRef,
@@ -850,6 +886,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     visibleColumns: visibleColumns
   }), /*#__PURE__*/_react.default.createElement("button", {
     onMouseDown: handleActiveCellMouseDown,
+    onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
     onDoubleClick: handleActiveCellDoubleClick,
@@ -858,6 +895,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     className: (0, _classnames.default)("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
   }, activeCellContent), /*#__PURE__*/_react.default.createElement("textarea", {
+    id: "".concat(blockClass, "__cell-editor-text-area"),
     value: cellEditorValue,
     onKeyDown: (0, _handleEditSubmit.handleEditSubmit)({
       activeCellCoordinates: activeCellCoordinates,
@@ -877,7 +915,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       cellEditorRulerRef.current.textContent = event.target.value;
     },
     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,
+    "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: (0, _classnames.default)("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/_react.default.createElement("pre", {
     "aria-hidden": true,
@@ -946,6 +984,21 @@ DataSpreadsheet.propTypes = {
    */
   onSelectionAreaChange: _propTypes.default.func,
 
+  /**
+   * The aria label applied to the Select all button
+   */
+  selectAllAriaLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * The aria label applied to the Data spreadsheet component
+   */
+  spreadsheetAriaLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+   */
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -411,7 +411,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
       }), {
         className: (0, _classnames.default)("".concat(blockClass, "__tr")),
         "data-row-index": index,
-        "aria-rowindex": index + 1
+        "aria-rowindex": index + 1,
+        "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
       }), /*#__PURE__*/_react.default.createElement("div", {
         role: "rowheader",
         className: "".concat(blockClass, "__td-th--cell-container")