@canonical/react-components 0.51.6 → 0.52.0

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -28,6 +28,14 @@ export type Props = PropsWithSpread<{
      * Function to perform the action prompted by the modal.
      */
     onConfirm: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Whether the confirm button should be in the loading state.
+     */
+    confirmButtonLoading?: boolean;
+    /**
+     * Whether the confirm button should be disabled.
+     */
+    confirmButtonDisabled?: boolean;
 }, Omit<ModalProps, "buttonRow">>;
-export declare const ConfirmationModal: ({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, ...props }: Props) => ReactElement;
+export declare const ConfirmationModal: ({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, ...props }: Props) => ReactElement;
 export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -7,6 +7,7 @@ exports.default = exports.ConfirmationModal = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
+var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const ConfirmationModal = _ref => {
@@ -17,6 +18,8 @@ const ConfirmationModal = _ref => {
     confirmButtonLabel,
     confirmExtra,
     onConfirm,
+    confirmButtonLoading,
+    confirmButtonDisabled,
     ...props
   } = _ref;
   const handleClick = action => event => {
@@ -31,10 +34,12 @@ const ConfirmationModal = _ref => {
     buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, {
       className: "u-no-margin--bottom",
       onClick: handleClick(props.close)
-    }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
       appearance: confirmButtonAppearance,
       className: "u-no-margin--bottom",
-      onClick: handleClick(onConfirm)
+      onClick: handleClick(onConfirm),
+      loading: confirmButtonLoading,
+      disabled: confirmButtonDisabled
     }, confirmButtonLabel))
   }, props), children);
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -73,6 +73,7 @@ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFit
  * @param positionElementClassName An optional class to apply to the element that wraps the children.
  * @param tooltipClassName An optional class to apply to the tooltip message element.
  * @param zIndex The z-index value of the tooltip message element.
+ * @param delay Delay in ms after which Tooltip will appear (defaults to 350ms).
  */
 declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -115,6 +115,7 @@ const adjustForWindow = (position, fitsWindow) => {
  * @param positionElementClassName An optional class to apply to the element that wraps the children.
  * @param tooltipClassName An optional class to apply to the tooltip message element.
  * @param zIndex The z-index value of the tooltip message element.
+ * @param delay Delay in ms after which Tooltip will appear (defaults to 350ms).
  */
 exports.adjustForWindow = adjustForWindow;
 const Tooltip = _ref => {
@@ -210,9 +211,15 @@ const Tooltip = _ref => {
     openPortal(e);
   };
   const delayedOpenPortal = (0, _react.useCallback)(() => {
+    if (isOpen) {
+      return;
+    }
+    if (timer) {
+      clearTimeout(timer);
+    }
     const timeout = setTimeout(() => openPortal(), delay);
     setTimer(timeout);
-  }, [delay, openPortal]);
+  }, [delay, openPortal, timer, isOpen]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
     className: className,
     onBlur: handleBlur,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.51.6",
+  "version": "0.52.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",