@carbon/ibm-products 2.6.1 → 2.8.0

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -17,6 +17,7 @@ var _devtools = require("../../global/js/utils/devtools");
 var _hooks = require("../../global/js/hooks");
 var _settings = require("../../settings");
 var _utils = require("./utils");
+var _propsHelper = require("../../global/js/utils/props-helper");
 var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState");
 var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
@@ -305,7 +306,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, (0, _extends2.default)({
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.optional), notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    }, (0, _propsHelper.prepareProps)({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
       align: "left",
       kind: "ghost",
       size: "sm",
@@ -336,7 +337,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 +346,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"),
@@ -426,10 +427,7 @@ NotificationsPanel.propTypes = {
     description: _propTypes.default.string,
     link: _propTypes.default.shape({
       url: _propTypes.default.string,
-      text: _propTypes.default.string,
-      optional: _propTypes.default.shape({
-        // Add optional props here
-      })
+      text: _propTypes.default.string
     }),
     unread: _propTypes.default.bool,
     onNotificationClick: _propTypes.default.func
@@ -447,11 +445,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 +497,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/components/PageHeader/PageHeaderUtils.js

@@ -13,7 +13,7 @@ var _scrollableAncestor = require("../../global/js/utils/scrollableAncestor");
 var _react2 = require("@carbon/react");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Copyright IBM Corp. 2020, 2021
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Copyright IBM Corp. 2020, 2023
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * This source code is licensed under the Apache-2.0 license found in the
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * LICENSE file in the root directory of this source tree.
@@ -71,11 +71,14 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     var scrollableContainer = (0, _scrollableAncestor.scrollableAncestor)(headerRef.current);
 
     /* istanbul ignore next */
-    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.getBoundingClientRect().top : 0;
+    var scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
+
+    /* istanbul ignore next */
+    var offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.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 = (offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0) + scrollableContainerTop;
+    update.headerOffset = offsetMeasuringTop - scrollableContainerTop;
 
     /* istanbul ignore next */
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
@@ -133,6 +136,10 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
         update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
       }
     }
+    if (!hasActionBar && pageActionsEl) {
+      // adjust headerTopValue when there are no page actions or action bar items (margin above title row)
+      update.headerTopValue -= update.titleRowSpaceAbove;
+    }
     return _objectSpread(_objectSpread({}, previous), update);
   });
 };

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../settings");
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--tooltip-trigger");
+var componentName = 'TooltipTrigger';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
+ * no blanked button.
+ */
+var TooltipTrigger = function TooltipTrigger(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+    type: "button"
+  }, 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.
+    )
+  }), children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag.
+exports.TooltipTrigger = TooltipTrigger;
+exports.TooltipTrigger = TooltipTrigger = _settings.pkg.checkComponentEnabled(TooltipTrigger, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+TooltipTrigger.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+TooltipTrigger.propTypes = {
+  /**
+   * Child content of tooltip trigger
+   */
+  children: _propTypes.default.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+};

package/lib/components/TooltipTrigger/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TooltipTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _TooltipTrigger.TooltipTrigger;
+  }
+});
+var _TooltipTrigger = require("./TooltipTrigger");

package/lib/components/TooltipTrigger/useExample.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _settings = require("../../settings");
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var useExample = function useExample(initialTime) {
+  // NOTE: hooks cannot be called conditionally.
+  //
+  // ** If the hook uses other hooks then they must be called,
+  // ** this could lead to unexpected behavior.
+  // ** As some hooks may still be called even if the condition is false.
+
+  var _useState = (0, _react.useState)(
+    // Disable hook in a safe way if possible, else use despite feature disabled.
+    // Either a console error or warning will be logged.
+    initialTime),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+
+  // Use of the feature flag to
+  var feature = 'ExampleComponent.useExample';
+  var tryFeature = initialTime !== undefined;
+  var featureEnabled = tryFeature && _settings.pkg.checkReportFeatureEnabled(feature);
+  if (tryFeature && !featureEnabled) {
+    // Output a useful message if the feature is disabled.
+    console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
+  }
+
+  // Actual hook is code is below
+  (0, _react.useEffect)(function () {
+    if (!featureEnabled) {
+      return;
+    }
+
+    // turn off all or part of the feature
+    if (time > 0) {
+      setTimeout(function () {
+        setTime(Math.max(0, time - 0.1));
+      }, 100);
+    }
+  }, [featureEnabled, time]);
+  return [time];
+};
+var _default = useExample;
+exports.default = _default;

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -15,6 +15,7 @@ require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
 var _icons = require("@carbon/react/icons");
 var _react2 = require("@carbon/react");
+var _TooltipTrigger = require("../TooltipTrigger");
 var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -52,6 +53,7 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     _ref$tooltipAlignment = _ref.tooltipAlignment,
     tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
   var icons = {
     user: {
       md: function md(props) {
@@ -127,12 +129,11 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
       className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
     }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
   };
-  return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+  return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
+    align: tooltipAlignment,
     label: tooltipText,
-    className: "".concat(blockClass, "__tooltip"),
-    kind: "ghost",
-    align: tooltipAlignment
-  }, renderUserProfileImage()) : renderUserProfileImage());
+    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+  }, /*#__PURE__*/_react.default.createElement(_TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
 // Return a placeholder if not released and not enabled by feature flag

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

@@ -15,22 +15,38 @@ var _react = require("react");
  */
 
 var useResizeObserver = function useResizeObserver(ref, callback) {
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(-1),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
   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, _ref$current2;
+        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));
+        var initialHeight = (((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingTop) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0));
+        setWidth(initialWidth);
+        setHeight(initialHeight);
+      }
+    };
+    if (!(ref !== null && ref !== void 0 && ref.current) || width >= 0 && height >= 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, height, 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;