@canonical/react-components 1.9.1 → 1.10.0

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

@@ -26,11 +26,15 @@ export type Props = PropsWithSpread<{
      * Whether the button click event should propagate.
      */
     shouldPropagateClickEvent?: boolean;
+    /**
+     * Whether the modal should close when clicking outside the modal.
+     */
+    closeOnOutsideClick?: boolean;
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Modal](https://docs.vanillaframework.io/patterns/modal/).
  *
  * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
  */
-export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, ...wrapperProps }: Props) => ReactElement;
+export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => ReactElement;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -23,6 +23,7 @@ const Modal = _ref => {
     close,
     title,
     shouldPropagateClickEvent = false,
+    closeOnOutsideClick = true,
     ...wrapperProps
   } = _ref;
   // list of focusable selectors is based on this Stack Overflow answer:
@@ -92,7 +93,7 @@ const Modal = _ref => {
     shouldClose.current = false;
   };
   const handleOverlayOnMouseDown = event => {
-    if (event.target === modalRef.current) {
+    if (event.target === modalRef.current && closeOnOutsideClick) {
       shouldClose.current = true;
     }
   };

package/dist/components/Modal/Modal.stories.js

@@ -31,12 +31,18 @@ const meta = {
       control: {
         disable: true
       }
+    },
+    closeOnOutsideClick: {
+      control: "boolean"
     }
   }
 };
 var _default = exports.default = meta;
 const Default = exports.Default = {
-  render: () => {
+  render: _ref => {
+    let {
+      closeOnOutsideClick
+    } = _ref;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [modalOpen, setModalOpen] = (0, _react.useState)(true);
     const closeHandler = () => setModalOpen(false);
@@ -45,6 +51,7 @@ const Default = exports.Default = {
     }, "Open modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_Modal.default, {
       close: closeHandler,
       title: "Confirm delete",
+      closeOnOutsideClick: closeOnOutsideClick,
       buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
         className: "u-no-margin--bottom",
         onClick: closeHandler

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

@@ -26,11 +26,15 @@ export type Props = PropsWithSpread<{
      * Whether the button click event should propagate.
      */
     shouldPropagateClickEvent?: boolean;
+    /**
+     * Whether the modal should close when clicking outside the modal.
+     */
+    closeOnOutsideClick?: boolean;
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Modal](https://docs.vanillaframework.io/patterns/modal/).
  *
  * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
  */
-export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, ...wrapperProps }: Props) => ReactElement;
+export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => ReactElement;
 export default Modal;

package/dist/esm/components/Modal/Modal.js

@@ -1,4 +1,4 @@
-var _excluded = ["buttonRow", "children", "className", "close", "title", "shouldPropagateClickEvent"];
+var _excluded = ["buttonRow", "children", "className", "close", "title", "shouldPropagateClickEvent", "closeOnOutsideClick"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -16,7 +16,8 @@ export var Modal = _ref => {
       className,
       close,
       title,
-      shouldPropagateClickEvent = false
+      shouldPropagateClickEvent = false,
+      closeOnOutsideClick = true
     } = _ref,
     wrapperProps = _objectWithoutProperties(_ref, _excluded);
   // list of focusable selectors is based on this Stack Overflow answer:
@@ -86,7 +87,7 @@ export var Modal = _ref => {
     shouldClose.current = false;
   };
   var handleOverlayOnMouseDown = event => {
-    if (event.target === modalRef.current) {
+    if (event.target === modalRef.current && closeOnOutsideClick) {
       shouldClose.current = true;
     }
   };

package/dist/esm/components/Modal/Modal.stories.js

@@ -23,12 +23,18 @@ var meta = {
       control: {
         disable: true
       }
+    },
+    closeOnOutsideClick: {
+      control: "boolean"
     }
   }
 };
 export default meta;
 export var Default = {
-  render: () => {
+  render: _ref => {
+    var {
+      closeOnOutsideClick
+    } = _ref;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var [modalOpen, setModalOpen] = useState(true);
     var closeHandler = () => setModalOpen(false);
@@ -37,6 +43,7 @@ export var Default = {
     }, "Open modal"), modalOpen ? /*#__PURE__*/React.createElement(Modal, {
       close: closeHandler,
       title: "Confirm delete",
+      closeOnOutsideClick: closeOnOutsideClick,
       buttonRow: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
         className: "u-no-margin--bottom",
         onClick: closeHandler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {