@carbon/ibm-products 2.6.0 → 2.7.0

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.0",
+  "version": "2.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -70,7 +70,7 @@
     "npm-check-updates": "^16.10.15",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.1",
-    "sass": "^1.63.6",
+    "sass": "1.63.6",
     "yargs": "^17.7.2"
   },
   "dependencies": {
@@ -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": "f1e9562497e15c834c38b7b9bcd330102523d468"
+  "gitHead": "0aebc8b879fd99f6bd45745dd51e90d382a24182"
 }

package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss

@@ -1,20 +1,20 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 
 @use '../../../global/styles/project-settings';
 
 $block-class: #{project-settings.$pkg-prefix}--datagrid;
-.#{$block-class}__center-align-header {
+.#{$block-class}__center-align-header,
+.#{$block-class}__center-align-header .#{$block-class}--table-sort {
   width: 100%;
   text-align: center;
 }
 
-.#{$block-class}__center-align-cell-renderer.sortDisabled {
+.#{$block-class}__center-align-cell-renderer {
   margin-right: auto;
   margin-left: auto;
 }