newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/esm/handoff/index.js

@@ -1,3 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "children", "compact", "useModal", "modalTitle", "modalBody", "onReady", "editLink", "bannerText", "bannerButtonText", "url"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Handoff
  */
@@ -20,156 +32,200 @@ import { Button, Card, Modal, Waiting } from '../';
 import assign from 'lodash/assign';
 import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class Handoff extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
+var Handoff = /*#__PURE__*/function (_Component) {
+  function Handoff() {
+    var _this;
+    _classCallCheck(this, Handoff);
+    _this = _callSuper(this, Handoff, arguments);
+    _defineProperty(_this, "componentDidMount", function () {
+      _this._isMounted = true;
+      var _this$props = _this.props,
+        plugin = _this$props.plugin,
+        url = _this$props.url;
+      if (plugin && !url) {
+        _this.retrievePluginInfo(plugin);
+      }
+    });
+    _defineProperty(_this, "componentWillUnmount", function () {
+      _this._isMounted = false;
+    });
+    _defineProperty(_this, "retrievePluginInfo", function (plugin) {
+      var onReady = _this.props.onReady;
+      apiFetch({
+        path: '/newspack/v1/plugins/' + plugin
+      }).then(function (pluginInfo) {
+        if (_this._isMounted) {
+          onReady(pluginInfo);
+          _this.setState({
+            pluginInfo: pluginInfo
+          });
+        }
+      });
+    });
+    _defineProperty(_this, "textForPlugin", function (pluginInfo) {
+      var defaults = {
+        modalBody: null,
+        modalTitle: pluginInfo.Name && "".concat(__('Manage', 'newspack-plugin'), " ").concat(pluginInfo.Name),
+        primaryButton: pluginInfo.Name && "".concat(__('Manage', 'newspack-plugin'), " ").concat(pluginInfo.Name),
+        primaryModalButton: __('Manage', 'newspack-plugin'),
+        dismissModalButton: __('Dismiss', 'newspack-plugin')
+      };
+      return assign(defaults, _this.props);
+    });
+    _defineProperty(_this, "goToUrl", function () {
+      var _this$props2 = _this.props,
+        url = _this$props2.url,
+        showOnBlockEditor = _this$props2.showOnBlockEditor,
+        bannerText = _this$props2.bannerText,
+        bannerButtonText = _this$props2.bannerButtonText;
+      apiFetch({
+        path: '/newspack/v1/handoff',
+        method: 'POST',
+        data: {
+          destinationUrl: url,
+          handoffReturnUrl: window && window.location.href,
+          showOnBlockEditor: showOnBlockEditor ? true : false,
+          bannerText: bannerText,
+          bannerButtonText: bannerButtonText
+        }
+      }).then(function (response) {
+        window.location.href = response.HandoffLink;
+      });
+    });
+    _defineProperty(_this, "goToPlugin", function (plugin) {
+      var _this$props3 = _this.props,
+        editLink = _this$props3.editLink,
+        showOnBlockEditor = _this$props3.showOnBlockEditor,
+        bannerText = _this$props3.bannerText,
+        bannerButtonText = _this$props3.bannerButtonText;
+      apiFetch({
+        path: '/newspack/v1/plugins/' + plugin + '/handoff',
+        method: 'POST',
+        data: {
+          editLink: editLink,
+          handoffReturnUrl: window && window.location.href,
+          showOnBlockEditor: showOnBlockEditor ? true : false,
+          bannerText: bannerText,
+          bannerButtonText: bannerButtonText
+        }
+      }).then(function (response) {
+        window.location.href = response.HandoffLink;
+      });
+    });
+    _this.state = {
       pluginInfo: [],
       showModal: false
     };
+    return _this;
   }
-  componentDidMount = () => {
-    this._isMounted = true;
-    const {
-      plugin
-    } = this.props;
-    this.retrievePluginInfo(plugin);
-  };
-  componentWillUnmount = () => {
-    this._isMounted = false;
-  };
-  retrievePluginInfo = plugin => {
-    const {
-      onReady
-    } = this.props;
-    apiFetch({
-      path: '/newspack/v1/plugins/' + plugin
-    }).then(pluginInfo => {
-      if (this._isMounted) {
-        onReady(pluginInfo);
-        this.setState({
-          pluginInfo
-        });
-      }
-    });
-  };
-  textForPlugin = pluginInfo => {
-    const defaults = {
-      modalBody: null,
-      modalTitle: pluginInfo.Name && `${__('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
-      primaryButton: pluginInfo.Name && `${__('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
-      primaryModalButton: __('Manage', 'newspack-plugin'),
-      dismissModalButton: __('Dismiss', 'newspack-plugin')
-    };
-    return assign(defaults, this.props);
-  };
-  goToPlugin = plugin => {
-    const {
-      editLink,
-      showOnBlockEditor
-    } = this.props;
-    apiFetch({
-      path: '/newspack/v1/plugins/' + plugin + '/handoff',
-      method: 'POST',
-      data: {
-        editLink,
-        handoffReturnUrl: window && window.location.href,
-        showOnBlockEditor: showOnBlockEditor ? true : false
-      }
-    }).then(response => {
-      window.location.href = response.HandoffLink;
-    });
-  };
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      children,
-      compact,
-      useModal,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      modalTitle: _modalTitle,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      modalBody: _modalBody,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      onReady,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      editLink,
-      ...otherProps
-    } = this.props;
-    const {
-      pluginInfo,
-      showModal
-    } = this.state;
-    const {
-      modalBody,
-      modalTitle,
-      primaryButton,
-      primaryModalButton,
-      dismissModalButton
-    } = this.textForPlugin(pluginInfo);
-    const {
-      Configured,
-      Name,
-      Slug,
-      Status
-    } = pluginInfo;
-    const classes = classnames(Configured && 'is-configured', className);
-    return /*#__PURE__*/_jsxs(Fragment, {
-      children: [Name && 'active' === Status && /*#__PURE__*/_jsx(Button, {
-        className: classes,
-        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
-        ...otherProps,
-        onClick: () => useModal ? this.setState({
-          showModal: true
-        }) : this.goToPlugin(Slug),
-        children: children ? children : primaryButton
-      }), Name && 'active' !== Status && /*#__PURE__*/_jsx(Button, {
-        className: classes,
-        variant: "secondary",
-        disabled: true,
-        ...otherProps,
-        children: Name + __(' not installed', 'newspack-plugin')
-      }), !Name && /*#__PURE__*/_jsx(Button, {
-        className: classes,
-        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
-        ...otherProps,
-        children: /*#__PURE__*/_jsxs(Fragment, {
-          children: [!compact && /*#__PURE__*/_jsx(Waiting, {
-            isLeft: true
-          }), __('Retrieving Plugin Info', 'newspack-plugin')]
-        })
-      }), showModal && /*#__PURE__*/_jsxs(Modal, {
-        title: modalTitle,
-        onRequestClose: () => this.setState({
-          showModal: false
-        }),
-        children: [/*#__PURE__*/_jsx("p", {
-          children: modalBody
-        }), /*#__PURE__*/_jsxs(Card, {
-          buttonsCard: true,
-          noBorder: true,
-          className: "justify-end",
-          children: [/*#__PURE__*/_jsx(Button, {
-            variant: "secondary",
-            onClick: () => this.setState({
+  _inherits(Handoff, _Component);
+  return _createClass(Handoff, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this2 = this;
+      var _this$props4 = this.props,
+        className = _this$props4.className,
+        children = _this$props4.children,
+        compact = _this$props4.compact,
+        useModal = _this$props4.useModal,
+        _modalTitle = _this$props4.modalTitle,
+        _modalBody = _this$props4.modalBody,
+        onReady = _this$props4.onReady,
+        editLink = _this$props4.editLink,
+        bannerText = _this$props4.bannerText,
+        bannerButtonText = _this$props4.bannerButtonText,
+        url = _this$props4.url,
+        otherProps = _objectWithoutProperties(_this$props4, _excluded);
+      var _this$state = this.state,
+        pluginInfo = _this$state.pluginInfo,
+        showModal = _this$state.showModal;
+      var _this$textForPlugin = this.textForPlugin(pluginInfo),
+        modalBody = _this$textForPlugin.modalBody,
+        modalTitle = _this$textForPlugin.modalTitle,
+        primaryButton = _this$textForPlugin.primaryButton,
+        primaryModalButton = _this$textForPlugin.primaryModalButton,
+        dismissModalButton = _this$textForPlugin.dismissModalButton;
+      var Configured = pluginInfo.Configured,
+        Name = pluginInfo.Name,
+        Slug = pluginInfo.Slug,
+        Status = pluginInfo.Status;
+      var classes = classnames(Configured && 'is-configured', className);
+      var goTo = function goTo() {
+        return url ? _this2.goToUrl() : _this2.goToPlugin(Slug);
+      };
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [url && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          className: classes,
+          isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink
+        }, otherProps), {}, {
+          onClick: function onClick() {
+            return useModal && children ? _this2.setState({
+              showModal: true
+            }) : goTo();
+          },
+          children: children ? children : primaryButton
+        })), !url && Name && 'active' === Status && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          className: classes,
+          isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink
+        }, otherProps), {}, {
+          onClick: function onClick() {
+            return useModal ? _this2.setState({
+              showModal: true
+            }) : goTo();
+          },
+          children: children ? children : primaryButton
+        })), !url && Name && 'active' !== Status && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          className: classes,
+          variant: "secondary",
+          disabled: true
+        }, otherProps), {}, {
+          children: Name + __(' not installed', 'newspack-plugin')
+        })), !url && !Name && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          className: classes,
+          isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink
+        }, otherProps), {}, {
+          children: /*#__PURE__*/_jsxs(Fragment, {
+            children: [!compact && /*#__PURE__*/_jsx(Waiting, {
+              isLeft: true
+            }), __('Retrieving Plugin Info', 'newspack-plugin')]
+          })
+        })), showModal && /*#__PURE__*/_jsxs(Modal, {
+          title: modalTitle,
+          onRequestClose: function onRequestClose() {
+            return _this2.setState({
               showModal: false
-            }),
-            children: dismissModalButton
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "primary",
-            onClick: () => this.goToPlugin(Slug),
-            children: primaryModalButton
+            });
+          },
+          children: [/*#__PURE__*/_jsx("p", {
+            children: modalBody
+          }), /*#__PURE__*/_jsxs(Card, {
+            buttonsCard: true,
+            noBorder: true,
+            className: "justify-end",
+            children: [/*#__PURE__*/_jsx(Button, {
+              variant: "secondary",
+              onClick: function onClick() {
+                return _this2.setState({
+                  showModal: false
+                });
+              },
+              children: dismissModalButton
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              onClick: goTo,
+              children: primaryModalButton
+            })]
           })]
         })]
