@carbon/ibm-products 2.0.0-rc.27 → 2.0.0-rc.28

package/lib/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js}

@@ -2,17 +2,19 @@
 
 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
 });
-exports.InlineEditV2 = void 0;
+exports.deprecatedProps = exports.EditInPlace = void 0;
 
 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,27 +33,41 @@ var _settings = require("../../settings");
 
 var _devtools = require("../../global/js/utils/devtools");
 
-var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "value"];
+var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "size", "tooltipAlignment", "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; }
+
+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; }
 
-var componentName = 'InlineEditV2';
-var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit-v2");
-var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+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 componentName = 'EditInPlace';
+var blockClass = "".concat(_settings.pkg.prefix, "--edit-in-place");
+var defaults = {
+  tooltipAlignment: 'top',
+  size: 'sm'
+};
+var EditInPlace = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _cx;
 
   var cancelLabel = _ref.cancelLabel,
+      editAlwaysVisible = _ref.editAlwaysVisible,
       editLabel = _ref.editLabel,
       id = _ref.id,
+      inheritTypography = _ref.inheritTypography,
       invalid = _ref.invalid,
-      invalidLabel = _ref.invalidLabel,
+      deprecated_invalidLabel = _ref.invalidLabel,
+      invalidText = _ref.invalidText,
       labelText = _ref.labelText,
       onCancel = _ref.onCancel,
       onChange = _ref.onChange,
       onSave = _ref.onSave,
       saveLabel = _ref.saveLabel,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? defaults.size : _ref$size,
+      tooltipAlignment = _ref.tooltipAlignment,
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -73,20 +89,27 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var inputRef = (0, _react.useRef)(null);
   var canSave = value !== initialValue && !invalid;
   var escaping = (0, _react.useRef)(false);
+  var tipAlignIsObject = (0, _typeof2.default)(tooltipAlignment) === 'object';
+  var tipAlignments = ['edit', 'save', 'cancel'].reduce(function (acc, tips) {
+    var _ref2;
+
+    acc[tips] = (_ref2 = tipAlignIsObject ? tooltipAlignment[tips] : tooltipAlignment) !== null && _ref2 !== void 0 ? _ref2 : defaults.tooltipAlignment;
+    return acc;
+  }, {});
   (0, _react.useEffect)(function () {
     if (!initialValue && !dirtyInput) {
       setInitialValue(value);
     }
   }, [initialValue, dirtyInput, value]);
 
-  var isTargetingChild = function isTargetingChild(_ref2) {
-    var currentTarget = _ref2.currentTarget,
-        relatedTarget = _ref2.relatedTarget;
+  var isTargetingChild = function isTargetingChild(_ref3) {
+    var currentTarget = _ref3.currentTarget,
+        relatedTarget = _ref3.relatedTarget;
     return currentTarget.contains(relatedTarget);
   };
 
-  var onChangeHandler = function onChangeHandler(_ref3) {
-    var target = _ref3.target;
+  var onChangeHandler = function onChangeHandler(_ref4) {
+    var target = _ref4.target;
 
     if (!dirtyInput) {
       setDirtyInput(true);
@@ -168,7 +191,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
+    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/_react.default.createElement("label", {
@@ -176,7 +199,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     htmlFor: id
   }, labelText), /*#__PURE__*/_react.default.createElement("input", {
     id: id,
-    className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input"), "".concat(_settings.carbon.prefix, "--text-input--sm")),
+    className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input"), "".concat(_settings.carbon.prefix, "--text-input--").concat(size)),
     type: "text",
     value: value,
     onChange: onChangeHandler,
@@ -184,12 +207,16 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ,
     onKeyDown: onKeyHandler
   }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__ellipsis"),
+    "aria-hidden": !focused
+  }, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__toolbar")
-  }, focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && /*#__PURE__*/_react.default.createElement(_icons.WarningFilled, {
+  }, invalid && /*#__PURE__*/_react.default.createElement(_icons.WarningFilled, {
     size: 16,
     className: "".concat(blockClass, "__warning-icon")
-  }), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
-    size: "sm",
+  }), focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    align: tipAlignments.cancel,
+    size: size,
     label: cancelLabel,
     onClick: onCancelHandler,
     kind: "ghost",
@@ -199,7 +226,8 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement(_icons.Close, {
     size: 16
   })), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
-    size: "sm",
+    align: tipAlignments.save,
+    size: size,
     label: saveLabel,
     onClick: onSaveHandler,
     kind: "ghost",
@@ -210,8 +238,9 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement(_icons.Checkmark, {
     size: 16
   }))) : /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
