@carbon/ibm-products 1.32.0 → 1.32.1

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -93,7 +93,7 @@ var getDropdownPosition = function getDropdownPosition(buttonEle) {
 
   if (parent instanceof HTMLElement) {
     var top = buttonEle.offsetTop + buttonEle.offsetHeight;
-    var right = parent.offsetWidth - parent.offsetLeft - (buttonEle.offsetLeft + buttonEle.offsetWidth);
+    var right = parent.offsetWidth - parent.offsetLeft - buttonEle.offsetLeft;
     return {
       top: top,
       right: right

package/es/components/Datagrid/utils/makeData.js

@@ -12,12 +12,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React from 'react';
 import namor from 'namor';
+import { StatusIcon } from '../../StatusIcon';
 import { inlineEditSelectItems } from './getInlineEditColumns';
 
-var getRandomInteger = function getRandomInteger(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
+var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
+  var roundedMin = Math.ceil(min);
+  var roundedMax = Math.floor(max);
+  var randomNumber = Math.random() * (max - min) + min;
+
+  if (!decimalPlaces) {
+    return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
+  }
+
+  var power = Math.pow(10, decimalPlaces);
+  return Math.floor(randomNumber * power) / power;
 };
 
 export var makeData = function makeData() {
@@ -47,6 +55,16 @@ export var range = function range(len) {
   return arr;
 };
 
+var renderStatusIcon = function renderStatusIcon(statusChance) {
+  var iconProps = {
+    size: 'sm',
+    theme: 'light',
+    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
+    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
+  };
+  return /*#__PURE__*/React.createElement(StatusIcon, iconProps);
+};
+
 var newPerson = function newPerson() {
   var statusChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
@@ -149,7 +167,9 @@ var newPerson = function newPerson() {
     }),
     status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
     chartType: initialChartTypeIndex === 0 ? inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? inlineEditSelectItems[1] : inlineEditSelectItems[2],
-    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
+    status_icon: renderStatusIcon(statusChance)
   };
 };
 

package/es/components/InlineEdit/InlineEdit.js

@@ -40,7 +40,7 @@ var buttons = ['cancel', 'edit', 'save'];
  */
 
 export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
-  var _cx, _refInput$current, _refInput$current$inn, _cx3;
+  var _cx, _refInput$current, _refInput$current$tex, _cx3;
 
   var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
       buttonTooltipPosition = _ref.buttonTooltipPosition,
@@ -66,7 +66,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var refInput = useRef({
-    innerText: value
+    textContent: value
   });
   var localRef = useRef(null);
   var ref = refIn || localRef;
@@ -148,15 +148,15 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     document.getSelection().removeAllRanges();
 
     if (onSave) {
-      onSave(refInput.current.innerText);
+      onSave(refInput.current.textContent);
     }
   };
 
   var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
+    setInternalValue(refInput.current.textContent);
 
     if (onChange) {
-      onChange(refInput.current.innerText);
+      onChange(refInput.current.textContent);
     }
   }; // pasting into contentEditable not supported by userEvent
 
@@ -191,7 +191,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
   };
 
   var handleCancel = function handleCancel() {
-    refInput.current.innerText = value;
+    refInput.current.textContent = value;
     handleInput(value);
     doSetEditing(false);
     document.getSelection().removeAllRanges();
@@ -259,7 +259,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/React.createElement("div", _extends({}, rest, getDevtoolsProps(componentName), {
       id: id,
       size: size,
-      className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
+      className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",

package/es/components/OptionsTile/OptionsTile.js

@@ -202,12 +202,14 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/React.createElement("h6", {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: "".concat(blockClass, "__title"),
+      title: title
     }, title), text && /*#__PURE__*/React.createElement("span", {
       className: cx(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: "".concat(blockClass, "__summary-text"),
+      title: text
     }, text)));
   }
 

package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -80,7 +80,7 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (containerHasFocus && !isEditing) {
+    if (ref && containerHasFocus && !isEditing) {
       ref.current.onkeydown = ref.current.onkeyup = function (event) {
         // If keydown, we will add the new key to the keysPressedList array
         if (event.type === 'keydown') {
@@ -132,7 +132,7 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     // or is currently in edit mode
 
 
-    if (!containerHasFocus || isEditing) {
+    if (ref && !containerHasFocus || isEditing) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;
 

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

@@ -48,8 +48,6 @@ var TableContainer = _carbonComponentsReact.DataTable.TableContainer,
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var DatagridContent = function DatagridContent(_ref) {
-  var _getTableProps;
-
   var datagridState = _ref.datagridState;
 
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
@@ -85,7 +83,7 @@ var DatagridContent = function DatagridContent(_ref) {
     // and swapped out with an input, i.e. text, number, selection, or date picker
 
 
-    if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
+    if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select")) || target.closest(".".concat(blockClass, "__row-size-button"))) {
       return;
     }
 
@@ -95,8 +93,33 @@ var DatagridContent = function DatagridContent(_ref) {
     });
   });
 
+  var renderTable = function renderTable() {
+    var _getTableProps;
+
+    return /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
+      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      role: withInlineEdit && 'grid',
+      tabIndex: withInlineEdit && 0,
+      onKeyDown: withInlineEdit ? function (event) {
+        return (0, _handleGridKeyPress.handleGridKeyPress)({
+          event: event,
+          dispatch: dispatch,
+          state: state,
+          instance: datagridState,
+          keysPressedList: keysPressedList,
+          usingMac: usingMac
+        });
+      } : null,
+      onFocus: withInlineEdit ? function () {
+        return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
+      } : null
+    }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
+      rows: rows
+    })));
+  };
+
   var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
-    ref: multiKeyTrackingRef,
+    ref: withInlineEdit ? multiKeyTrackingRef : null,
     containerHasFocus: gridActive,
     isEditing: !!editId
   }),
@@ -112,28 +135,9 @@ var DatagridContent = function DatagridContent(_ref) {
     ref: gridAreaRef
   }, leftPanel && leftPanel.isOpen && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__datagridLeftPanel")
-  }, leftPanel.panelContent), /*#__PURE__*/_react.default.createElement("div", {
+  }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
     ref: multiKeyTrackingRef
-  }, /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
-    className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
-    role: withInlineEdit && 'grid',
-    tabIndex: withInlineEdit && 0,
-    onKeyDown: withInlineEdit ? function (event) {
-      return (0, _handleGridKeyPress.handleGridKeyPress)({
-        event: event,
-        dispatch: dispatch,
-        state: state,
-        instance: datagridState,
-        keysPressedList: keysPressedList,
-        usingMac: usingMac
-      });
-    } : null,
-    onFocus: withInlineEdit ? function () {
-      return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
-    } : null
-  }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
-    rows: rows
-  })))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
     instance: datagridState
   }));
 };

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
@@ -23,7 +25,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../../settings");
 
+var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
+
+var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
+
 var _excluded = ["children"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableRow = _carbonComponentsReact.DataTable.TableRow,
     TableCell = _carbonComponentsReact.DataTable.TableCell; // eslint-disable-next-line react/prop-types
@@ -32,8 +43,14 @@ var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
 
   var row = datagridState.row;
+
+  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
+      state = _useContext.state;
+
+  var activeCellId = state.activeCellId;
+  var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -60,7 +60,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       return setIsOpen(!isOpen);
     },
     iconDescription: legendText,
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
   }), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
     legendText: legendText,
     buttonRef: buttonRef,

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -113,7 +113,7 @@ var getDropdownPosition = function getDropdownPosition(buttonEle) {
 
   if (parent instanceof HTMLElement) {
     var top = buttonEle.offsetTop + buttonEle.offsetHeight;
-    var right = parent.offsetWidth - parent.offsetLeft - (buttonEle.offsetLeft + buttonEle.offsetWidth);
+    var right = parent.offsetWidth - parent.offsetLeft - buttonEle.offsetLeft;
     return {
       top: top,
       right: right

package/lib/components/Datagrid/utils/makeData.js

@@ -13,16 +13,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _namor = _interopRequireDefault(require("namor"));
 
+var _StatusIcon = require("../../StatusIcon");
+
 var _getInlineEditColumns = require("./getInlineEditColumns");
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var getRandomInteger = function getRandomInteger(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
+var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
+  var roundedMin = Math.ceil(min);
+  var roundedMax = Math.floor(max);
+  var randomNumber = Math.random() * (max - min) + min;
+
+  if (!decimalPlaces) {
+    return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
+  }
+
+  var power = Math.pow(10, decimalPlaces);
+  return Math.floor(randomNumber * power) / power;
 };
 
 var makeData = function makeData() {
@@ -57,6 +66,16 @@ var range = function range(len) {
 
 exports.range = range;
 
+var renderStatusIcon = function renderStatusIcon(statusChance) {
+  var iconProps = {
+    size: 'sm',
+    theme: 'light',
+    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
+    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
+  };
+  return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
+};
+
 var newPerson = function newPerson() {
   var statusChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
@@ -159,7 +178,9 @@ var newPerson = function newPerson() {
     }),
     status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
     chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
-    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
+    status_icon: renderStatusIcon(statusChance)
   };
 };
 

package/lib/components/InlineEdit/InlineEdit.js

@@ -56,7 +56,7 @@ var buttons = ['cancel', 'edit', 'save'];
  */
 
 var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
-  var _cx, _refInput$current, _refInput$current$inn, _cx3;
+  var _cx, _refInput$current, _refInput$current$tex, _cx3;
 
   var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
       buttonTooltipPosition = _ref.buttonTooltipPosition,
@@ -81,7 +81,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var refInput = (0, _react.useRef)({
-    innerText: value
+    textContent: value
   });
   var localRef = (0, _react.useRef)(null);
   var ref = refIn || localRef;
@@ -163,15 +163,15 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     document.getSelection().removeAllRanges();
 
     if (onSave) {
-      onSave(refInput.current.innerText);
+      onSave(refInput.current.textContent);
     }
   };
 
   var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
+    setInternalValue(refInput.current.textContent);
 
     if (onChange) {
-      onChange(refInput.current.innerText);
+      onChange(refInput.current.textContent);
     }
   }; // pasting into contentEditable not supported by userEvent
 
@@ -206,7 +206,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   };
 
   var handleCancel = function handleCancel() {
-    refInput.current.innerText = value;
+    refInput.current.textContent = value;
     handleInput(value);
     doSetEditing(false);
     document.getSelection().removeAllRanges();
@@ -274,7 +274,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
       id: id,
       size: size,
-      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
+      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",

package/lib/components/OptionsTile/OptionsTile.js

@@ -221,12 +221,14 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/_react.default.createElement("h6", {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: "".concat(blockClass, "__title"),
+      title: title
     }, title), text && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: "".concat(blockClass, "__summary-text"),
+      title: text
     }, text)));
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.32.0",
+  "version": "1.32.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,26 +51,26 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.13",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
+    "@babel/core": "^7.19.1",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.20",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
-    "jest": "^29.0.1",
-    "jest-config-ibm-cloud-cognitive": "^0.24.5",
-    "jest-environment-jsdom": "^29.0.1",
+    "jest": "^29.0.3",
+    "jest-config-ibm-cloud-cognitive": "^0.24.6",
+    "jest-environment-jsdom": "^29.0.3",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.6",
+    "npm-check-updates": "^16.1.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.8",
+    "sass": "^1.54.9",
     "yargs": "^17.5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.19.0",
     "@carbon/telemetry": "^0.1.0",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
