@carbon/ibm-products 2.6.1 → 2.7.0

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

@@ -16,7 +16,7 @@ var _pconsole = _interopRequireDefault(require("../../../global/js/utils/pconsol
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
 var _DatagridContent = require("./DatagridContent");
 var _FilterProvider = require("./addons/Filtering/FilterProvider");
-var _excluded = ["datagridState"];
+var _excluded = ["datagridState", "title"];
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -31,6 +31,7 @@ var componentName = 'Datagrid';
  */
 var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
+    title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (!datagridState) {
     _pconsole.default.warn('Datagrid was not passed datagridState which is required to render this component.');
@@ -44,6 +45,10 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className = datagridState.className,
     filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  var props = {
+    title: title,
+    datagridState: datagridState
+  };
   return /*#__PURE__*/_react.default.createElement(_FilterProvider.FilterProvider, {
     filters: filters
   }, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
@@ -52,11 +57,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, (0, _devtools.getDevtoolsProps)(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
-  }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
-    datagridState: datagridState
-  })) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
-    datagridState: datagridState
-  }))));
+  }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, props)) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, props))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -70,5 +71,9 @@ Datagrid.propTypes = {
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
-  datagridState: _propTypes.default.object.isRequired
+  datagridState: _propTypes.default.object.isRequired,
+  /**
+   * Table title
+   */
+  title: _propTypes.default.string
 };

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

@@ -8,23 +8,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.DatagridContent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _Filtering = require("./addons/Filtering");
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@carbon/react");
-var _layout = require("@carbon/layout");
-var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
+var _settings = require("../../../settings");
+var _constants = require("./addons/Filtering/constants");
 var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
+var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
 var _DatagridToolbar = _interopRequireDefault(require("./DatagridToolbar"));
-var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
-var _settings = require("../../../settings");
+var _FilterSummary = require("../../FilterSummary");
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
-var _Filtering = require("./addons/Filtering");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
+var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
+var _layout = require("@carbon/layout");
 var _hooks = require("../../../global/js/hooks");
 var _hooks2 = require("../../DataSpreadsheet/hooks");
-var _FilterSummary = require("../../FilterSummary");
-var _constants = require("./addons/Filtering/constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -37,7 +37,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
-  var datagridState = _ref.datagridState;
+  var datagridState = _ref.datagridState,
+    title = _ref.title;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -105,7 +106,8 @@ var DatagridContent = function DatagridContent(_ref) {
       } : null,
       onFocus: withInlineEdit ? function () {
         return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
-      } : null
+      } : null,
+      title: title
     }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: rows
     })));
@@ -136,7 +138,8 @@ var DatagridContent = function DatagridContent(_ref) {
       filters: filterTags,
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
-      }
+      },
+      renderLabel: filterProps.renderLabel
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
@@ -188,5 +191,6 @@ DatagridContent.propTypes = {
     setAllFilters: _propTypes.default.func,
     getFilterProps: _propTypes.default.func,
     state: _propTypes.default.object
-  })
+  }),
+  title: _propTypes.default.string
 };

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

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
+var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
 /**
  * Copyright IBM Corp. 2020, 2022
  *
@@ -22,6 +23,16 @@ var _settings = require("../../../settings");
 // @flow
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var getAccessibilityProps = function getAccessibilityProps(header) {
+  var props = {};
+  var title = (0, _getColTitle.default)(header);
+  if (title) {
+    props.title = title;
+  } else {
+    props['aria-hidden'] = true;
+  }
+  return props;
+};
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
     role: false
@@ -44,7 +55,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }), {
       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"), datagridState.isTableSortable), (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(), {
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
       className: "".concat(blockClass, "__resizer")
     })));
   }));

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

@@ -11,6 +11,7 @@ var _react2 = require("@carbon/react");
 var _common = require("./common");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _settings = require("../../../../../settings");
+var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -29,40 +30,17 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
     setFocusIndex = _ref.setFocusIndex;
-  // This function recursively looks for the nested header element until we can find the key which contains the title.
-  // This can happen if multiple hooks are used together that manipulate the rendering of the column
-  // header, such as `useColumnCenterAlign` and `useSortableColumns`.
-  var getNestedTitle = function getNestedTitle(component) {
-    if (component && !component.key) {
-      return getNestedTitle(component.children);
-    }
-    if (component && component.key && typeof component.key === 'string') {
-      return component.key;
-    }
-  };
-  var getColTitle = function getColTitle(col) {
-    if (!col) {
-      return;
-    }
-    var checkTitle = function checkTitle() {
-      if (col.Header().props.children.props && col.Header().props.children.props.title) {
-        return col.Header().props.children.props.title;
-      }
-      return getNestedTitle(col.Header().props.children.props);
-    };
-    return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
-  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!getColTitle(colDef);
+    return !!(0, _getColTitle2.default)(colDef);
   }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
     var _getColTitle;
-    return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   }).map(function (colDef, i) {
-    var colHeaderTitle = getColTitle(colDef);
+    var colHeaderTitle = (0, _getColTitle2.default)(colDef);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// This function recursively looks for the nested header element until we can find the key which contains the title.
+// This can happen if multiple hooks are used together that manipulate the rendering of the column
+// header, such as `useColumnCenterAlign` and `useSortableColumns`.
+var getNestedTitle = function getNestedTitle(component) {
+  if (component && !component.key) {
+    return getNestedTitle(component.children);
+  }
+  if (component && component.key && typeof component.key === 'string') {
+    return component.key;
+  }
+};
+var getColTitle = function getColTitle(col) {
+  var _col$Header;
+  if (!col) {
+    return;
+  }
+  var checkTitle = function checkTitle() {
+    if (col.Header().props.children.props && col.Header().props.children.props.title) {
+      return col.Header().props.children.props.title;
+    }
+    return getNestedTitle(col.Header().props.children.props);
+  };
+  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 || (_col$Header = col.Header) === null || _col$Header === void 0 || (_col$Header = _col$Header.props) === null || _col$Header === void 0 ? void 0 : _col$Header.title;
+};
+var _default = getColTitle;
+exports.default = _default;

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -336,7 +336,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/_react.default.createElement("h1", {
+  }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     size: "sm",
@@ -345,7 +345,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     onClick: function onClick() {
       return onDismissAllNotifications();
     }
-  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
+  }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
     id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
@@ -447,11 +447,11 @@ NotificationsPanel.propTypes = {
    */
   dismissSingleNotificationIconDescription: _propTypes.default.string,
   /**
-   * Determines if the `Do not disturb` toggle is on or off when the component is rendered
+   * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
    */
   doNotDisturbDefaultToggled: _propTypes.default.bool,
   /**
-   * Label for Do not disturb toggle
+   * Optional: Label for Do not disturb toggle
    */
   doNotDisturbLabel: _propTypes.default.string,
   /**
@@ -499,7 +499,7 @@ NotificationsPanel.propTypes = {
    */
   onDismissSingleNotification: _propTypes.default.func,
   /**
-   * Function that returns the current selected value of the disable notification toggle
+   * Optional: function that returns the current selected value of the disable notification toggle
    */
   onDoNotDisturbChange: _propTypes.default.func,
   /**

package/lib/components/OptionsTile/OptionsTile.js

@@ -223,13 +223,11 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     id: "".concat(id, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
-    labelA: "",
-    labelB: "",
     "aria-labelledby": titleId,
+    hideLabel: true,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked,
-    labelText: title
+    disabled: isLocked
   })), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
     open: isOpen,
     ref: detailsRef

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

@@ -9,7 +9,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -19,16 +19,19 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
   var firstIncludedStep = _ref.firstIncludedStep,
     lastIncludedStep = _ref.lastIncludedStep,
     stepData = _ref.stepData,
+    onPrevious = _ref.onPrevious,
     onNext = _ref.onNext,
     isSubmitDisabled = _ref.isSubmitDisabled,
     setCurrentStep = _ref.setCurrentStep,
     setIsSubmitting = _ref.setIsSubmitting,
-    setShouldViewAll = _ref.setShouldViewAll,
+    _ref$setLoadingPrevio = _ref.setLoadingPrevious,
+    setLoadingPrevious = _ref$setLoadingPrevio === void 0 ? null : _ref$setLoadingPrevio,
+    _ref$loadingPrevious = _ref.loadingPrevious,
+    loadingPrevious = _ref$loadingPrevious === void 0 ? false : _ref$loadingPrevious,
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     componentName = _ref.componentName,
     currentStep = _ref.currentStep,
-    shouldViewAll = _ref.shouldViewAll,
     backButtonText = _ref.backButtonText,
     cancelButtonText = _ref.cancelButtonText,
     submitButtonText = _ref.submitButtonText,
@@ -50,6 +53,21 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       return prev;
     });
   }, [setCurrentStep, setIsSubmitting, stepData]);
+  var moveToPreviousStep = (0, _react.useCallback)(function () {
+    if (componentName !== 'CreateFullPage') {
+      setLoadingPrevious(false);
+    }
+    setCurrentStep(function (prev) {
+      // Find previous included step to render
+      // 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 _stepData2;
+        prev--;
+      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, stepData, setLoadingPrevious, componentName]);
 
   // useEffect to handle multi step logic
   (0, _react.useEffect)(function () {
@@ -58,7 +76,6 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         setCurrentStep(0);
       }
       setIsSubmitting(false);
-      setShouldViewAll(false);
       onClose();
     };
     var handleOnRequestSubmit = /*#__PURE__*/function () {
@@ -88,104 +105,136 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         return _ref2.apply(this, arguments);
       };
     }();
-    var handleNext = /*#__PURE__*/function () {
+    var handlePrevious = /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(componentName === 'CreateFullPage')) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              setLoadingPrevious(true);
+              if (!(typeof onPrevious === 'function')) {
+                _context2.next = 15;
+                break;
+              }
+              _context2.prev = 4;
+              _context2.next = 7;
+              return onPrevious();
+            case 7:
+              moveToPreviousStep();
+              _context2.next = 13;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](4);
+              console.warn("".concat(componentName, " onBack error: ").concat(_context2.t0));
+            case 13:
+              _context2.next = 16;
+              break;
+            case 15:
+              moveToPreviousStep();
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[4, 10]]);
+      }));
+      return function handlePrevious() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var handleNext = /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               setIsSubmitting(true);
               if (!(typeof onNext === 'function')) {
-                _context2.next = 14;
+                _context3.next = 14;
                 break;
               }
-              _context2.prev = 2;
-              _context2.next = 5;
+              _context3.prev = 2;
+              _context3.next = 5;
               return onNext();
             case 5:
               continueToNextStep();
-              _context2.next = 12;
+              _context3.next = 12;
               break;
             case 8:
-              _context2.prev = 8;
-              _context2.t0 = _context2["catch"](2);
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](2);
               setIsSubmitting(false);
-              console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
+              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
             case 12:
-              _context2.next = 15;
+              _context3.next = 15;
               break;
             case 14:
               continueToNextStep();
             case 15:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, null, [[2, 8]]);
+        }, _callee3, null, [[2, 8]]);
       }));
       return function handleNext() {
-        return _ref3.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     var handleSubmit = /*#__PURE__*/function () {
-      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               setIsSubmitting(true);
               // last step should have onNext as well
               if (!(typeof onNext === 'function')) {
-                _context3.next = 15;
+                _context4.next = 15;
                 break;
               }
-              _context3.prev = 2;
-              _context3.next = 5;
+              _context4.prev = 2;
+              _context4.next = 5;
               return onNext();
             case 5:
-              _context3.next = 7;
+              _context4.next = 7;
               return handleOnRequestSubmit();
             case 7:
-              _context3.next = 13;
+              _context4.next = 13;
               break;
             case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](2);
+              _context4.prev = 9;
+              _context4.t0 = _context4["catch"](2);
               setIsSubmitting(false);
-              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
+              console.warn("".concat(componentName, " onNext error: ").concat(_context4.t0));
             case 13:
-              _context3.next = 17;
+              _context4.next = 17;
               break;
             case 15:
-              _context3.next = 17;
+              _context4.next = 17;
               return handleOnRequestSubmit();
             case 17:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3, null, [[2, 9]]);
+        }, _callee4, null, [[2, 9]]);
       }));
       return function handleSubmit() {
-        return _ref4.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }();
     if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
       var buttons = [];
-      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1 && !shouldViewAll) {
+      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1) {
         buttons.push({
           key: 'create-action-button-back',
           label: backButtonText,
-          onClick: function onClick() {
-            return setCurrentStep(function (prev) {
-              // Find previous included step to render
-              // 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 _stepData2;
-                prev--;
-              } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
-              return prev;
-            });
-          },
+          onClick: handlePrevious,
           kind: 'secondary',
-          disabled: currentStep === firstIncludedStep
+          disabled: currentStep === firstIncludedStep,
+          loading: loadingPrevious
         });
       }
       buttons.push({
@@ -198,8 +247,8 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       });
       buttons.push({
         key: 'create-action-button-submit',
-        label: shouldViewAll ? submitButtonText : currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
-        onClick: shouldViewAll ? handleSubmit : currentStep < lastIncludedStep ? handleNext : handleSubmit,
+        label: currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
+        onClick: currentStep < lastIncludedStep ? handleNext : handleSubmit,
         disabled: isSubmitDisabled,
         kind: 'primary',
         loading: isSubmitting,
@@ -207,6 +256,6 @@ 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]);
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious]);
 };
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

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

@@ -26,11 +26,25 @@ var useResizeObserver = function useResizeObserver(ref, callback) {
   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
+    // ref for callback removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = callback;
   }, [callback]);
+  (0, _react.useEffect)(function () {
+    var getInitialSize = function getInitialSize() {
+      if (ref.current) {
+        var _ref$current;
+        var refComputedStyle = window.getComputedStyle(ref.current);
+        var initialWidth = (((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingRight) || 0));
+        setWidth(initialWidth);
+      }
+    };
+    if (!(ref !== null && ref !== void 0 && ref.current) && width !== 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, ref]);
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -8,7 +8,7 @@ exports.useRetrieveStepData = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 /**
- * 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.

package/lib/global/js/utils/StoryDocsPage.js

@@ -89,7 +89,6 @@ var StoryDocsPage = function StoryDocsPage(_ref2) {
   var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
   var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
   var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
-  console.log(processBlocks);
   var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
     return !!block.story;
   }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -85,14 +85,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.16.1",
-    "@carbon/layout": "^11.16.1",
-    "@carbon/motion": "^11.13.1",
-    "@carbon/react": "^1.33.2",
-    "@carbon/themes": "^11.21.1",
-    "@carbon/type": "^11.20.1",
+    "@carbon/grid": "^11.18.0",
+    "@carbon/layout": "^11.18.0",
+    "@carbon/motion": "^11.15.0",
+    "@carbon/react": "^1.35.0",
+    "@carbon/themes": "^11.23.0",
+    "@carbon/type": "^11.22.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "6730e827634c2dea7b4a865df25dde4cff4e2050"
+  "gitHead": "0aebc8b879fd99f6bd45745dd51e90d382a24182"
 }