@carbon/ibm-products 2.1.0 → 2.1.2

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -167,6 +167,9 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     setDisplayedBreadcrumbItems(newDisplayedBreadcrumbItems);
   }, [breadcrumbs, displayCount]);
   var checkFullyVisibleBreadcrumbItems = function checkFullyVisibleBreadcrumbItems() {
+    if (!breadcrumbItemWithOverflow.current) {
+      return;
+    }
     var displayItemIndex = function displayItemIndex(itemCount, index) {
       // In this data set the overflow measuring item is [0]
       // so the first displayItem in the list is [1]
@@ -257,13 +260,9 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   }
 
   // container resize
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
-    callback: handleResize
-  });
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleResize);
   // item resize
-  (0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, {
-    callback: handleResize
-  });
+  (0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, handleResize);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
     ref: breadcrumbItemWithOverflow

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -58,15 +59,14 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass,
     // Apply the block class to the main HTML element
-    className // Apply any supplied class names to the main HTML element.
-    ),
-
+    className, // Apply any supplied class names to the main HTML element.
+    "".concat(carbonPrefix, "--btn--").concat(size), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wrapper--").concat(kind), kind)),
     "aria-label": menuAriaLabel,
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
     size: size,
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(carbonPrefix, "--btn"), "".concat(carbonPrefix, "--btn--").concat(kind), "".concat(carbonPrefix, "--btn--").concat(size)])
+        className: (0, _classnames.default)("".concat(blockClass, "__trigger"))
       }, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -145,15 +145,9 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       }, (0, _propsHelper.prepareProps)(other, ['iconDescription', 'renderIcon'])));
     }).reverse());
   });
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet, {
-    callback: checkFullyVisibleItems
-  });
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, {
-    callback: checkFullyVisibleItems
-  });
-  (0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, {
-    callback: checkFullyVisibleItems
-  });
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet, checkFullyVisibleItems);
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, checkFullyVisibleItems);
+  (0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, checkFullyVisibleItems);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--right"), rightAlign)]),
     ref: spaceAvailableRef

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -674,9 +674,6 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     defaultColumn: defaultColumn,
     cellEditorValue: cellEditorValue
   });
-  var handleActiveCellMouseEnter = (0, _react.useCallback)(function () {
-    handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
-  }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
 
   // Only update if there are cell selection areas
   // Find point object that matches currentMatcher and remove the second point
@@ -709,6 +706,9 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       });
     }
   }, [spreadsheetRef, currentMatcher]);
+  var handleActiveCellMouseEnter = (0, _react.useCallback)(function () {
+    handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
+  }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__container-has-focus"), containerHasFocus), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__").concat(theme), theme === 'dark'), _cx)),
     ref: spreadsheetRef,

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -92,7 +92,7 @@ var DatagridContent = function DatagridContent(_ref) {
     return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
       className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit && 'grid',
-      tabIndex: withInlineEdit && 0,
+      tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: withInlineEdit ? function (event) {
         return (0, _handleGridKeyPress.handleGridKeyPress)({
           event: event,

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -59,9 +59,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
-  (0, _useResizeObserver.useResizeObserver)(gridRef, {
-    callback: handleVirtualGridResize
-  });
+  (0, _useResizeObserver.useResizeObserver)(gridRef, handleVirtualGridResize);
   var syncScroll = function syncScroll(e) {
     var virtualBody = e.target;
     document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -29,7 +29,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
     isOpen: isTearsheetOpen,
-    isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
+    isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -163,20 +163,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, [reactTableFiltersState, lastAppliedFilters]);
   return /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__container")
-  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
+    label: flyoutIconDescription,
     kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/_react2.default.createElement(_icons.Filter, {
-        size: 16
-      });
-    },
-    iconDescription: flyoutIconDescription,
+    align: "bottom",
     onClick: open ? closeFlyout : openFlyout,
     className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
-  }), /*#__PURE__*/_react2.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement(_icons.Filter, null)), /*#__PURE__*/_react2.default.createElement("div", {
     ref: filterFlyoutRef,
     className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
   }, /*#__PURE__*/_react2.default.createElement("div", {

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -80,6 +80,23 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var dropdownRef = (0, _react.useRef)();
   var datePickerRef = (0, _react.useRef)();
   var outerButtonElement = (0, _react.useRef)();
+  var rowSize = instance.rowSize,
+    onDataUpdate = instance.onDataUpdate;
+
+  // Saves the new cell data, onDataUpdate is a required function to be
+  // passed to useDatagrid when using useInlineEdit
+  var saveCellData = (0, _react.useCallback)(function (newValue) {
+    var columnId = cell.column.id;
+    var rowIndex = cell.row.index;
+    onDataUpdate(function (prev) {
+      return prev.map(function (row, index) {
+        if (index === rowIndex) {
+          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, (0, _defineProperty2.default)({}, columnId, newValue));
+        }
+        return row;
+      });
+    });
+  }, [cell, onDataUpdate]);
   (0, _react.useEffect)(function () {
     setInitialValue(value);
     var columnId = cell.column.id;
@@ -153,8 +170,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       }, 1);
     }
   };
