@canonical/react-components 0.51.0 → 0.51.1

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

@@ -27,7 +27,7 @@ export type Props = PropsWithSpread<{
     /**
      * Function to perform the action prompted by the modal.
      */
-    onConfirm: (e: MouseEvent<HTMLElement>) => void;
+    onConfirm: (event: MouseEvent<HTMLElement>) => void;
 }, Omit<ModalProps, "buttonRow">>;
 export declare const ConfirmationModal: ({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, ...props }: Props) => ReactElement;
 export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -19,14 +19,22 @@ const ConfirmationModal = _ref => {
     onConfirm,
     ...props
   } = _ref;
+  const handleClick = action => event => {
+    if (!props.shouldPropagateClickEvent) {
+      event.stopPropagation();
+    }
+    if (action) {
+      action(event);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, {
       className: "u-no-margin--bottom",
-      onClick: props.close
+      onClick: handleClick(props.close)
     }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_Button.default, {
       appearance: confirmButtonAppearance,
       className: "u-no-margin--bottom",
-      onClick: onConfirm
+      onClick: handleClick(onConfirm)
     }, confirmButtonLabel))
   }, props), children);
 };

package/dist/components/Modal/Modal.d.ts

@@ -22,6 +22,10 @@ export type Props = PropsWithSpread<{
      * The title of the modal.
      */
     title?: ReactNode | null;
+    /**
+     * Whether the button click event should propagate.
+     */
+    shouldPropagateClickEvent?: boolean;
 }, HTMLProps<HTMLDivElement>>;
-export declare const Modal: ({ buttonRow, children, className, close, title, ...wrapperProps }: Props) => ReactElement;
+export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, ...wrapperProps }: Props) => ReactElement;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -17,6 +17,7 @@ const Modal = _ref => {
     className,
     close,
     title,
+    shouldPropagateClickEvent = false,
     ...wrapperProps
   } = _ref;
   // list of focusable selectors is based on this Stack Overflow answer:
@@ -27,29 +28,31 @@ const Modal = _ref => {
   const shouldClose = (0, _react.useRef)(false);
   const modalRef = (0, _react.useRef)(null);
   const focusableModalElements = (0, _react.useRef)(null);
-  const handleTabKey = e => {
+  const handleTabKey = event => {
     if (focusableModalElements.current.length > 0) {
       const firstElement = focusableModalElements.current[0];
       const lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
-      if (!e.shiftKey && document.activeElement === lastElement) {
+      if (!event.shiftKey && document.activeElement === lastElement) {
         firstElement.focus();
-        e.preventDefault();
+        event.preventDefault();
       }
-      if (e.shiftKey && document.activeElement === firstElement) {
+      if (event.shiftKey && document.activeElement === firstElement) {
         lastElement.focus();
-        return e.preventDefault();
+        return event.preventDefault();
       }
     }
   };
-  const handleEscKey = e => {
-    if ("nativeEvent" in e && e.nativeEvent.stopImmediatePropagation) {
-      e.nativeEvent.stopImmediatePropagation();
-    } else if ("stopImmediatePropagation" in e) {
-      e.stopImmediatePropagation();
-    } else if (e.stopPropagation) {
-      e.stopPropagation();
+  const handleEscKey = event => {
+    if ("nativeEvent" in event && event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    } else if ("stopImmediatePropagation" in event) {
+      event.stopImmediatePropagation();
+    } else if (event.stopPropagation) {
+      event.stopPropagation();
+    }
+    if (close) {
+      close();
     }
-    close();
   };
   const keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
   (0, _react.useEffect)(() => {
@@ -68,9 +71,9 @@ const Modal = _ref => {
     });
   }, [close]);
   (0, _react.useEffect)(() => {
-    const keyDown = e => {
-      const listener = keyListenersMap.get(e.code);
-      return listener && listener(e);
+    const keyDown = event => {
+      const listener = keyListenersMap.get(event.code);
+      return listener && listener(event);
     };
     document.addEventListener("keydown", keyDown);
     return () => {
@@ -88,11 +91,19 @@ const Modal = _ref => {
       shouldClose.current = true;
     }
   };
-  const handleOverlayOnClick = () => {
-    if (shouldClose.current) {
+  const handleClose = event => {
+    if (!shouldPropagateClickEvent) {
+      event.stopPropagation();
+    }
+    if (close) {
       close();
     }
   };
+  const handleOverlayOnClick = event => {
+    if (shouldClose.current) {
+      handleClose(event);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-modal", className),
     onClick: handleOverlayOnClick,
@@ -115,7 +126,7 @@ const Modal = _ref => {
   }, title), !!close && /*#__PURE__*/_react.default.createElement("button", {
     className: "p-modal__close",
     "aria-label": "Close active modal",
-    onClick: close
+    onClick: handleClose
   }, "Close")), /*#__PURE__*/_react.default.createElement("div", {
     id: descriptionId
   }, children), !!buttonRow && /*#__PURE__*/_react.default.createElement("footer", {

package/package.json

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