@carbon/ibm-products 1.8.0 → 1.11.0

package/lib/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js}

@@ -7,7 +7,7 @@ exports.createActiveCellFn = void 0;
 
 var _layout = require("@carbon/layout");
 
-var _settings = require("../../settings");
+var _settings = require("../../../settings");
 
 /**
  * Copyright IBM Corp. 2022, 2022
@@ -24,7 +24,10 @@ var createActiveCellFn = function createActiveCellFn(_ref) {
       _ref$blockClass = _ref.blockClass,
       blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
       onActiveCellChange = _ref.onActiveCellChange,
-      activeCellValue = _ref.activeCellValue;
+      activeCellValue = _ref.activeCellValue,
+      activeCellRef = _ref.activeCellRef,
+      cellEditorRef = _ref.cellEditorRef,
+      defaultColumn = _ref.defaultColumn;
 
   if (!coords) {
     return;
@@ -32,24 +35,34 @@ var createActiveCellFn = function createActiveCellFn(_ref) {
   // to `.${blockClass}__header--container`, otherwise it should be appended to `.${blockClass}__listContainer` firstElementChild
 
 
+  var point1Element = document.querySelector("[data-row-index=\"".concat(coords.row, "\"][data-column-index=\"").concat(coords.column, "\"]")) || document.querySelector(".".concat(blockClass, "__body--td")); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height/width of the first body cell we find
+
+  var selectionAreaCellWidth = point1Element.offsetWidth;
+  var selectionAreaCellHeight = point1Element.offsetHeight;
   var activeElementContainer = addToHeader ? contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__header--container")) : contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
   var relativePosition = {
-    top: placementElement.getBoundingClientRect().top - activeElementContainer.getBoundingClientRect().top,
-    left: placementElement.getBoundingClientRect().left - activeElementContainer.getBoundingClientRect().left
+    top: placementElement ? placementElement.getBoundingClientRect().top - activeElementContainer.getBoundingClientRect().top : coords.row === 0 ? 0 : selectionAreaCellHeight * coords.row,
+    // calculate top value here if virtualized row is not in DOM
+    left: placementElement ? placementElement.getBoundingClientRect().left - activeElementContainer.getBoundingClientRect().left : coords.column === 0 ? 0 + (defaultColumn.rowHeaderWidth - 4) : selectionAreaCellWidth * coords.column + (defaultColumn.rowHeaderWidth - 4) // calculate left value here if virtualized row is not in DOM, accounting for row header cell width (including borders)
+
   };
-  var activeCellButton = (contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"))) || document.createElement('button');
-  activeCellButton.classList.add("".concat(blockClass, "__active-cell--highlight"), "".concat(blockClass, "--interactive-cell-element"));
-  activeCellButton.style.width = (0, _layout.px)(placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetWidth);
-  activeCellButton.style.height = (0, _layout.px)(placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetHeight);
+  var activeCellButton = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current;
+  activeCellButton.style.width = (0, _layout.px)(placementElement ? placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetWidth : selectionAreaCellWidth);
+  activeCellButton.style.height = (0, _layout.px)(placementElement ? placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetHeight : selectionAreaCellHeight);
   activeCellButton.style.left = (0, _layout.px)(relativePosition.left);
   activeCellButton.style.top = (0, _layout.px)(relativePosition.top);
+  activeCellButton.style.display = 'block';
   activeCellButton.setAttribute('data-active-row-index', typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? coords.row : 'header');
   activeCellButton.setAttribute('data-active-column-index', typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' ? coords.column : 'header');
   activeElementContainer.appendChild(activeCellButton);
   activeCellButton.focus();
 
+  if (!addToHeader) {
+    activeElementContainer.appendChild(cellEditorRef.current);
+  }
+
   if (typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number') {
-    onActiveCellChange(activeCellValue);
+    onActiveCellChange === null || onActiveCellChange === void 0 ? void 0 : onActiveCellChange(activeCellValue);
   }
 };
 

package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCellSelectionArea = void 0;
+
+var _layout = require("@carbon/layout");
+
+var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var createCellSelectionArea = function createCellSelectionArea(_ref) {
+  var area = _ref.area,
+      blockClass = _ref.blockClass,
+      defaultColumn = _ref.defaultColumn,
+      selectionAreas = _ref.selectionAreas,
+      setSelectionAreas = _ref.setSelectionAreas;
+  var greatestRow = Math.max(area.point1.row, area.point2.row);
+  var greatestColumn = Math.max(area.point1.column, area.point2.column);
+  var lowestRowIndex = Math.min(area.point1.row, area.point2.row);
+  var lowestColumnIndex = Math.min(area.point1.column, area.point2.column);
+  var point1Element = document.querySelector("[data-row-index=\"".concat(area.point1.row, "\"][data-column-index=\"").concat(area.point1.column, "\"]")) || document.querySelector(".".concat(blockClass, "__body--td")); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height/width of the first body cell we find
+
+  var selectionAreaCellWidth = point1Element.offsetWidth;
+  var selectionAreaCellHeight = point1Element.offsetHeight;
+  var selectionAreaTotalWidth = selectionAreaCellWidth * (greatestColumn - lowestColumnIndex + 1);
+  var selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRow - lowestRowIndex + 1);
+  var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
+  var placementElement = bodyContainer.querySelector("[data-row-index=\"".concat(lowestRowIndex, "\"][data-column-index=\"").concat(lowestColumnIndex, "\"]"));
+  var relativePosition = {
+    top: placementElement ? placementElement.getBoundingClientRect().top - bodyContainer.getBoundingClientRect().top : lowestRowIndex === 0 ? 0 : selectionAreaCellHeight * lowestRowIndex,
+    // calculate top value here if virtualized row is not in DOM
+    left: placementElement ? placementElement.getBoundingClientRect().left - bodyContainer.getBoundingClientRect().left : lowestColumnIndex === 0 ? 0 + (defaultColumn.rowHeaderWidth - 4) : selectionAreaCellWidth * lowestColumnIndex + (defaultColumn.rowHeaderWidth - 4) // calculate left value here if virtualized row is not in DOM, accounting for row header cell width (including borders)
+
+  };
+  var selectionAreaElement = document.querySelector("[data-matcher-id=\"".concat(area.matcher, "\"]")) || document.createElement('div');
+  selectionAreaElement.classList.add("".concat(blockClass, "__selection-area--element"));
+  selectionAreaElement.setAttribute('data-matcher-id', area.matcher);
+  selectionAreaElement.style.width = (0, _layout.px)(selectionAreaTotalWidth);
+  selectionAreaElement.style.height = (0, _layout.px)(selectionAreaTotalHeight);
+  selectionAreaElement.style.left = (0, _layout.px)(relativePosition.left);
+  selectionAreaElement.style.top = (0, _layout.px)(relativePosition.top);
+  bodyContainer.appendChild(selectionAreaElement);
+  var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
+  var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
+    return item.matcher === area.matcher;
+  }); // We need to add another property to the selectionAreas object array to
+  // let us know if an area has been created for each item already, ie createdArea: true
+
+  selectionAreasClone[indexOfCurrentArea].areaCreated = true;
+  setSelectionAreas(selectionAreasClone);
+};
+
+exports.createCellSelectionArea = createCellSelectionArea;

package/lib/components/DataSpreadsheet/{generateData.js → utils/generateData.js}

@@ -13,6 +13,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+/**
+ * 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.
+ */
 // cspell:disable
 var pets = ['dog', 'cat', 'bird', 'lizard', 'frog', 'hamster', 'fish', 'rabbit', 'snake'];
 var petNames = ['Bruno', 'Willow', 'Kona', 'Heidi', 'Rusty', 'Bonnie', 'Cash', 'Gucci', 'Brody', 'Emma', 'Loki', 'Angel', 'Astro', 'Sherman', 'Layla', 'Peanut', 'Grace', 'Mickey', 'Sasha', 'Finn', 'Tucker', 'Bear', 'Mocha', 'Roscoe']; // cspell:enable