-    className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
-    size: "sm",
+    align: tipAlignments.edit,
+    className: (0, _classnames.default)("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
+    size: size,
     label: editLabel,
     onClick: onFocusHandler,
     kind: "ghost",
@@ -219,19 +248,36 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     key: "edit"
   }, /*#__PURE__*/_react.default.createElement(_icons.Edit, {
     size: 16
-  })))), focused && invalid && /*#__PURE__*/_react.default.createElement("p", {
+  })))), invalid && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__warning-text")
-  }, invalidLabel));
+  }, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
 });
-exports.InlineEditV2 = InlineEditV2;
-exports.InlineEditV2 = InlineEditV2 = _settings.pkg.checkComponentEnabled(InlineEditV2, componentName);
-InlineEditV2.displayName = componentName;
-InlineEditV2.propTypes = {
+exports.EditInPlace = EditInPlace;
+exports.EditInPlace = EditInPlace = _settings.pkg.checkComponentEnabled(EditInPlace, componentName);
+EditInPlace.displayName = componentName;
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * invalidLabel was misnamed, using invalidText to match Carbon
+   */
+  invalidText: _propTypes.default.string
+};
+exports.deprecatedProps = deprecatedProps;
+
+var alignPropType = _propTypes.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']);
+
+EditInPlace.propTypes = _objectSpread({
   /**
    * label for cancel button
    */
   cancelLabel: _propTypes.default.string.isRequired,
 
+  /**
+   * By default the edit icon is shown on hover only.
+   */
+  editAlwaysVisible: _propTypes.default.bool,
+
+  /**
   /**
    * label for edit button
    */
@@ -242,6 +288,15 @@ InlineEditV2.propTypes = {
    */
   id: _propTypes.default.string.isRequired,
 
+  /**
+   * inheritTypography - causes the text entry field to inherit typography settings
+   * assigned to the container. This is useful when editing titles for instance.
+   *
+   * NOTE: The size property limits the vertical size of the input element.
+   * Inherited font's should be selected to fit within the size selected.
+   */
+  inheritTypography: _propTypes.default.bool,
+
   /**
    * determines if the input is invalid
    */
@@ -250,7 +305,7 @@ InlineEditV2.propTypes = {
   /**
    * text that is displayed if the input is invalid
    */
-  invalidLabel: _propTypes.default.string,
+  invalidText: _propTypes.default.string,
 
   /**
    * Provide the text that will be read by a screen reader when visiting this control
@@ -287,13 +342,24 @@ InlineEditV2.propTypes = {
    */
   saveLabel: _propTypes.default.string.isRequired,
 
+  /**
+   * vertical size of control
+   */
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * tooltipAlignment 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
+   */
+  tooltipAlignment: _propTypes.default.oneOfType([alignPropType, _propTypes.default.shape({
+    cancel: alignPropType,
+    edit: alignPropType,
+    save: alignPropType
+  })]),
+
   /**
    * current value of the input
    */
   value: _propTypes.default.string.isRequired
-};
-InlineEditV2.defaultProps = {
-  invalid: false,
-  invalidLabel: '' // readOnly: false,
-
-};
+}, deprecatedProps);

package/lib/components/{InlineEdit → EditInPlace}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "InlineEdit", {
+Object.defineProperty(exports, "EditInPlace", {
   enumerable: true,
   get: function get() {
-    return _InlineEdit.InlineEdit;
+    return _EditInPlace.EditInPlace;
   }
 });
 
-var _InlineEdit = require("./InlineEdit");
+var _EditInPlace = require("./EditInPlace");

package/lib/components/PageHeader/PageHeader.js

@@ -25,7 +25,7 @@ var _layout = require("@carbon/layout");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _react2 = require("@carbon/react");
 
@@ -69,7 +69,7 @@ var defaults = {
 };
 
 var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _enableBreadcrumbScro, _ref6, _cx2, _ref7, _cx4, _cx7;
+  var _withoutBackground, _enableBreadcrumbScro, _ref7, _cx2, _ref8, _cx4, _cx7;
 
   var actionBarItems = _ref.actionBarItems,
       actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
@@ -224,7 +224,9 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   /* istanbul ignore next */
 
 
-  var handleResizeActionBarColumn = function handleResizeActionBarColumn(width) {
+  var handleResizeActionBarColumn = function handleResizeActionBarColumn(_ref4) {
+    var width = _ref4.width;
+
     /* don't know how to test resize */
 
     /* istanbul ignore next */
@@ -309,8 +311,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
   (0, _hooks.useNearestScroll)(headerRef, // on scroll or various layout changes check updates if needed
   // istanbul ignore next
-  function (_ref4) {
-    var current = _ref4.current;
+  function (_ref5) {
+    var current = _ref5.current;
     setPageHeaderStyles(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
     });
@@ -326,8 +328,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     document.documentElement.style.setProperty("--".concat(_PageHeaderUtils.blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
     setScrollYValue(current.scrollY);
   }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
-  (0, _hooks.useWindowResize)(function (_ref5) {
-    var current = _ref5.current;
+  (0, _hooks.useWindowResize)(function (_ref6) {
+    var current = _ref6.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
@@ -377,15 +379,11 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       (0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResizeActionBarColumn,
-    targetRef: sizingContainerRef,
-    handleWidth: true
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleResizeActionBarColumn
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: headerRef,
-    handleHeight: true
+  (0, _useResizeObserver.useResizeObserver)(headerRef, {
+    callback: handleResize
   }); // Determine what form of title to display in the breadcrumb
 
   var breadcrumbItemForTitle = (0, _PageHeaderUtils.utilGetBreadcrumbItemForTitle)(_PageHeaderUtils.blockClass, collapseTitle, title);
@@ -393,7 +391,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(_PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
+    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.FlexGrid, {
@@ -415,7 +413,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
 
   }) : null), /*#__PURE__*/_react.default.createElement(_react2.Column, {
-    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref8 = {}, (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -575,8 +573,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if actionBarItems are supplied
    */
-  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref9) {
-    var actionBarItems = _ref9.actionBarItems;
+  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
+    var actionBarItems = _ref10.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
 
@@ -611,8 +609,8 @@ PageHeader.propTypes = _objectSpread({
    * If the user supplies breadcrumbs then this property is required.
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
-  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
-    var breadcrumbs = _ref10.breadcrumbs;
+  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref11) {
+    var breadcrumbs = _ref11.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
 
@@ -651,8 +649,8 @@ PageHeader.propTypes = _objectSpread({
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
-    title: _propTypes.default.string.isRequired.if(function (_ref11) {
-      var label = _ref11.label;
+    title: _propTypes.default.string.isRequired.if(function (_ref12) {
+      var label = _ref12.label;
       return typeof label !== 'string';
     })
   })),
@@ -682,9 +680,9 @@ PageHeader.propTypes = _objectSpread({
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
-    var withoutBackground = _ref12.withoutBackground,
-        hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
+  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
+    var withoutBackground = _ref13.withoutBackground,
+        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
@@ -704,9 +702,9 @@ PageHeader.propTypes = _objectSpread({
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref14) {
+    var withoutBackground = _ref14.withoutBackground,
+        hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
@@ -777,8 +775,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if pageActions are supplied
    */
-  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref14) {
-    var pageActions = _ref14.pageActions;
+  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref15) {
+    var pageActions = _ref15.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
 
@@ -841,14 +839,17 @@ PageHeader.propTypes = _objectSpread({
     loading: _propTypes.default.bool,
     // inline edit version properties
     editableLabel: _propTypes.default.string,
-    // .isRequired.if(inlineEditRequired),
+    // .isRequired.if(editInPlaceRequired),
     id: _propTypes.default.string,
-    // .isRequired.if(inlineEditRequired),
+    // .isRequired.if(editInPlaceRequired),
+    onCancel: _propTypes.default.func,
     onChange: _propTypes.default.func,
     onSave: _propTypes.default.func,
     cancelDescription: _propTypes.default.string,
-    //.isRequired.if(inlineEditRequired),
-    saveDescription: _propTypes.default.string //.isRequired.if(inlineEditRequired),
+    //.isRequired.if(editInPlaceRequired),
+    editDescription: _propTypes.default.string,
+    // .isRequired.if(editInPlaceRequired),
+    saveDescription: _propTypes.default.string //.isRequired.if(editInPlaceRequired),
     // Update docgen if changed
 
   }), _propTypes.default.string, _propTypes.default.shape({

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inlineEditRequired = exports.PageHeaderTitle = void 0;
+exports.editInPlaceRequired = exports.PageHeaderTitle = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -23,7 +23,7 @@ var _react2 = require("@carbon/react");
 
 var _ = require("../");
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "revertDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
 
 /**
  *
@@ -46,7 +46,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave = title.onSave,
       editDescription = title.editDescription,
       editableLabel = title.editableLabel,
-      revertDescription = title.revertDescription,
+      cancelDescription = title.cancelDescription,
       saveDescription = title.saveDescription,
       rest = (0, _objectWithoutProperties2.default)(title, _excluded);
   var titleText;
@@ -63,17 +63,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       className: "".concat(blockClass, "__title-icon")
     }) : null, loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
-    }) : isEditable ? /*#__PURE__*/_react.default.createElement(_.InlineEdit, (0, _extends2.default)({
-      v1: true,
-      hideLabel: true,
+    }) : isEditable ? /*#__PURE__*/_react.default.createElement(_.EditInPlace, (0, _extends2.default)({
+      tooltipAlignment: "bottom",
       value: text,
-      editDescription: editDescription,
+      cancelLabel: cancelDescription,
+      editLabel: editDescription,
+      saveLabel: saveDescription,
+      labelText: editableLabel,
       onChange: onChange,
       onSave: onSave,
-      labelText: editableLabel,
-      revertDescription: revertDescription,
-      saveDescription: saveDescription,
-      buttonTooltipPosition: "bottom"
+      size: "md",
+      inheritTypography: true
     }, rest)) : /*#__PURE__*/_react.default.createElement("span", {
       title: !loading ? asText : null
     }, text));
@@ -90,12 +90,12 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
 
 exports.PageHeaderTitle = PageHeaderTitle;
 
-var inlineEditRequired = function inlineEditRequired(_ref2) {
+var editInPlaceRequired = function editInPlaceRequired(_ref2) {
   var onSave = _ref2.onSave;
   return !!onSave;
 };
 
-exports.inlineEditRequired = inlineEditRequired;
+exports.editInPlaceRequired = editInPlaceRequired;
 PageHeaderTitle.propTypes = {
   // passed from page header
   blockClass: _propTypes.default.string.isRequired,
@@ -118,7 +118,7 @@ PageHeaderTitle.propTypes = {
    *    - onSave: function to process a confirmed change
    *    - editDescription: description for edit button
    *    - editableLabel: label for edit required if onSave supplied
-   *    - revertDescription: description for edit revert button
+   *    - cancelDescription: description for edit cancel button
    *    - saveDescription: description for edit save button
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
@@ -131,13 +131,13 @@ PageHeaderTitle.propTypes = {
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     loading: _propTypes.default.bool,
     // inline edit version properties
-    editDescription: _propTypes.default.string.isRequired.if(inlineEditRequired),
-    editableLabel: _propTypes.default.string.isRequired.if(inlineEditRequired),
-    id: _propTypes.default.string.isRequired.if(inlineEditRequired),
+    editDescription: _propTypes.default.string.isRequired.if(editInPlaceRequired),
+    editableLabel: _propTypes.default.string.isRequired.if(editInPlaceRequired),
+    id: _propTypes.default.string.isRequired.if(editInPlaceRequired),
     onChange: _propTypes.default.func,
     onSave: _propTypes.default.func,
-    revertDescription: _propTypes.default.string.isRequired.if(inlineEditRequired),
-    saveDescription: _propTypes.default.string.isRequired.if(inlineEditRequired) // Update docgen if changed
+    cancelDescription: _propTypes.default.string.isRequired.if(editInPlaceRequired),
+    saveDescription: _propTypes.default.string.isRequired.if(editInPlaceRequired) // Update docgen if changed
 
   }), _propTypes.default.string, _propTypes.default.shape({
     content: _propTypes.default.node.isRequired,