-      })]
-    });
-  }
-}
+      });
+    }
+  }]);
+}(Component);
 Handoff.defaultProps = {
-  onReady: () => {}
+  onReady: function onReady() {}
 };
 export default Handoff;

package/dist/esm/handoff-message/index.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * WordPress dependencies.
  */
@@ -14,19 +15,22 @@ import { Notice } from '../';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function HandoffMessage() {
-  const [handoffMessage, setHandoffMessage] = useState(false);
-  useEffect(() => {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    handoffMessage = _useState2[0],
+    setHandoffMessage = _useState2[1];
+  useEffect(function () {
     // Slight delay to allow for localStorage to be updated by RAS component.
-    setTimeout(() => {
-      const handoff = JSON.parse(localStorage.getItem(HANDOFF_KEY));
-      if (handoff?.message) {
+    setTimeout(function () {
+      var handoff = JSON.parse(localStorage.getItem(HANDOFF_KEY));
+      if (handoff !== null && handoff !== void 0 && handoff.message) {
         setHandoffMessage(handoff.message);
       } else {
         setHandoffMessage(false);
       }
 
       // Clean up the notification if navigating away from the relevant page.
-      if (handoff?.url && -1 === window.location.href.indexOf(handoff.url)) {
+      if (handoff !== null && handoff !== void 0 && handoff.url && -1 === window.location.href.indexOf(handoff.url)) {
         window.localStorage.removeItem(HANDOFF_KEY);
         setHandoffMessage(false);
       }

package/dist/esm/hooks/index.js

@@ -5,13 +5,15 @@ import { useRef } from '@wordpress/element';
 import usePrompt from './usePrompt';
 import useObjectState from './useObjectState';
 import useOnClickOutside from './useOnClickOutside';
-const useUniqueId = prefix => {
-  const id = useRef(`${prefix}-${Math.round(Math.random() * 99999)}`);
+import useConfirmDialog from './use-confirm-dialog';
+var useUniqueId = function useUniqueId(prefix) {
+  var id = useRef("".concat(prefix, "-").concat(Math.round(Math.random() * 99999)));
   return id.current;
 };
 export default {
-  usePrompt,
-  useObjectState,
-  useOnClickOutside,
-  useUniqueId
+  usePrompt: usePrompt,
+  useObjectState: useObjectState,
+  useOnClickOutside: useOnClickOutside,
+  useUniqueId: useUniqueId,
+  useConfirmDialog: useConfirmDialog
 };

package/dist/esm/hooks/use-confirm-dialog.js

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["message", "when"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * WordPress dependencies.
+ */
+import { useCallback, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import ConfirmDialog from '../confirm-dialog';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A hook that encapsulates the ConfirmDialog component and provides a
+ * `requestConfirm` function for imperative use.
+ *
+ * Calling `requestConfirm( callback )` will show a confirmation dialog.
+ * If the user confirms, `callback` is invoked. If the user cancels, it is not.
+ *
+ * When `when` is explicitly `false`, `requestConfirm( callback )` calls
+ * `callback` immediately without showing the dialog. This is useful for
+ * guarding actions that are only destructive when there are unsaved changes
+ * (e.g. `when={ isDirty }`). When `when` is omitted or `true`, the dialog
+ * is always shown.
+ *
+ * The `confirmDialog` element must be rendered somewhere in the component's
+ * JSX for the dialog to appear.
+ */
+function useConfirmDialog(options) {
+  var message = options.message,
+    when = options.when,
+    dialogProps = _objectWithoutProperties(options, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    pendingAction = _useState2[0],
+    setPendingAction = _useState2[1];
+
+  // Keep a ref so `requestConfirm` can always read the latest `when` value
+  // without needing to be recreated on every render.
+  var whenRef = useRef(when);
+  whenRef.current = when;
+  var requestConfirm = useCallback(function (callback) {
+    if (whenRef.current !== false) {
+      // Store as a thunk to opt out of React's functional-update interpretation.
+      setPendingAction(function () {
+        return callback;
+      });
+    } else {
+      callback();
+    }
+  }, []);
+  var confirmDialog = /*#__PURE__*/_jsx(ConfirmDialog, _objectSpread(_objectSpread({}, dialogProps), {}, {
+    when: when,
+    isOpen: !!pendingAction,
+    onConfirm: function onConfirm() {
+      pendingAction === null || pendingAction === void 0 || pendingAction();
+      setPendingAction(null);
+    },
+    onCancel: function onCancel() {
+      return setPendingAction(null);
+    },
+    children: message
+  }));
+  return {
+    confirmDialog: confirmDialog,
+    requestConfirm: requestConfirm
+  };
+}
+export default useConfirmDialog;

package/dist/esm/hooks/use-unsaved-changes-dialog.js

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies.
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import useConfirmDialog from './use-confirm-dialog';
+// Stack of mounted guards; the last entry owns the document-level handler so
+// only the most-recently-mounted guard prompts when several are active. Using a
+// stack keeps ownership correct under out-of-order unmounts.
+var activeGuards = [];
+
+/**
+ * Returns true when `href` resolves to the same origin as the current page —
+ * i.e. it is an internal navigation that would unload the wizard. External
+ * `https://...` links, `mailto:`, `tel:`, and other schemes navigate to a new
+ * context (new tab, mail client, dialer) without unloading the wizard, and
+ * must not trigger the discard-changes prompt.
+ */
+function isSameOriginNavigation(link) {
+  try {
+    var url = new URL(link.href, window.location.href);
+    return url.origin === window.location.origin && (url.protocol === 'http:' || url.protocol === 'https:');
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Shared unsaved-changes guard. Wraps `useConfirmDialog` with standardized
+ * messaging, intercepts same-origin link clicks so the dialog fires instead
+ * of a silent navigation, and adds a `beforeunload` listener as the last-resort
+ * guard for refresh / tab-close (browser-native, cannot be styled). The
+ * returned `confirmDialog` element must be rendered in JSX.
+ *
+ * Single-consumer constraint: the click handler is attached at the document
+ * level in capture phase. Two simultaneously-active instances will both fire
+ * a dialog. A development-only warning surfaces this.
+ */
+function useUnsavedChangesDialog(_ref) {
+  var when = _ref.when;
+  var _useConfirmDialog = useConfirmDialog({
+      when: when,
+      message: __('You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin'),
+      confirmButtonText: __('Discard changes', 'newspack-plugin'),
+      hideTitle: true
+    }),
+    confirmDialog = _useConfirmDialog.confirmDialog,
+    requestConfirm = _useConfirmDialog.requestConfirm;
+
+  // Tracks navigation the user has already approved via our custom dialog so
+  // the beforeunload guard doesn't fire a second native prompt on top of it.
+  var isNavigatingRef = useRef(false);
+  useEffect(function () {
+    if (!when) {
+      return;
+    }
+    var ownerId = Symbol('unsaved-changes-guard');
+    activeGuards.push(ownerId);
+    if (process.env.NODE_ENV !== 'production' && activeGuards.length > 1) {
+      // eslint-disable-next-line no-console
+      console.warn('useUnsavedChangesDialog: more than one active instance detected. ' + 'Document-level click capture will fire a dialog per instance — ensure only one guard is active at a time.');
+    }
+    var handler = function handler(e) {
+      // Only the top-of-stack guard prompts, so concurrent guards can't stack dialogs.
+      if (activeGuards[activeGuards.length - 1] !== ownerId) {
+        return;
+      }
+      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) {
+        return;
+      }
+      var target = e.target;
+      var link = target === null || target === void 0 ? void 0 : target.closest('a[href]');
+      if (!link) {
+        return;
+      }
+      var href = link.getAttribute('href');
+      if (!href || href.startsWith('#') || href.startsWith('javascript:')) {
+        // All `#`-prefixed links are skipped here: plain anchors
+        // (`#section`) are scroll targets, and HashRouter paths
+        // (`#/route`) are intercepted by `ConfirmDialog`'s built-in
+        // `history.block` listener instead. Routing them through
+        // `window.location.href` here would trigger a hashchange
+        // that the still-active block re-catches, double-prompting.
+        return;
+      }
+      if (link.target && link.target !== '_self') {
+        return;
+      }
+      // Skip mailto:, tel:, external origins, and any non-http(s) scheme —
+      // they don't unload the wizard, so a discard prompt would be wrong.
+      if (!isSameOriginNavigation(link)) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      var destination = link.href;
+      requestConfirm(function () {
+        isNavigatingRef.current = true;
+        window.location.href = destination;
+      });
+    };
+    document.addEventListener('click', handler, true);
+    return function () {
+      document.removeEventListener('click', handler, true);
+      var idx = activeGuards.indexOf(ownerId);
+      if (idx !== -1) {
+        activeGuards.splice(idx, 1);
+      }
+    };
+  }, [when, requestConfirm]);
+  useEffect(function () {
+    if (!when) {
+      return;
+    }
+    var handler = function handler(e) {
+      if (isNavigatingRef.current) {
+        return;
+      }
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return function () {
+      return window.removeEventListener('beforeunload', handler);
+    };
+  }, [when]);
+  return {
+    confirmDialog: confirmDialog,
+    requestConfirm: requestConfirm
+  };
+}
+export default useUnsavedChangesDialog;