@@ -87,11 +87,11 @@
     "@carbon/motion": "^10.29.0",
     "@carbon/themes": "^10.55.0",
     "@carbon/type": "^10.45.0",
-    "carbon-components": "^10.58.0",
-    "carbon-components-react": "^7.59.0",
+    "carbon-components": "^10.58.1",
+    "carbon-components-react": "^7.59.1",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "07980288bb0aeea68a7b884846fb675e9bba82bd"
+  "gitHead": "829c3e97ae9b2412f7fcb1859dc8dd8b019963ee"
 }

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -85,6 +85,7 @@ $row-heights: (
   cursor: pointer;
   outline: 0; // handled by active class
   .#{$block-class}__label-icon {
+    height: $spacing-05;
     padding-right: $spacing-05;
   }
   &.#{$block-class}__inline-edit-button--non-edit {
@@ -209,3 +210,8 @@ $row-heights: (
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.#{$carbon-prefix}--data-table .#{$block-class}__carbon-row-hover-active td {
+  border-top-color: $hover-ui;
+  background-color: $hover-ui;
+}

package/scss/components/OptionsTile/_options-tile.scss

@@ -70,13 +70,17 @@
   }
 
   .#{$block-class}__heading {
+    overflow: hidden;
     grid-column: 2;
   }
 
   .#{$block-class}__title {
     @include carbon--type-style('productive-heading-01');
 
+    overflow: hidden;
     color: $text-01;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .#{$block-class}__summary {