@carbon/ibm-products 1.51.0 → 1.52.0

package/lib/components/PageHeader/PageHeader.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _layout = require("@carbon/layout");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _carbonComponentsReact = require("carbon-components-react");
 var _hooks = require("../../global/js/hooks");
 var _devtools = require("../../global/js/utils/devtools");
@@ -39,7 +39,7 @@ var defaults = {
   narrowGrid: false
 };
 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,
     actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
@@ -176,7 +176,8 @@ 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 */
     setActionBarColumnWidth(width);
@@ -250,8 +251,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (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")));
     });
@@ -267,8 +268,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
@@ -314,15 +315,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
@@ -331,7 +328,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(_carbonComponentsReact.Grid, {
@@ -352,7 +349,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
   }) : null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.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
@@ -503,8 +500,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;
   }),
   /**
@@ -535,8 +532,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;
   }),
   /**
@@ -570,8 +567,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';
     })
   })),
@@ -597,9 +594,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;
   }),
   /**
@@ -616,9 +613,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;
   }),
   /**
@@ -682,8 +679,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;
   }),
   /**

package/lib/components/SidePanel/SidePanel.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _framerMotion = require("framer-motion");
 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");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
@@ -51,7 +51,7 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _window, _ref4, _cx4;
+  var _window, _ref5, _cx4;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -163,8 +163,9 @@ 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();
@@ -351,9 +352,9 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   // adds focus trap functionality
   /* 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) {
       (0, _wrapFocus.default)({
@@ -366,7 +367,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;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -395,17 +396,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(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -433,10 +434,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }, title));
   };
   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"),
@@ -590,8 +589,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;
   }),
   /**
@@ -614,8 +613,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

@@ -17,7 +17,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSetOverflow = require("./TagSetOverflow");
 var _TagSetModal = require("./TagSetModal");
 var _carbonComponentsReact = require("carbon-components-react");
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
@@ -205,13 +205,11 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var handleModalClose = function handleModalClose() {
     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

@@ -12,7 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
@@ -93,12 +93,10 @@ 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;
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
   var _useState3 = (0, _react.useState)(0),

package/lib/components/index.js

@@ -393,6 +393,12 @@ Object.defineProperty(exports, "useDisableSelectRows", {
     return _Datagrid.useDisableSelectRows;
   }
 });
+Object.defineProperty(exports, "useEditableCell", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useEditableCell;
+  }
+});
 Object.defineProperty(exports, "useExpandedRow", {
   enumerable: true,
   get: function get() {

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

@@ -0,0 +1,83 @@
+"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/package-settings.js

@@ -79,7 +79,15 @@ var defaults = {
   // feature level flags
   feature: {
     'a-new-feature': false,
-    'default-portal-target-body': true
+    'default-portal-target-body': true,
+    'Datagrid.useExpandedRow': false,
+    'Datagrid.useNestedRows': false,
+    'Datagrid.useInlineEdit': false,
+    'Datagrid.useActionsColumn': false,
+    'Datagrid.useFiltering': false,
+    'Datagrid.useCustomizeColumns': false,
+    'ExampleComponent.secondaryIcon': false,
+    'ExampleComponent.useExample': false
   }
 };
 var warningMessageComponent = function warningMessageComponent(property) {
@@ -88,6 +96,9 @@ var warningMessageComponent = function warningMessageComponent(property) {
 var warningMessageFeature = function warningMessageFeature(property) {
   return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
 };
+var errorMessageFeature = function errorMessageFeature(property) {
+  return "Carbon for IBM Products (Error): Feature \"".concat(property, "\" not enabled. To enable see the notes on feature flags in the README.");
+};
 var warningMessageAllComponents = 'Carbon for IBM Products (WARNING): All components enabled through use of setAllComponents. This includes components that have not yet completed their review process.';
 var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures';
 
@@ -109,7 +120,10 @@ var allFeatures = all.INITIAL;
 var silent = false;
 var component = new Proxy(_objectSpread({}, defaults.component), {
   set: function set(target, property, value) {
-    value && !silent && console.warn(warningMessageComponent(property));
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageComponent(property));
+    }
     target[property] = value;
     return true; // value set
   },
@@ -120,7 +134,15 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
 });
 var feature = new Proxy(_objectSpread({}, defaults.feature), {
   set: function set(target, property, value) {
-    value && !silent && console.warn(warningMessageFeature(property));
+    // If we receive a feature flag that doesn't exist in our defaults we should not log
+    // a warning message and instead just return
+    if (!Object.getOwnPropertyDescriptor(defaults.feature, property)) {
+      return true;
+    }
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageFeature(property));
+    }
     target[property] = value;
     return true; // value set
   },
@@ -149,6 +171,14 @@ var _default = {
     var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return byDefault ? defaults.feature[featureName] : feature[featureName];
   },
+  checkReportFeatureEnabled: function checkReportFeatureEnabled(featureName) {
+    if (feature[featureName]) {
+      // NOTE: Warning emitted if feature flag is enabled (see Proxy above)
+      return true;
+    } else {
+      console.error(errorMessageFeature(featureName));
+    }
+  },
   isFeaturePublic: function isFeaturePublic(featureName) {
     var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);

package/lib/global/js/utils/test-helper.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scssCompile = exports.scssCheck = exports.required = exports.mockHTMLElement = exports.invalid = exports.expectWarnAsync = exports.expectWarn = exports.expectMultipleWarn = exports.expectMultipleError = exports.expectError = exports.deprecatedUsage = exports.deprecated = void 0;
+exports.scssCompile = exports.scssCheck = exports.required = exports.mockHTMLElement = exports.invalid = exports.expectWarnAsync = exports.expectWarn = exports.expectMultipleWarn = exports.expectMultipleError = exports.expectLogging = exports.expectError = exports.deprecatedUsage = exports.deprecated = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -194,6 +194,40 @@ var expectMultipleWarn = function expectMultipleWarn(messages, test) {
   warn.mockRestore();
   return result;
 };
+exports.expectMultipleWarn = expectMultipleWarn;
+var checkLogging = function checkLogging(mock, message) {
+  if (message) {
+    var _expect4;
+    expect(mock).toBeCalled();
+    (_expect4 = expect(mock)).toHaveBeenCalledWith.apply(_expect4, (0, _toConsumableArray2.default)(makeMatcherArray(message)));
+  }
+};
+
+/**
+ * A helper function to enable a test to expect a single call to
+ * console.error, for example when intentionally omitting a required prop
+ * or supplying an invalid prop type or value for the purposes of the test.
+ * @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
+ * console.error or console.warn, which must be called exactly once. A single string or regex or an
+ * expect matcher can be used to match a single-argument call to console.error (most common),
+ * while an array of strings and/or regex and/or expect matchers can be used to match a
+ * multiple-argument call. Strings can be full or substring matches to the corresponding
+ * argument.
+ * @param {Function} test the test function to call, during which the call to
+ * console.error will be expected.
+ */
+var expectLogging = function expectLogging(_ref2, test) {
+  var errors = _ref2.errors,
+    warnings = _ref2.warnings;
+  var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+  var warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+  var result = test();
+  checkLogging(error, errors);
+  checkLogging(warn, warnings);
+  error.mockRestore();
+  warn.mockRestore();
+  return result;
+};
 
 /**
  * A helper function to enable a test to expect a single call to
@@ -208,13 +242,11 @@ var expectMultipleWarn = function expectMultipleWarn(messages, test) {
  * @param {Function} test the test function to call, during which the call to
  * console.error will be expected.
  */
-exports.expectMultipleWarn = expectMultipleWarn;
+exports.expectLogging = expectLogging;
 var expectError = function expectError(message, test) {
-  var _expect4;
   var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
   var result = test();
-  expect(error).toBeCalledTimes(1);
-  (_expect4 = expect(error)).toHaveBeenCalledWith.apply(_expect4, (0, _toConsumableArray2.default)(makeMatcherArray(message)));
+  checkLogging(error, message);
   error.mockRestore();
   return result;
 };

package/lib/settings.js

@@ -43,24 +43,22 @@ _packageSettings.default.logDeprecated = function (component, name) {
 // Note that the returned stub carries any other properties which had already
 // been assigned (eg propTypes, displayName, etc).
 _packageSettings.default.checkComponentEnabled = function (component, name) {
-  _packageSettings.default.logDeprecated(component, name);
   if (component.render) {
     // The component is a forward-ref, so make a stub forward-ref.
     var forward = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-      return (
-        // Replace the stub's render fn so this test only happens once.
-        (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ?
-        // If the component is enabled, or if it's not a public component,
-        // replace the stub's render fn with the component's render fn.
-        component.render :
-        // Note that Canary is a direct render fn (not a forward-ref) and
-        // will ignore the passed props and ref (if any)
-        _Canary.Canary.bind(undefined, {
-          componentName: name
-        }))(
-        // Call it now (after this it will be directly called).
-        props, ref)
-      );
+      _packageSettings.default.logDeprecated(component, name); // may log don't care about result
+      // Replace the stub's render fn so this test only happens once.
+      return (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ?
+      // If the component is enabled, or if it's not a public component,
+      // replace the stub's render fn with the component's render fn.
+      component.render :
+      // Note that Canary is a direct render fn (not a forward-ref) and
+      // will ignore the passed props and ref (if any)
+      _Canary.Canary.bind(undefined, {
+        componentName: name
+      }))(
+      // Call it now (after this it will be directly called).
+      props, ref);
     });
 
     // Transfer object properties already assigned (eg propTypes, displayName)
@@ -70,22 +68,20 @@ _packageSettings.default.checkComponentEnabled = function (component, name) {
   } else {
     // The component is a direct render fn, so make a stub render fn.
     var _render = function render(props) {
-      return (
-        // Replace the stub render fn so this test only happens once.
-        (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ?
-        // If the component is enabled, or if it's not a public component,
-        // replace the stub render fn with the component render fn.
-        component :
-        // Replace the stub render fn with the Canary render fn, which will
-        // ignore the passed props.
-        _Canary.Canary.bind(undefined, {
-          componentName: name
-        }))(
-        // Call it now (after this it will be directly called).
-        props)
-      );
+      _packageSettings.default.logDeprecated(component, name); // may log don't care about result
+      // Replace the stub render fn so this test only happens once.
+      return (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ?
+      // If the component is enabled, or if it's not a public component,
+      // replace the stub render fn with the component render fn.
+      component :
+      // Replace the stub render fn with the Canary render fn, which will
+      // ignore the passed props.
+      _Canary.Canary.bind(undefined, {
+        componentName: name
+      }))(
+      // Call it now (after this it will be directly called).
+      props);
     };
-
     // Transfer object properties already assigned (eg propTypes, displayName)
     // to a function which calls the stub render fn which checks the component
     // status when first used.