package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleHeaderCellSelection = void 0;
+
+var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
+
+var _removeCellSelections = require("./removeCellSelections");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
+  var type = _ref.type,
+      activeCellCoordinates = _ref.activeCellCoordinates,
+      rows = _ref.rows,
+      columns = _ref.columns,
+      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
+      setCurrentMatcher = _ref.setCurrentMatcher,
+      setSelectionAreas = _ref.setSelectionAreas,
+      spreadsheetRef = _ref.spreadsheetRef,
+      index = _ref.index,
+      isKeyboard = _ref.isKeyboard;
+  var rowValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row : index;
+  var columnValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : index;
+  var point1 = {
+    row: type === 'column' ? 0 : rowValue,
+    column: type === 'column' ? columnValue : 0
+  };
+  var point2 = {
+    row: type === 'column' ? rows.length - 1 : rowValue,
+    // going to always be the last row
+    column: type === 'column' ? columnValue : columns.length - 1
+  };
+  var tempMatcher = (0, _uuidv.default)();
+  setActiveCellCoordinates({
+    row: type === 'column' ? 0 : rowValue,
+    column: type === 'column' ? columnValue : 0
+  });
+  setCurrentMatcher(tempMatcher);
+  (0, _removeCellSelections.removeCellSelections)({
+    spreadsheetRef: spreadsheetRef
+  });
+  setSelectionAreas([{
+    point1: point1,
+    point2: point2,
+    areaCreated: false,
+    matcher: tempMatcher
+  }]);
+};
+
+exports.handleHeaderCellSelection = handleHeaderCellSelection;

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMultipleKeys = void 0;
+
+var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var handleMultipleKeys = function handleMultipleKeys(_ref) {
+  var _selectionAreasClone$;
+
+  var activeKeys = _ref.activeKeys,
+      selectionAreas = _ref.selectionAreas,
+      currentMatcher = _ref.currentMatcher,
+      rows = _ref.rows,
+      setSelectionAreas = _ref.setSelectionAreas,
+      columns = _ref.columns;
+  var activeKeyValues = activeKeys.current;
+  var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
+  var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
+    return item.matcher === currentMatcher;
+  });
+  var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? selectionAreasClone[indexOfCurrentArea].point2 : selectionAreasClone[indexOfCurrentArea].point1; // Down + Shift
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowDown')) {
+    if (rows.length - 1 === pointToUpdate.row) {
+      return;
+    }
+
+    var newPoint = {
+      row: pointToUpdate.row + 1,
+      column: pointToUpdate.column
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = newPoint;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  } // Right + Shift
+
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowRight')) {
+    if (columns.length - 1 === pointToUpdate.column) {
+      return;
+    }
+
+    var _newPoint = {
+      row: pointToUpdate.row,
+      column: pointToUpdate.column + 1
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = _newPoint;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  } // Up + Shift
+
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowUp')) {
+    if (pointToUpdate.row === 0) {
+      return;
+    }
+
+    var _newPoint2 = {
+      row: pointToUpdate.row - 1,
+      column: pointToUpdate.column
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = _newPoint2;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  } // Left + Shift
+
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowLeft')) {
+    if (pointToUpdate.column === 0) {
+      return;
+    }
+
+    var _newPoint3 = {
+      row: pointToUpdate.row,
+      column: pointToUpdate.column - 1
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = _newPoint3;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  }
+};
+
+exports.handleMultipleKeys = handleMultipleKeys;