-  var rowSize = instance.rowSize,
-    onDataUpdate = instance.onDataUpdate;
 
   // Auto focus text input when entering edit mode
   (0, _react.useEffect)(function () {
@@ -172,21 +187,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
   (0, _react.useEffect)(function () {
     setCellValue(value);
   }, [value]);
-
-  // Saves the new cell data, onDataUpdate is a required function to be
-  // passed to useDatagrid when using useInlineEdit
-  var saveCellData = (0, _react.useCallback)(function (newValue) {
-    var columnId = cell.column.id;
-    var rowIndex = cell.row.index;
-    onDataUpdate(function (prev) {
-      return prev.map(function (row, index) {
-        if (index === rowIndex) {
-          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, (0, _defineProperty2.default)({}, columnId, newValue));
-        }
-        return row;
-      });
-    });
-  }, [cell, onDataUpdate]);
   var sendFocusBackToGrid = function sendFocusBackToGrid() {
     // Allows the onKeyDown listener to go back to the entire grid area
     var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));

package/lib/components/Datagrid/useStickyColumn.js

@@ -26,10 +26,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = (0, _react.useRef)();
   var stickyHeaderCellRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(window.innerWidth),
+  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setWindowSize(window.innerWidth);
+  }, []);
   (0, _react.useLayoutEffect)(function () {
     function updateSize() {
       setWindowSize(window.innerWidth);
@@ -58,9 +61,13 @@ var useStickyColumn = function useStickyColumn(hooks) {
         headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
-      window.addEventListener('resize', boundListener);
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', boundListener);
+      }
       return function () {
-        window.removeEventListener('resize', boundListener);
+        if (typeof window !== 'undefined') {
+          window.removeEventListener('resize', boundListener);
+        }
       };
     }, [instance.rows, instance.isFetching]);
     (0, _react.useEffect)(function () {

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DatagridActions = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
@@ -55,25 +54,18 @@ var DatagridActions = function DatagridActions(datagridState) {
     return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
   };
   var renderFilterPanelButton = function renderFilterPanelButton() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
       kind: "ghost",
-      hasIconOnly: true,
-      tooltipPosition: "bottom",
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
-          size: 16
-        }, props));
-      },
-      iconDescription: filterProps.panelIconDescription,
+      align: "bottom",
+      label: filterProps.panelIconDescription,
       className: "".concat(blockClass, "-filter-panel-open-button"),
       onClick: function onClick() {
         return setPanelOpen(function (open) {
           return !open;
         });
       },
-      disabled: data.length === 0,
-      tooltipAlignment: "start"
-    });
+      disabled: data.length === 0
+    }, /*#__PURE__*/_react.default.createElement(_icons.Filter, null));
   };
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/lib/components/ImportModal/ImportModal.js

@@ -187,6 +187,13 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var inputHandler = function inputHandler(evt) {
     setImportUrl(evt.target.value);
   };
