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

package/es/components/SidePanel/SidePanel.js

@@ -21,7 +21,7 @@ import { motion, AnimatePresence } from 'framer-motion'; // Other standard impor
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { allPropTypes } from '../../global/js/utils/props-helper';
@@ -51,7 +51,7 @@ var defaults = {
  */
 
 export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _window, _ref4, _cx4;
+  var _window, _ref5, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -172,9 +172,10 @@ export var SidePanel = /*#__PURE__*/React.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();
@@ -371,9 +372,9 @@ export var SidePanel = /*#__PURE__*/React.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) {
@@ -388,7 +389,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref4 = {}, _defineProperty(_ref4, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref4, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref4, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref4, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref4, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref4)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
 
   var renderHeader = function renderHeader() {
     var _cx, _cx2;
@@ -427,17 +428,17 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: cx("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref6, _excluded2);
 
       return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
         key: label,
@@ -468,10 +469,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var contentRef = ref || sidePanelRef;
-  useResizeDetector({
-    handleHeight: true,
-    onResize: handleResize,
-    targetRef: contentRef
+  useResizeObserver(contentRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
@@ -640,8 +639,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.string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn;
+  selectorPageContent: PropTypes.string.isRequired.if(function (_ref8) {
+    var slideIn = _ref8.slideIn;
     return slideIn;
   }),
 
@@ -669,8 +668,8 @@ SidePanel.propTypes = {
   /**
    * Sets the title text
    */
-  title: PropTypes.string.isRequired.if(function (_ref8) {
-    var labelText = _ref8.labelText;
+  title: PropTypes.string.isRequired.if(function (_ref9) {
+    var labelText = _ref9.labelText;
     return labelText;
   })
 };

package/es/components/TagSet/TagSet.js

@@ -23,7 +23,7 @@ import cx from 'classnames';
 import { TagSetOverflow } from './TagSetOverflow';
 import { TagSetModal } from './TagSetModal';
 import { Tag } from '@carbon/react';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
@@ -222,13 +222,11 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
 
-  useResizeDetector({
-    onResize: handleSizerTagsResize,
-    targetRef: sizingContainerRef
+  useResizeObserver(sizingContainerRef, {
+    callback: handleSizerTagsResize
   });
-  useResizeDetector({
-    onResize: handleResize,
-    targetRef: tagSetRef
+  useResizeObserver(tagSetRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),

package/es/components/Tearsheet/TearsheetShell.js

@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // Import portions of React that are needed.
 import React, { useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useResizeDetector } from 'react-resize-detector'; // Other standard imports.
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -91,13 +91,11 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [portalTargetIn]);
   var localRef = useRef();
+  var resizer = useRef(null);
   var modalRef = ref || localRef;
 
-  var _useResizeDetector = useResizeDetector({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref;
+  var _useResizeObserver = 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/es/components/index.js

@@ -35,7 +35,7 @@ export { UserProfileImage } from './UserProfileImage';
 export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
-export { InlineEdit } from './InlineEdit';
+export { EditInPlace } from './EditInPlace';
 export { DataSpreadsheet } from './DataSpreadsheet';
 export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';

package/es/global/js/hooks/useResizeObserver.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/**
+ * 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.
+ */
+import { useRef, useState, useLayoutEffect } from 'react';
+export 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 = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
+  var throttleTimeout = useRef(null);
+  var entriesToHandle = useRef(null);
+  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
+  };
+};

package/es/global/js/hooks/useWindowResize.js

@@ -5,6 +5,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
 import { useRef, useLayoutEffect } from 'react';
 var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";
 

package/es/global/js/hooks/useWindowScroll.js

@@ -1,4 +1,11 @@
 import _typeof from "@babel/runtime/helpers/typeof";
+
+/**
+ * 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.
+ */
 import { useRef, useLayoutEffect } from 'react';
 import { scrollableAncestor } from '../utils/scrollableAncestor';
 var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";

package/es/global/js/package-settings.js

@@ -27,6 +27,7 @@ var defaults = {
     CreateTearsheet: true,
     CreateTearsheetStep: true,
     CreateTearsheetDivider: true,
+    EditInPlace: true,
     EmptyState: true,
     ErrorEmptyState: true,
     ExportModal: true,
@@ -35,8 +36,6 @@ var defaults = {
     HTTPError404: true,
     HTTPErrorOther: true,
     ImportModal: true,
-    InlineEdit: true,
-    InlineEditV1: true,
     MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
@@ -71,8 +70,7 @@ var defaults = {
     EditTearsheet: false,
     EditTearsheetNarrow: false,
     EditFullPage: false,
-    EditUpdateCards: false,
-    InlineEditV2: false
+    EditUpdateCards: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/components/AboutModal/AboutModal.js

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -94,9 +94,8 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     bodyRef.current = contentRef.current.parentElement;
   }, [bodyRef]); // Detect resize of the ModalBody to recalculate whether scrolling is enabled
 
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: bodyRef
+  (0, _useResizeObserver.useResizeObserver)(bodyRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element

package/lib/components/ActionBar/ActionBar.js

@@ -25,7 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _react2 = require("@carbon/react");
 
@@ -85,7 +85,9 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var internalId = (0, _react.useRef)((0, _uuidv.default)());
   var refDisplayedItems = (0, _react.useRef)(null);
   var sizingRef = (0, _react.useRef)(null);
-  var sizes = (0, _react.useRef)({}); // create hidden sizing items
+  var sizes = (0, _react.useRef)({});
+  var backupRef = (0, _react.useRef)();
+  var localRef = ref || backupRef; // create hidden sizing items
 
   (0, _react.useEffect)(function () {
     // Hidden action bar and items used to calculate sizes
@@ -190,44 +192,26 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   (0, _react.useEffect)(function () {
     checkFullyVisibleItems(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maxVisible, hiddenSizingItems]);
-  /* istanbul ignore next */
-  // not sure how to fake window resize
+  }, [maxVisible, hiddenSizingItems]); // /* istanbul ignore next */ // not sure how to fake window resize
 
   var handleResize = function handleResize() {
-    // width is the space available for all action bar items horizontally
-    // the action bar items are squares so the height should be one item wide
-
-    /* istanbul ignore next */
-    // not sure how to fake window resize
-    checkFullyVisibleItems();
-  };
-  /* istanbul ignore next */
-  // not sure how to fake window resize
-
-
-  var handleActionBarItemsResize = function handleActionBarItemsResize() {
     // when the hidden sizing items change size
 
     /* istanbul ignore next */
     // not sure how to fake window resize
     checkFullyVisibleItems();
-  };
-
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleActionBarItemsResize,
-    targetRef: sizingRef
-  });
+  }; // // resize of the items
 
-  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: ref
-  }),
-      outerRef = _useResizeDetector.ref;
 
+  (0, _useResizeObserver.useResizeObserver)(sizingRef, {
+    callback: handleResize
+  });
+  (0, _useResizeObserver.useResizeObserver)(localRef, {
+    callback: handleResize
+  });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
-    ref: outerRef
+    ref: localRef
   }), hiddenSizingItems, /*#__PURE__*/_react.default.createElement("div", {
     ref: refDisplayedItems,
     className: (0, _classnames.default)(["".concat(blockClass, "__displayed-items"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -23,7 +23,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 _react2 = require("@carbon/react");
 
@@ -274,15 +274,6 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     // not sure how to test resize
     checkFullyVisibleBreadcrumbItems();
   };
-  /* istanbul ignore next */
-  // not sure how to test resize
-
-
-  var handleBreadcrumbItemsResize = function handleBreadcrumbItemsResize() {
-    /* istanbul ignore next */
-    // not sure how to test resize
-    checkFullyVisibleBreadcrumbItems();
-  };
 
   var backItem = breadcrumbs[breadcrumbs.length - 1];
   /* istanbul ignore if */
@@ -290,15 +281,15 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
 
   if (backItem.isCurrentPage) {
     backItem = breadcrumbs[breadcrumbs.length - 2];
-  }
+  } // container resize
 
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleBreadcrumbItemsResize,
-    targetRef: sizingContainerRef
-  });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: breadcrumbItemWithOverflow
+
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleResize
+  }); // item resize
+
+  (0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
@@ -314,8 +305,11 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     href: backItem.href,
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+        className: "".concat(blockClass, "__back__button"),
+        align: "right",
+        kind: "ghost",
         label: backItem.title || backItem.label,
-        align: "right"
+        size: "sm"
       }, /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, {
         size: 16
       }));

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -23,7 +23,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 _react2 = require("@carbon/react");
 
@@ -172,18 +172,14 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     }).reverse());
   });
 
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefSet
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet, {
+    callback: checkFullyVisibleItems
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefCombo
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, {
+    callback: checkFullyVisibleItems
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: checkFullyVisibleItems,
-    targetRef: spaceAvailableRef,
-    handleWidth: true
+  (0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, {
+    callback: checkFullyVisibleItems
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--right"), rightAlign)]),

package/lib/components/Card/Card.js

@@ -112,7 +112,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Layer, {
+        level: 2
+      }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
         size: size,
         direction: pos,
         flipped: true,
@@ -123,7 +125,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
           key: id
         }, rest));
-      }));
+      })));
     }
 
     var icons = actionIcons.map(function (_ref3) {
@@ -266,8 +268,8 @@ Card.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   clickZone: _propTypes.default.oneOf(['one', 'two', 'three']),
-  description: _propTypes.default.string,
-  label: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   media: _propTypes.default.node,
   mediaPosition: _propTypes.default.oneOf(['top', 'left']),
   onClick: _propTypes.default.func,
@@ -292,7 +294,7 @@ Card.propTypes = {
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
   secondaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 Card.displayName = componentName;

package/lib/components/Card/CardHeader.js

@@ -78,7 +78,7 @@ var CardHeader = function CardHeader(_ref) {
 exports.CardHeader = CardHeader;
 CardHeader.propTypes = {
   actions: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.node]),
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
   noActionIcons: _propTypes.default.bool,
@@ -86,7 +86,7 @@ CardHeader.propTypes = {
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 CardHeader.displayName = componentName;

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -17,12 +17,11 @@ var _react2 = require("@carbon/react");
 
 var _EmptyStates = require("../../EmptyStates");
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
@@ -37,25 +36,21 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       illustrationTheme = datagridState.illustrationTheme,
       emptyStateAction = datagridState.emptyStateAction,
       emptyStateLink = datagridState.emptyStateLink;
-  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
-    className: "".concat(blockClass, "__empty-state-body")
-  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
-    colSpan: headers.length
-  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, {
-    illustrationTheme: illustrationTheme,
-    size: emptyStateSize,
-    title: emptyStateTitle,
-    subtitle: emptyStateDescription,
-    action: emptyStateAction,
-    link: emptyStateLink
-  }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
+  var emptyStateProps = {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
     subtitle: emptyStateDescription,
     action: emptyStateAction,
     link: emptyStateLink
-  }))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
+    className: "".concat(blockClass, "__empty-state-body")
+  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
+    colSpan: headers.length
+  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps))));
 };
 
 var _default = DatagridEmptyBody;

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -31,7 +31,9 @@ var _settings = require("../../../settings");
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
   }), datagridState.headers.filter(function (_ref) {
@@ -47,7 +49,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
+      role: false
+    }), {
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {