@carbon/ibm-products 2.1.1 → 2.1.2

package/es/components/ImportModal/ImportModal.js

@@ -179,6 +179,13 @@ export var ImportModal = /*#__PURE__*/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;
@@ -190,13 +197,13 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var blockClass = "".concat(pkg.prefix, "--import-modal");
   return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, _objectSpread({
     open: open,
-    ref: ref,
-    onClose: onClose
+    ref: ref
   }, getDevtoolsProps(componentName)), {
     "aria-label": title,
     className: cx(blockClass, className),
     size: "sm",
-    preventCloseOnClickOutside: true
+    preventCloseOnClickOutside: true,
+    onClose: onCloseHandler
   }), /*#__PURE__*/React.createElement(ModalHeader, {
     className: "".concat(blockClass, "__header"),
     title: title
@@ -259,7 +266,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     kind: "secondary",
-    onClick: onClose
+    onClick: onCloseHandler
   }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     kind: "primary",
@@ -362,11 +369,11 @@ ImportModal.propTypes = {
   /**
    * Specify a handler for "submitting" modal. Access the imported file via `file => {}`
    */
-  onRequestSubmit: PropTypes.func,
+  onRequestSubmit: PropTypes.func.isRequired,
   /**
    * Specify whether the Modal is currently open
    */
-  open: PropTypes.bool,
+  open: PropTypes.bool.isRequired,
   /**
    * Specify the text for the primary button
    */

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

@@ -15,34 +15,19 @@ var UnreadNotificationBell = function UnreadNotificationBell() {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React.createElement("title", null, "Unread notification bell"), /*#__PURE__*/React.createElement("g", {
-    id: "Page-1",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("g", {
     id: "Group",
     transform: "translate(-1.000000, 0.000000)"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "notification"
   }, /*#__PURE__*/React.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.createElement("rect", {
-    id: "_Transparent_Rectangle_",
-    x: "0",
-    y: "0",
-    width: "20",
-    height: "20"
-  })), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/React.createElement("circle", {
     id: "Oval",
     stroke: "#161616",
     fill: "#DA1E28",
     cx: "15",
     cy: "4.375",
     r: "2.5"
-  }))));
+  })));
 };
 export { UnreadNotificationBell };

package/es/components/PageHeader/PageHeaderUtils.js

@@ -65,11 +65,11 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     var scrollableContainer = 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/es/components/Tearsheet/TearsheetShell.js

@@ -216,7 +216,8 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/React.createElement(Wrap, {
-      className: "".concat(bc, "__header-content")
+      className: "".concat(bc, "__header-content"),
+      element: wide ? Layer : undefined
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__header-fields")
     }, /*#__PURE__*/React.createElement(Wrap, {
@@ -241,12 +242,10 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__main"),
-      alwaysRender: includeActions,
-      element: wide ? Layer : undefined
+      alwaysRender: includeActions
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right',
-      element: wide ? Layer : undefined
+      alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/React.createElement(Wrap, {
       className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
       neverRender: influencerPosition !== 'right'

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -30,6 +30,20 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
     setModalIsOpen = _ref.setModalIsOpen;
+  var continueToNextStep = 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
   useEffect(function () {
     var onUnmount = function onUnmount() {
@@ -157,9 +171,9 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
               // 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;
             });
           },
@@ -187,17 +201,4 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       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 = 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]);
 };

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

@@ -103,6 +103,6 @@ StackblitzLink.propTypes = {
  * @returns "dark" or "light"
  */
 export 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';
 };

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]

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/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/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/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/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/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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.22.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.35",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -64,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.2.6",
     "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.22",
+    "jest-config-ibm-cloud-cognitive": "^0.24.23",
     "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "30b5fa97e450c8587e04b5e2e1be98c9a7379d45"
+  "gitHead": "32a25a322d0213e135506f646b0ad5721e67d813"
 }

package/scss/components/DataSpreadsheet/_storybook-styles.scss

@@ -4,3 +4,9 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
+$story-anchor: 'data-spreadsheet';
+div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+  overflow: auto;
+  width: 100%;
+}

package/scss/components/Datagrid/_storybook-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// 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.
@@ -122,3 +122,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     width: 100vw;
   }
 }
+
+$story-anchor: 'datagrid';
+div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+  overflow: auto;
+  width: 100%;
+}

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -75,6 +75,13 @@ $action-set-height: rem(64px);
 }
 
 // Carbon overrides
+.#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+}
+
 .#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
   position: relative;
   background-color: $layer-02;