+  var onCloseHandler = function onCloseHandler() {
+    setFiles([]);
+    setImportUrl('');
+    if (onClose) {
+      onClose();
+    }
+  };
   var numberOfFiles = files.length;
   var numberOfValidFiles = files.filter(function (f) {
     return !f.invalid;
@@ -198,13 +205,13 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var blockClass = "".concat(_settings.pkg.prefix, "--import-modal");
   return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
-    ref: ref,
-    onClose: onClose
+    ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), {
     "aria-label": title,
     className: (0, _classnames.default)(blockClass, className),
     size: "sm",
-    preventCloseOnClickOutside: true
+    preventCloseOnClickOutside: true,
+    onClose: onCloseHandler
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     title: title
@@ -267,7 +274,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
-    onClick: onClose
+    onClick: onCloseHandler
   }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "submit",
     kind: "primary",
@@ -371,11 +378,11 @@ ImportModal.propTypes = {
   /**
    * Specify a handler for "submitting" modal. Access the imported file via `file => {}`
    */
-  onRequestSubmit: _propTypes.default.func,
+  onRequestSubmit: _propTypes.default.func.isRequired,
   /**
    * Specify whether the Modal is currently open
    */
-  open: _propTypes.default.bool,
+  open: _propTypes.default.bool.isRequired,
   /**
    * Specify the text for the primary button
    */

package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js

@@ -22,34 +22,19 @@ var UnreadNotificationBell = function UnreadNotificationBell() {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/_react.default.createElement("title", null, "Unread notification bell"), /*#__PURE__*/_react.default.createElement("g", {
-    id: "Page-1",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/_react.default.createElement("g", {
     id: "Group",
     transform: "translate(-1.000000, 0.000000)"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    id: "notification"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M17.9419375,12.058125 L16.25,10.3661875 L16.25,8.125 C16.245845,4.91692673 13.816599,2.23147626 10.625,1.90675 L10.625,0.625 L9.375,0.625 L9.375,1.90675 C6.183401,2.23147626 3.754155,4.91692673 3.75,8.125 L3.75,10.3661875 L2.0580625,12.058125 C1.94086706,12.1753182 1.875,12.3342622 1.875,12.5 L1.875,14.375 C1.875,14.720178 2.15482203,15 2.5,15 L6.875,15 L6.875,15.4855 C6.84694527,17.1272367 8.05869477,18.5271305 9.6875,18.7346875 C10.5660567,18.8218694 11.4405518,18.5337871 12.0952737,17.9415019 C12.7499955,17.3492167 13.1239886,16.5078712 13.125,15.625 L13.125,15 L17.5,15 C17.845178,15 18.125,14.720178 18.125,14.375 L18.125,12.5 C18.125,12.3342622 18.0591329,12.1753182 17.9419375,12.058125 Z M11.875,15.625 C11.875,16.6605339 11.0355339,17.5 10,17.5 C8.96446609,17.5 8.125,16.6605339 8.125,15.625 L8.125,15 L11.875,15 L11.875,15.625 Z M16.875,13.75 L3.125,13.75 L3.125,12.7588125 L4.816875,11.066875 C4.93409336,10.949692 4.9999646,10.7907468 5,10.625 L5,8.125 C5,5.36357625 7.23857625,3.125 10,3.125 C12.7614237,3.125 15,5.36357625 15,8.125 L15,10.625 C15.0000354,10.7907468 15.0659066,10.949692 15.183125,11.066875 L16.875,12.7588125 L16.875,13.75 Z",
     id: "Shape",
-    fill: "#FFFFFF",
     fillRule: "nonzero"
-  }), /*#__PURE__*/_react.default.createElement("rect", {
-    id: "_Transparent_Rectangle_",
-    x: "0",
-    y: "0",
-    width: "20",
-    height: "20"
-  })), /*#__PURE__*/_react.default.createElement("circle", {
+  }), /*#__PURE__*/_react.default.createElement("circle", {
     id: "Oval",
     stroke: "#161616",
     fill: "#DA1E28",
     cx: "15",
     cy: "4.375",
     r: "2.5"
-  }))));
+  })));
 };
 exports.UnreadNotificationBell = UnreadNotificationBell;

package/lib/components/PageHeader/PageHeader.js

@@ -320,12 +320,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       (0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
-    callback: handleResizeActionBarColumn
-  });
-  (0, _useResizeObserver.useResizeObserver)(headerRef, {
-    callback: handleResize
-  });
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleResizeActionBarColumn);
+  (0, _useResizeObserver.useResizeObserver)(headerRef, handleResize);
 
   // Determine what form of title to display in the breadcrumb
   var breadcrumbItemForTitle = (0, _PageHeaderUtils.utilGetBreadcrumbItemForTitle)(_PageHeaderUtils.blockClass, collapseTitle, title);

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -71,11 +71,11 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     var scrollableContainer = (0, _scrollableAncestor.scrollableAncestor)(headerRef.current);
 
     /* istanbul ignore next */
-    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.offsetTop : 0;
+    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.getBoundingClientRect().top : 0;
 
     // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
     // top and the measuring ref top, or the difference between. It does not change on scroll or resize.
-    update.headerOffset = scrollableContainerTop + offsetTopMeasuringRef.current.getBoundingClientRect().top;
+    update.headerOffset = (offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0) + scrollableContainerTop;
 
     /* istanbul ignore next */
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;

