@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

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

@@ -7,223 +7,134 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
-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,
-    _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,
-    backButtonText = _ref.backButtonText,
-    cancelButtonText = _ref.cancelButtonText,
-    submitButtonText = _ref.submitButtonText,
-    nextButtonText = _ref.nextButtonText,
-    isSubmitting = _ref.isSubmitting,
-    componentBlockClass = _ref.componentBlockClass,
-    setCreateComponentActions = _ref.setCreateComponentActions,
-    setModalIsOpen = _ref.setModalIsOpen,
-    experimentalSecondarySubmit = _ref.experimentalSecondarySubmit,
-    experimentalSecondarySubmitText = _ref.experimentalSecondarySubmitText;
-  var continueToNextStep = React.useCallback(function () {
+const useCreateComponentStepChange = _ref => {
+  let {
+    firstIncludedStep,
+    lastIncludedStep,
+    stepData,
+    onPrevious,
+    onNext,
+    isSubmitDisabled,
+    setCurrentStep,
+    setIsSubmitting,
+    setLoadingPrevious = null,
+    loadingPrevious = false,
+    onClose,
+    onRequestSubmit,
+    componentName,
+    currentStep,
+    backButtonText,
+    cancelButtonText,
+    submitButtonText,
+    nextButtonText,
+    isSubmitting,
+    componentBlockClass,
+    setCreateComponentActions,
+    setModalIsOpen,
+    experimentalSecondarySubmit,
+    experimentalSecondarySubmitText
+  } = _ref;
+  const continueToNextStep = React.useCallback(() => {
     setIsSubmitting(false);
-    setCurrentStep(function (prev) {
+    setCurrentStep(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));
+      } while (!stepData[prev - 1]?.shouldIncludeStep);
       return prev;
     });
   }, [setCurrentStep, setIsSubmitting, stepData]);
-  var moveToPreviousStep = React.useCallback(function () {
+  const moveToPreviousStep = React.useCallback(() => {
     if (componentName !== 'CreateFullPage') {
       setLoadingPrevious(false);
     }
-    setCurrentStep(function (prev) {
+    setCurrentStep(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));
+      } while (!stepData[prev - 1]?.shouldIncludeStep);
       return prev;
     });
   }, [setCurrentStep, stepData, setLoadingPrevious, componentName]);
 
   // useEffect to handle multi step logic
-  React.useEffect(function () {
-    var onUnmount = function onUnmount() {
+  React.useEffect(() => {
+    const onUnmount = () => {
       if (componentName !== 'CreateFullPage') {
         setCurrentStep(1);
       }
       setIsSubmitting(false);
       onClose();
     };
-    var handleOnRequestSubmit = /*#__PURE__*/function () {
-      var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return onRequestSubmit();
-            case 3:
-              onUnmount();
-              _context.next = 10;
-              break;
-            case 6:
-              _context.prev = 6;
-              _context.t0 = _context["catch"](0);
-              setIsSubmitting(false);
-              console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[0, 6]]);
-      }));
-      return function handleOnRequestSubmit() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    var handlePrevious = /*#__PURE__*/function () {
-      var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
-        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              setLoadingPrevious === null || setLoadingPrevious === void 0 || setLoadingPrevious(true);
-              if (!(typeof onPrevious === 'function')) {
-                _context2.next = 13;
-                break;
-              }
-              _context2.prev = 2;
-              _context2.next = 5;
-              return onPrevious();
-            case 5:
-              moveToPreviousStep();
-              _context2.next = 11;
-              break;
-            case 8:
-              _context2.prev = 8;
-              _context2.t0 = _context2["catch"](2);
-              console.warn("".concat(componentName, " onBack error: ").concat(_context2.t0));
-            case 11:
-              _context2.next = 14;
-              break;
-            case 13:
-              moveToPreviousStep();
-            case 14:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, null, [[2, 8]]);
-      }));
-      return function handlePrevious() {
-        return _ref3.apply(this, arguments);
-      };
-    }();
-    var handleNext = /*#__PURE__*/function () {
-      var _ref4 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee3() {
-        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              setIsSubmitting(true);
-              if (!(typeof onNext === 'function')) {
-                _context3.next = 14;
-                break;
-              }
-              _context3.prev = 2;
-              _context3.next = 5;
-              return onNext();
-            case 5:
-              continueToNextStep();
-              _context3.next = 12;
-              break;
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](2);
-              setIsSubmitting(false);
-              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
-            case 12:
-              _context3.next = 15;
-              break;
-            case 14:
-              continueToNextStep();
-            case 15:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3, null, [[2, 8]]);
-      }));
-      return function handleNext() {
-        return _ref4.apply(this, arguments);
-      };
-    }();
-    var handleSubmit = /*#__PURE__*/function () {
-      var _ref5 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee4() {
-        return _rollupPluginBabelHelpers.regeneratorRuntime().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')) {
-                _context4.next = 15;
-                break;
-              }
-              _context4.prev = 2;
-              _context4.next = 5;
-              return onNext();
-            case 5:
-              _context4.next = 7;
-              return handleOnRequestSubmit();
-            case 7:
-              _context4.next = 13;
-              break;
-            case 9:
-              _context4.prev = 9;
-              _context4.t0 = _context4["catch"](2);
-              setIsSubmitting(false);
-              console.warn("".concat(componentName, " onNext error: ").concat(_context4.t0));
-            case 13:
-              _context4.next = 17;
-              break;
-            case 15:
-              _context4.next = 17;
-              return handleOnRequestSubmit();
-            case 17:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4, null, [[2, 9]]);
-      }));
-      return function handleSubmit() {
-        return _ref5.apply(this, arguments);
-      };
-    }();
-    var handleExperimentalSecondarySubmit = function handleExperimentalSecondarySubmit() {
-      if (typeof (experimentalSecondarySubmit === null || experimentalSecondarySubmit === void 0 ? void 0 : experimentalSecondarySubmit.onClick) === 'function') {
+    const handleOnRequestSubmit = async () => {
+      // check if onRequestSubmit returns a promise
+      try {
+        const options = await onRequestSubmit();
+        // if onRequestSubmit returns an object with the preventClose property, then check if
+        if (!options?.preventClose) {
+          onUnmount();
+        }
+      } catch (error) {
+        setIsSubmitting(false);
+        console.warn(`${componentName} submit error: ${error}`);
+      }
+    };
+    const handlePrevious = async () => {
+      setLoadingPrevious?.(true);
+      if (typeof onPrevious === 'function') {
+        try {
+          await onPrevious();
+          moveToPreviousStep();
+        } catch (error) {
+          console.warn(`${componentName} onBack error: ${error}`);
+        }
+      } else {
+        moveToPreviousStep();
+      }
+    };
+    const handleNext = async () => {
+      setIsSubmitting(true);
+      if (typeof onNext === 'function') {
+        try {
+          await onNext();
+          continueToNextStep();
+        } catch (error) {
+          setIsSubmitting(false);
+          console.warn(`${componentName} onNext error: ${error}`);
+        }
+      } else {
+        continueToNextStep();
+      }
+    };
+    const handleSubmit = async () => {
+      setIsSubmitting(true);
+      // last step should have onNext as well
+      if (typeof onNext === 'function') {
+        try {
+          await onNext();
+          await handleOnRequestSubmit();
+        } catch (error) {
+          setIsSubmitting(false);
+          console.warn(`${componentName} onNext error: ${error}`);
+        }
+      } else {
+        await handleOnRequestSubmit();
+      }
+    };
+    const handleExperimentalSecondarySubmit = () => {
+      if (typeof experimentalSecondarySubmit?.onClick === 'function') {
         experimentalSecondarySubmit.onClick();
       }
     };
-    if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
-      var buttons = [];
-      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1) {
+    if (stepData?.length > 0) {
+      const buttons = [];
+      if (stepData?.length > 1) {
         buttons.push({
           key: 'create-action-button-back',
           label: backButtonText,
@@ -236,18 +147,16 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       buttons.push({
         key: 'create-action-button-cancel',
         label: cancelButtonText,
-        onClick: componentName === 'CreateFullPage' ? function () {
-          return setModalIsOpen(true);
-        } : onUnmount,
+        onClick: componentName === 'CreateFullPage' ? () => setModalIsOpen(true) : onUnmount,
         kind: 'ghost'
       });
-      if (experimentalSecondarySubmitText && !(experimentalSecondarySubmit !== null && experimentalSecondarySubmit !== void 0 && experimentalSecondarySubmit.hideSecondarySubmit)) {
+      if (experimentalSecondarySubmitText && !experimentalSecondarySubmit?.hideSecondarySubmit) {
         buttons.push({
           key: 'create-action-button-experimentalSecondarySubmit',
           label: experimentalSecondarySubmitText,
           onClick: handleExperimentalSecondarySubmit,
           kind: 'secondary',
-          disabled: experimentalSecondarySubmit === null || experimentalSecondarySubmit === void 0 ? void 0 : experimentalSecondarySubmit.disabled
+          disabled: experimentalSecondarySubmit?.disabled
         });
       }
       buttons.push({
@@ -257,7 +166,7 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         disabled: isSubmitDisabled,
         kind: 'primary',
         loading: isSubmitting,
-        className: "".concat(componentBlockClass, "__create-button")
+        className: `${componentBlockClass}__create-button`
       });
       setCreateComponentActions(buttons);
     }

package/lib/global/js/hooks/useFocus.js

@@ -7,114 +7,93 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var React = require('react');
 
-var getSpecificElement = function getSpecificElement(parentEl, elementId) {
-  var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
-  return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
+const getSpecificElement = (parentEl, elementId) => {
+  const element = parentEl?.querySelector(elementId);
+  return elementId && !element?.disabled ? element : null;
 };
-var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
-  var _getFocusable3, _getFocusable4, _getFocusable5, _getFocusable6;
-  var carbonPrefix = react.usePrefix();
-  var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
-  var sidePanelBaseClass = "".concat(settings.pkg.prefix, "--side-panel");
+const useFocus = (modalRef, selectorPrimaryFocus) => {
+  const carbonPrefix = react.usePrefix();
+  const tearsheetBaseClass = `${settings.pkg.prefix}--tearsheet`;
+  const sidePanelBaseClass = `${settings.pkg.prefix}--side-panel`;
   // Querying focusable element in the modal
   // Query to exclude hidden elements in the modal from querySelectorAll() method
   // feel free to include more if needed :)
-  var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"],[disabled])");
+  const notQuery = `:not(.${carbonPrefix}--visually-hidden,.${tearsheetBaseClass}__header--no-close-icon,.${carbonPrefix}--btn--disabled,[aria-hidden="true"],[tabindex="-1"],[disabled])`;
   // Queries to include element types button, input, select, textarea
-  var queryButton = "button".concat(notQuery);
-  var queryInput = "input".concat(notQuery);
-  var querySelect = "select".concat(notQuery);
-  var queryTextarea = "textarea".concat(notQuery);
-  var queryLink = "[href]".concat(notQuery);
-  var queryAnchor = "a".concat(notQuery);
-  var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
-  var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
+  const queryButton = `button${notQuery}`;
+  const queryInput = `input${notQuery}`;
+  const querySelect = `select${notQuery}`;
+  const queryTextarea = `textarea${notQuery}`;
+  const queryLink = `[href]${notQuery}`;
+  const queryAnchor = `a${notQuery}`;
+  const queryTabIndex = `[tabindex="0"]${notQuery}`;
+  const querySidePanelScroll = `.${sidePanelBaseClass}--scrolls`;
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryAnchor, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
-  var getFocusable = React.useCallback(function () {
-    var _modalRef$current, _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
+  const query = `${queryButton},${queryLink},${queryAnchor},${queryInput},${querySelect},${queryTextarea},${queryTabIndex},${querySidePanelScroll}`;
+  const getFocusable = React.useCallback(() => {
     // Selecting all focusable elements based on the above conditions
-    var focusableElements = modalRef === null || modalRef === void 0 || (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : _modalRef$current.querySelectorAll("".concat(query));
-    if ((_focusableElements = focusableElements) !== null && _focusableElements !== void 0 && _focusableElements.length) {
-      focusableElements = Array.prototype.filter.call(focusableElements, function (el) {
-        var _window;
-        return ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(el)) === null || _window === void 0 ? void 0 : _window.display) !== 'none';
-      });
+    let focusableElements = modalRef?.current?.querySelectorAll(`${query}`);
+    if (focusableElements?.length) {
+      focusableElements = Array.prototype.filter.call(focusableElements, el => window?.getComputedStyle(el)?.display !== 'none');
     }
-    var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
-    var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
-    var all = focusableElements;
-    var specified = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+    const first = focusableElements?.[0];
+    const last = focusableElements?.[focusableElements?.length - 1];
+    const all = focusableElements;
+    const specified = getSpecificElement(modalRef?.current, selectorPrimaryFocus);
     return {
-      first: first,
-      last: last,
-      all: all,
-      specified: specified
+      first,
+      last,
+      all,
+      specified
     };
   }, [modalRef, query, selectorPrimaryFocus]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     getFocusable();
   }, [getFocusable, modalRef]);
-  var handleKeyDown = /*#__PURE__*/function () {
-    var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
-      var _document, _document2, _getFocusable, first, last;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            // Checking whether the key is tab or not
-            if (event.key === 'Tab') {
-              // updating the focusable elements list
-              _getFocusable = getFocusable(), first = _getFocusable.first, last = _getFocusable.last;
-              if (event.shiftKey && ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === first) {
-                // Prevents the default "Tab" behavior
-                event.preventDefault();
-                // if the user press shift+tab and the current element not in focusable items
-                last === null || last === void 0 || last.focus();
-              } else if (!event.shiftKey && ((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement) === last) {
-                event.preventDefault();
-                // user pressing tab key only then
-                // focusing the first element if the current element is not in focusable items
-                first === null || first === void 0 || first.focus();
-              }
-            }
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function handleKeyDown(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var claimFocus = React.useCallback(function () {
-    var _window2;
-    var _getFocusable2 = getFocusable(),
-      first = _getFocusable2.first,
-      specified = _getFocusable2.specified;
-    if (specified && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specified)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none' && (specified === null || specified === void 0 ? void 0 : specified.tabIndex) !== -1) {
-      setTimeout(function () {
-        return specified.focus();
-      }, 0);
+  const handleKeyDown = async event => {
+    // Checking whether the key is tab or not
+    if (event.key === 'Tab') {
+      // updating the focusable elements list
+      const {
+        first,
+        last
+      } = getFocusable();
+      if (event.shiftKey && document?.activeElement === first) {
+        // Prevents the default "Tab" behavior
+        event.preventDefault();
+        // if the user press shift+tab and the current element not in focusable items
+        last?.focus();
+      } else if (!event.shiftKey && document?.activeElement === last) {
+        event.preventDefault();
+        // user pressing tab key only then
+        // focusing the first element if the current element is not in focusable items
+        first?.focus();
+      }
+    }
+  };
+  const claimFocus = React.useCallback(() => {
+    const {
+      first,
+      specified
+    } = getFocusable();
+    if (specified && window?.getComputedStyle(specified)?.display !== 'none' && specified?.tabIndex !== -1) {
+      setTimeout(() => specified.focus(), 0);
     } else {
-      setTimeout(function () {
-        return first === null || first === void 0 ? void 0 : first.focus();
-      }, 0);
+      setTimeout(() => first?.focus(), 0);
     }
   }, [getFocusable]);
   return {
-    firstElement: (_getFocusable3 = getFocusable()) === null || _getFocusable3 === void 0 ? void 0 : _getFocusable3.first,
-    lastElement: (_getFocusable4 = getFocusable()) === null || _getFocusable4 === void 0 ? void 0 : _getFocusable4.last,
-    allElements: (_getFocusable5 = getFocusable()) === null || _getFocusable5 === void 0 ? void 0 : _getFocusable5.all,
-    specifiedElement: (_getFocusable6 = getFocusable()) === null || _getFocusable6 === void 0 ? void 0 : _getFocusable6.specified,
+    firstElement: getFocusable()?.first,
+    lastElement: getFocusable()?.last,
+    allElements: getFocusable()?.all,
+    specifiedElement: getFocusable()?.specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable,
-    claimFocus: claimFocus
+    claimFocus
   };
 };
 

package/lib/global/js/hooks/useIsomorphicEffect.js

@@ -11,6 +11,6 @@ var React = require('react');
 
 // Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
 // useLayoutEffect on the client, useEffect on the server
-var useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 exports.useIsomorphicEffect = useIsomorphicEffect;