@carbon/ibm-products 2.44.0 → 2.45.0-rc.0

package/es/components/EditInPlace/EditInPlace.js

@@ -15,7 +15,7 @@ import { pkg, carbon } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
 var _Close, _Checkmark, _Edit;
-var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "size", "tooltipAlignment", "value"];
+var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "onBlur", "saveLabel", "size", "tooltipAlignment", "value"];
 var componentName = 'EditInPlace';
 var blockClass = "".concat(pkg.prefix, "--edit-in-place");
 var defaults = {
@@ -36,6 +36,7 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onCancel = _ref.onCancel,
     onChange = _ref.onChange,
     onSave = _ref.onSave,
+    onBlur = _ref.onBlur,
     saveLabel = _ref.saveLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
@@ -103,15 +104,21 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onCancel(initialValue);
   };
   var onBlurHandler = function onBlurHandler(e) {
-    // if (readOnly || escaping.current) {
-    if (escaping.current) {
-      return;
-    }
-    if (!isTargetingChild(e)) {
-      if (canSave) {
-        onSaveHandler();
-      } else {
-        onCancelHandler();
+    // Use custom function provided if passed through
+    if (typeof onBlur === 'function' && !isTargetingChild(e)) {
+      onBlur(initialValue);
+      setFocused(false);
+    } else {
+      // Use Default behavior if no custom function provided
+      if (escaping.current) {
+        return;
+      }
+      if (!isTargetingChild(e)) {
+        if (canSave) {
+          onSaveHandler();
+        } else {
+          onCancelHandler();
+        }
       }
     }
   };
@@ -251,6 +258,10 @@ EditInPlace.propTypes = _objectSpread2({
    * Provide the text that will be read by a screen reader when visiting this control
    */
   labelText: PropTypes.string.isRequired,
+  /**
+   * handler to add custom onBlur event
+   */
+  onBlur: PropTypes.func,
   /**
    * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
    */

package/es/components/EditTearsheet/EditTearsheet.d.ts

@@ -51,7 +51,8 @@ interface EditTearsheetProps extends PropsWithChildren {
      */
     onFormChange?: (formIndex: number) => number;
     /**
-     * Specify a handler for submitting the tearsheet.
+     * Specify a handler for submitting the tearsheet. Throughout its execution
+     * the submit button will be disabled and include a loading indicator.
      */
     onRequestSubmit: () => void;
     /**

package/es/components/EditTearsheet/EditTearsheet.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, createContext } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -59,10 +59,45 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var handleOnRequestSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsSubmitting(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return onRequestSubmit();
+          case 4:
+            _context.next = 9;
+            break;
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](1);
+            console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+          case 9:
+            setIsSubmitting(false);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 6]]);
+    }));
+    return function handleOnRequestSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var actions = [{
     key: 'edit-action-button-submit',
     label: submitButtonText,
-    onClick: onRequestSubmit,
+    onClick: function onClick() {
+      return handleOnRequestSubmit();
+    },
+    loading: isSubmitting,
     kind: 'primary'
   }, {
     key: 'edit-action-button-cancel',
@@ -70,14 +105,14 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: onClose,
     kind: 'ghost'
   }];
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentForm = _useState2[0],
-    setCurrentForm = _useState2[1];
-  var _useState3 = useState([]),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    formTitles = _useState4[0],
-    setFormTitles = _useState4[1];
+    currentForm = _useState4[0],
+    setCurrentForm = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    formTitles = _useState6[0],
+    setFormTitles = _useState6[1];
   var contentRef = useRef(null);
   var handleCurrentForm = function handleCurrentForm(formIndex) {
     setCurrentForm(formIndex);