package/lib/components/SidePanel/SidePanel.js

@@ -451,9 +451,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }, title));
   };
   var contentRef = ref || sidePanelRef;
-  (0, _useResizeObserver.useResizeObserver)(contentRef, {
-    callback: handleResize
-  });
+  (0, _useResizeObserver.useResizeObserver)(contentRef, 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"),
     className: mainPanelClassNames,

package/lib/components/TagSet/TagSet.js

@@ -164,7 +164,8 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     if (sizingTags.length > 0) {
       var spaceAvailable = tagSetRef.current.offsetWidth;
       for (var i in sizingTags) {
-        var tagWidth = sizingTags[i].offsetWidth;
+        var _sizingTags$i;
+        var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
         if (spaceAvailable >= tagWidth) {
           spaceAvailable -= tagWidth;
           willFit += 1;
@@ -206,12 +207,8 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var handleModalClose = function handleModalClose() {
     setShowAllModalOpen(false);
   };
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
-    callback: handleSizerTagsResize
-  });
-  (0, _useResizeObserver.useResizeObserver)(tagSetRef, {
-    callback: handleResize
-  });
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleSizerTagsResize);
+  (0, _useResizeObserver.useResizeObserver)(tagSetRef, handleResize);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
     ref: tagSetRef

package/lib/components/Tearsheet/TearsheetShell.js

@@ -225,7 +225,8 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-content")
+      className: "".concat(bc, "__header-content"),
+      element: wide ? _react2.Layer : undefined
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__header-fields")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
@@ -250,12 +251,10 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__main"),
-      alwaysRender: includeActions,
-      element: wide ? _react2.Layer : undefined
+      alwaysRender: includeActions
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right',
-      element: wide ? _react2.Layer : undefined
+      alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
       neverRender: influencerPosition !== 'right'

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -37,6 +37,20 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
     setModalIsOpen = _ref.setModalIsOpen;
+  var continueToNextStep = (0, _react.useCallback)(function () {
+    setIsSubmitting(false);
+    setCurrentStep(function (prev) {
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData;
+        prev++;
+      } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, setIsSubmitting, stepData]);
+
   // useEffect to handle multi step logic
   (0, _react.useEffect)(function () {
     var onUnmount = function onUnmount() {
@@ -164,9 +178,9 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
               // There will always be a previous step otherwise we will
               // have disabled the back button since we have reached the first visible step
               do {
-                var _stepData;
+                var _stepData2;
                 prev--;
-              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+              } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
               return prev;
             });
           },
@@ -194,18 +208,5 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       setCreateComponentActions(buttons);
     }
   }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
-  var continueToNextStep = (0, _react.useCallback)(function () {
-    setIsSubmitting(false);
-    setCurrentStep(function (prev) {
-      // Find next included step to render
-      // There will always be a next step otherwise we will
-      // have reach the onSubmit
-      do {
-        var _stepData2;
-        prev++;
-      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
-      return prev;
-    });
-  }, [setCurrentStep, setIsSubmitting, stepData]);
 };
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

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

@@ -14,13 +14,7 @@ var _react = require("react");
  * 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 useResizeObserver = function useResizeObserver(ref, callback) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
@@ -29,8 +23,14 @@ var useResizeObserver = function useResizeObserver(ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
-  var throttleTimeout = (0, _react.useRef)(null);
   var entriesToHandle = (0, _react.useRef)(null);
+  var cb = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    // ref for callback removes it as dependency fro useLayoutEffect
+    // This significantly reduces repeated calls if a function is redefined on every
+    // render
+    cb.current = callback;
+  }, [callback]);
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -42,29 +42,15 @@ var useResizeObserver = function useResizeObserver(ref) {
       var entry = entriesToHandle.current[0];
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
-      throttleTimeout.current = null;
-      callback && callback(entry.contentRect);
+      cb.current && cb.current(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
+      window.requestAnimationFrame(function () {
+        // do callbacks
         doCallbacks();
-      }
+      });
     });
 
     // observe all refs passed
@@ -74,7 +60,7 @@ var useResizeObserver = function useResizeObserver(ref) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref, options]);
+  }, [ref]);
   return {
     width: width,
     height: height

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

@@ -114,7 +114,7 @@ StackblitzLink.propTypes = {
  * @returns "dark" or "light"
  */
 var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
-  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  var themeId = document.querySelector('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
   return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };
 exports.getSelectedCarbonTheme = getSelectedCarbonTheme;