package/lib/components/DataSpreadsheet/utils/removeCellSelections.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeCellSelections = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _settings = require("../../../settings");
+
+/**
+ * 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.
+ */
+// Removes the cell selection elements
+var removeCellSelections = function removeCellSelections(_ref) {
+  var matcher = _ref.matcher,
+      spreadsheetRef = _ref.spreadsheetRef,
+      _ref$blockClass = _ref.blockClass,
+      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
+
+  if (matcher && typeof matcher === 'string') {
+    var selectionToRemove = spreadsheetRef.current.querySelector("[data-matcher-id=\"".concat(matcher, "\"]"));
+
+    if (selectionToRemove) {
+      selectionToRemove.remove();
+    }
+  } else {
+    var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
+    (0, _toConsumableArray2.default)(cellSelections).forEach(function (element) {
+      return element.remove();
+    });
+  }
+};
+
+exports.removeCellSelections = removeCellSelections;

package/lib/components/InlineEdit/InlineEdit.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -31,21 +33,24 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value", "warn", "warnText"];
+var _excluded = ["buttonTooltipAlignment", "buttonTooltipPosition", "cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
 
 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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit");
 var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 var defaults = {
+  buttonTooltipAlignment: 'center',
+  buttonTooltipPosition: 'top',
   light: true,
   // defaults to true to reflect design
   size: 'md'
 };
+var buttons = ['cancel', 'edit', 'save'];
 /**
  * TODO: A description of the component.
  */
@@ -53,11 +58,13 @@ var defaults = {
 var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   var _cx, _refInput$current, _refInput$current$inn, _cx3;
 
-  var cancelDescription = _ref.cancelDescription,
+  var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
+      buttonTooltipPosition = _ref.buttonTooltipPosition,
+      cancelDescription = _ref.cancelDescription,
       className = _ref.className,
       disabled = _ref.disabled,
+      editAlwaysVisible = _ref.editAlwaysVisible,
       editDescription = _ref.editDescription,
-      editVisibleOnHoverOnly = _ref.editVisibleOnHoverOnly,
       id = _ref.id,
       invalid = _ref.invalid,
       invalidText = _ref.invalidText,
@@ -72,8 +79,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       value = _ref.value,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var refInput = (0, _react.useRef)(null);
   var localRef = (0, _react.useRef)(null);
@@ -89,9 +94,25 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       internalValue = _useState4[0],
       setInternalValue = _useState4[1];
 
-  var showValidation = invalid || warn;
-  var validationText = invalidText || warnText;
-  var validationIcon = showValidation ? invalid ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, null) : null;
+  var showValidation = invalid; // || warn;
+
+  var validationText = invalidText; // || warnText;
+
+  var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null; // sanitize the tooltip values
+
+  var alignIsObject = (0, _typeof2.default)(buttonTooltipAlignment) === 'object';
+  var directionIsObject = (0, _typeof2.default)(buttonTooltipPosition) === 'object';
+  var tipPositions = buttons.reduce(function (acc, button) {
+    var _ref2, _ref3;
+
+    var tooltipAlignment = (_ref2 = alignIsObject ? buttonTooltipAlignment[button] : buttonTooltipAlignment) !== null && _ref2 !== void 0 ? _ref2 : defaults.buttonTooltipAlignment;
+    var tooltipPosition = (_ref3 = directionIsObject ? buttonTooltipPosition[button] : buttonTooltipPosition) !== null && _ref3 !== void 0 ? _ref3 : defaults.buttonTooltipPosition;
+    acc[button] = {
+      tooltipAlignment: tooltipAlignment,
+      tooltipPosition: tooltipPosition
+    };
+    return acc;
+  }, {});
 
   var doSetEditing = function doSetEditing(value) {
     if (value === false) {
@@ -103,6 +124,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   };
 
   var handleEdit = function handleEdit(ev) {
+    /* istanbul ignore else */
     if (!disabled) {
       var rightOfInput = ev.currentTarget.classList.contains("".concat(blockClass, "__edit")) || ev.target.classList.contains("".concat(blockClass, "__after-input-elements"));
       var leftOfInput = ev.currentTarget = ev.target.classList.contains("".concat(blockClass)); // clicking on the content editable element should not set either of these to true
@@ -149,9 +171,12 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     if (onChange) {
       onChange(refInput.current.innerText);
     }
-  };
+  }; // pasting into contentEditable not supported by userEvent
+
 
-  var handlePaste = function handlePaste(ev) {
+  var handlePaste =
+  /* istanbul ignore next */
+  function handlePaste(ev) {
     ev.preventDefault(); // Get clipboard as plain text
 
     var text = (ev.clipboardData || window.clipboardData).getData('text/plain'); // remove \n
@@ -196,9 +221,16 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   };
 
   var handleKeyDown = function handleKeyDown(ev) {
-    if (ev.key === 'Enter') {
-      ev.preventDefault();
-      refInput.current.blur(); // will cause save
+    switch (ev.key) {
+      case 'Enter':
+        ev.preventDefault();
+        refInput.current.blur(); // will cause save
+
+        break;
+
+      case 'Escape':
+        handleCancel();
+        break;
     }
   };
   /*
@@ -232,7 +264,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     _react.default.createElement("div", {
       className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
-      "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--disabled"), disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--warn"), warn), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--light"), light), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), refInput.current && refInput.current.scrollWidth > refInput.current.offsetWidth), _cx)),
+      "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--disabled"), disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--light"), light), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), refInput.current && refInput.current.scrollWidth > refInput.current.offsetWidth), _cx)),
       onClick: handleEdit // disabled eslint for click handler
       ,
       onBlur: handleBlur,
@@ -263,14 +295,14 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
     }, showValidation && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: cancelDescription,
       onClick: handleCancel,
       renderIcon: _iconsReact.Close16
-    }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, tipPositions.cancel)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
       hasIconOnly: true,
@@ -278,9 +310,8 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       onClick: handleSave,
       renderIcon: _iconsReact.Checkmark16,
       disabled: value === internalValue
-    })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
-      "aria-hidden": "true",
-      className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--hover-visible"), editVisibleOnHoverOnly)),
+    }, tipPositions.save))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
+      className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: editDescription,
@@ -288,7 +319,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       renderIcon: disabled ? _iconsReact.EditOff16 : _iconsReact.Edit16,
       disabled: disabled,
       tabIndex: -1
-    }))), /*#__PURE__*/_react.default.createElement("div", {
+    }, tipPositions.edit)))), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
     }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__validation-text ").concat(_settings.carbon.prefix, "--form-requirement")
@@ -306,6 +337,28 @@ InlineEdit.displayName = componentName; // The types and DocGen commentary for t
 // See https://www.npmjs.com/package/prop-types#usage.
 
 InlineEdit.propTypes = {
+  /**
+   * buttonTooltipAlignment from the standard tooltip. Default center.
+   *
+   * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
+   */
+  buttonTooltipAlignment: _propTypes.default.oneOfType([_propTypes.default.oneOf(['start', 'center', 'end']), _propTypes.default.shape({
+    cancel: _propTypes.default.oneOf(['start', 'center', 'end']),
+    edit: _propTypes.default.oneOf(['start', 'center', 'end']),
+    save: _propTypes.default.oneOf(['start', 'center', 'end'])
+  })]),
+
+  /**
+   * buttonTooltipPosition from the standard tooltip
+   *
+   * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
+   */
+  buttonTooltipPosition: _propTypes.default.oneOfType([_propTypes.default.oneOf(['top', 'right', 'bottom', 'left']), _propTypes.default.shape({
+    cancel: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+    edit: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+    save: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left'])
+  })]),
+
   /**
    * label for cancel button
    */
@@ -322,15 +375,14 @@ InlineEdit.propTypes = {
   disabled: _propTypes.default.bool,
 
   /**
-   * Label for the edit button
+   * By default the edit icon is shown on hover only.
    */
-  editDescription: _propTypes.default.string.isRequired,
+  editAlwaysVisible: _propTypes.default.bool,
 
   /**
-   * In some scenarios the edit icon only needs to be shown on hover. These cases are where continual visibility of
-   * the edit icon is redundant. E.g. a spreadsheet a property panel.
+   * Label for the edit button
    */
-  editVisibleOnHoverOnly: _propTypes.default.bool,
+  editDescription: _propTypes.default.string.isRequired,
 
   /**
    * ID for inline edit
@@ -365,14 +417,14 @@ InlineEdit.propTypes = {
   /**
    * method called on input event (it's a React thing onChange behaves like on input).
    *
-   * NOTE: caller to handle invalid/warn states and associated text
+   * NOTE: caller to handle invalid states and associated text
    */
   onChange: _propTypes.default.func,
 
   /**
    * method called on change event
    *
-   * NOTE: caller to handle invalid/warn states and associated text
+   * NOTE: caller to handle invalid states and associated text
    */
   onSave: _propTypes.default.func,
 
@@ -394,15 +446,5 @@ InlineEdit.propTypes = {
   /**
    * initial/unedited value
    */
-  value: _propTypes.default.string,
-
-  /**
-   * set warn state for input
-   */
-  warn: _propTypes.default.bool,
-
-  /**
-   * text shown when warn true
-   */
-  warnText: _propTypes.default.string
+  value: _propTypes.default.string
 };