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

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -69,12 +69,12 @@ ExpressiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Optional media content like an image to be placed in the card
@@ -149,6 +149,6 @@ ExpressiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: _propTypes.default.string
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node])
 };
 ExpressiveCard.displayName = componentName;

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
@@ -475,8 +473,9 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     hasIconOnly: true,
     iconDescription:
     /* istanbul ignore next */
@@ -492,7 +491,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
-  }) : null));
+  })) : null));
 
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {
@@ -574,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;
   }),
 
@@ -610,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;
   }),
 
@@ -650,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';
     })
   })),
@@ -681,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;
   }),
 
@@ -703,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;
   }),
 
@@ -776,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;
   }),
 
@@ -840,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,

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -93,12 +93,12 @@ ProductiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Provides the callback for a clickable card
@@ -148,7 +148,7 @@ ProductiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Determines title size

package/lib/components/SidePanel/SidePanel.js

@@ -25,7 +25,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _motion = require("@carbon/motion");
 
@@ -77,7 +77,7 @@ var defaults = {
  */
 
 var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _window, _ref4, _cx4;
+  var _window, _ref5, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -198,9 +198,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [labelText, title]);
   /* istanbul ignore next */
 
-  var handleResize = function handleResize(width, height) {
+  var handleResize = function handleResize(_ref2) {
     var _sidePanelOuter$style3;
 
+    var height = _ref2.height;
     setPanelHeight(height);
     var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
     var actionsContainer = getActionsContainerElement();
@@ -397,9 +398,9 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   /* istanbul ignore next */
 
-  var handleBlur = function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-        currentActiveNode = _ref2.relatedTarget;
+  var handleBlur = function handleBlur(_ref3) {
+    var oldActiveNode = _ref3.target,
+        currentActiveNode = _ref3.relatedTarget;
 
     // focus trap should only be set if the side panel is a `slideOver` type
     if (open && sidePanelInnerRef && !slideIn) {
@@ -414,7 +415,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var primaryActionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref4 = {}, (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref4)]);
+  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
 
   var renderHeader = function renderHeader() {
     var _cx, _cx2;
@@ -453,17 +454,17 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: (0, _classnames.default)("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__action-toolbar"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
-    }, actionToolbarButtons.map(function (_ref5) {
-      var label = _ref5.label,
-          kind = _ref5.kind,
-          icon = _ref5.icon,
-          tooltipPosition = _ref5.tooltipPosition,
-          tooltipAlignment = _ref5.tooltipAlignment,
-          leading = _ref5.leading,
-          disabled = _ref5.disabled,
-          className = _ref5.className,
-          onClick = _ref5.onClick,
-          rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+    }, actionToolbarButtons.map(function (_ref6) {
+      var label = _ref6.label,
+          kind = _ref6.kind,
+          icon = _ref6.icon,
+          tooltipPosition = _ref6.tooltipPosition,
+          tooltipAlignment = _ref6.tooltipAlignment,
+          leading = _ref6.leading,
+          disabled = _ref6.disabled,
+          className = _ref6.className,
+          onClick = _ref6.onClick,
+          rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
       return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -493,10 +494,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var contentRef = ref || sidePanelRef;
-  (0, _reactResizeDetector.useResizeDetector)({
-    handleHeight: true,
-    onResize: handleResize,
-    targetRef: contentRef
+  (0, _useResizeObserver.useResizeObserver)(contentRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
@@ -667,8 +666,8 @@ SidePanel.propTypes = {
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
-  selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn;
+  selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref8) {
+    var slideIn = _ref8.slideIn;
     return slideIn;
   }),
 
@@ -696,8 +695,8 @@ SidePanel.propTypes = {
   /**
    * Sets the title text
    */
-  title: _propTypes.default.string.isRequired.if(function (_ref8) {
-    var labelText = _ref8.labelText;
+  title: _propTypes.default.string.isRequired.if(function (_ref9) {
+    var labelText = _ref9.labelText;
     return labelText;
   })
 };

package/lib/components/TagSet/TagSet.js

@@ -31,7 +31,7 @@ var _TagSetModal = require("./TagSetModal");
 
 var _react2 = require("@carbon/react");
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _devtools = require("../../global/js/utils/devtools");
 
@@ -245,13 +245,11 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
 
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleSizerTagsResize,
-    targetRef: sizingContainerRef
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleSizerTagsResize
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: tagSetRef
+  (0, _useResizeObserver.useResizeObserver)(tagSetRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver2 = require("../../global/js/hooks/useResizeObserver");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -118,13 +118,11 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }
   }, [portalTargetIn]);
   var localRef = (0, _react.useRef)();
+  var resizer = (0, _react.useRef)(null);
   var modalRef = ref || localRef;
 
-  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref;
+  var _useResizeObserver = (0, _useResizeObserver2.useResizeObserver)(resizer),
+      width = _useResizeObserver.width;
 
   var wide = size === 'wide'; // Keep track of the stack depth and our position in it (1-based, 0=closed)
 

package/lib/components/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "EditFullPage", {
     return _EditFullPage.EditFullPage;
   }
 });
+Object.defineProperty(exports, "EditInPlace", {
+  enumerable: true,
+  get: function get() {
+    return _EditInPlace.EditInPlace;
+  }
+});
 Object.defineProperty(exports, "EditSidePanel", {
   enumerable: true,
   get: function get() {
@@ -171,12 +177,6 @@ Object.defineProperty(exports, "ImportModal", {
     return _ImportModal.ImportModal;
   }
 });
-Object.defineProperty(exports, "InlineEdit", {
-  enumerable: true,
-  get: function get() {
-    return _InlineEdit.InlineEdit;
-  }
-});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {
@@ -516,7 +516,7 @@ var _EditSidePanel = require("./EditSidePanel");
 
 var _OptionsTile = require("./OptionsTile");
 
-var _InlineEdit = require("./InlineEdit");
+var _EditInPlace = require("./EditInPlace");
 
 var _DataSpreadsheet = require("./DataSpreadsheet");
 

package/lib/global/js/hooks/useResizeObserver.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 useResizeObserver = function useResizeObserver(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    callback: null,
+    throttleInterval: 0
+  };
+  var callback = options.callback,
+      throttleInterval = options.throttleInterval;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
+  var throttleTimeout = (0, _react.useRef)(null);
+  var entriesToHandle = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) {
+      return;
+    }
+
+    var doCallbacks = function doCallbacks() {
+      if (!(ref !== null && ref !== void 0 && ref.current) || !Array.isArray(entriesToHandle === null || entriesToHandle === void 0 ? void 0 : entriesToHandle.current)) {
+        return;
+      }
+
+      var entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      throttleTimeout.current = null;
+      callback && callback(entry.contentRect);
+    };
+
+    var observer = new ResizeObserver(function (entries) {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+
+      if (throttleInterval) {
+        // if a throttleInterval check for running timeout
+        if (throttleTimeout.current === null) {
+          // no live timeout set entries to handle and move on
+          // set up throttle
+          throttleTimeout.current = setTimeout(function () {
+            // do callbacks
+            doCallbacks(); // reset throttle
+
+            throttleTimeout.current = null;
+          }, throttleInterval);
+        }
+      } else {
+        // no throttle do callbacks every time
+        doCallbacks();
+      }
+    }); // observe all refs passed
+
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+      observer = null;
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, options]);
+  return {
+    width: width,
+    height: height
+  };
+};
+
+exports.useResizeObserver = useResizeObserver;

package/lib/global/js/hooks/useWindowScroll.js

@@ -14,6 +14,12 @@ var _react = require("react");
 
 var _scrollableAncestor = require("../utils/scrollableAncestor");
 
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * 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 windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
 
 var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {