newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _useConfirmDialog2 = _interopRequireDefault(require("./use-confirm-dialog"));
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+// 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 = (0, _useConfirmDialog2["default"])({
+      when: when,
+      message: (0, _i18n.__)('You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin'),
+      confirmButtonText: (0, _i18n.__)('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 = (0, _element.useRef)(false);
+  (0, _element.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]);
+  (0, _element.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
+  };
+}
+var _default = exports["default"] = useUnsavedChangesDialog;

package/dist/cjs/hooks/useObjectState.js

@@ -4,7 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _element = require("@wordpress/element");
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _mergeWith = _interopRequireDefault(require("lodash/mergeWith"));
@@ -17,8 +19,8 @@ var _mergeWith = _interopRequireDefault(require("lodash/mergeWith"));
  * @property {Object.<string, any>} [update] The update object with key-value pairs to merge into the state.
  */
 
-const mergeCustomizer = (objValue, srcValue) => {
-  if ((0, _isArray.default)(objValue)) {
+var mergeCustomizer = function mergeCustomizer(objValue, srcValue) {
+  if ((0, _isArray["default"])(objValue)) {
     // If it's an array, replace it (instead of concatenating).
     return srcValue;
   }
@@ -32,17 +34,24 @@ const mergeCustomizer = (objValue, srcValue) => {
  * @param {T} initial Initial state object.
  * @return {[T, (keyOrUpdate: string | Partial<T>) => (value?: any) => void]} The state object and a function to update it.
  */
-var _default = (initial = {}) => {
-  const [stateObject, setStateObject] = (0, _element.useState)(initial);
-  const runUpdate = update => setStateObject(_stateObject => (0, _mergeWith.default)({}, _stateObject, update, mergeCustomizer));
-  const updateStateObject = keyOrUpdate => {
+var _default = exports["default"] = function _default() {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useState = (0, _element.useState)(initial),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    stateObject = _useState2[0],
+    setStateObject = _useState2[1];
+  var runUpdate = function runUpdate(update) {
+    return setStateObject(function (_stateObject) {
+      return (0, _mergeWith["default"])({}, _stateObject, update, mergeCustomizer);
+    });
+  };
+  var updateStateObject = function updateStateObject(keyOrUpdate) {
     if (typeof keyOrUpdate === 'string') {
-      return value => runUpdate({
-        [keyOrUpdate]: value
-      });
+      return function (value) {
+        return runUpdate((0, _defineProperty2["default"])({}, keyOrUpdate, value));
+      };
     }
     runUpdate(keyOrUpdate);
   };
   return [stateObject, updateStateObject];
-};
-exports.default = _default;
+};

package/dist/cjs/hooks/useObjectState.test.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _useObjectState = _interopRequireDefault(require("./useObjectState"));
+var _useObjectState3 = _interopRequireDefault(require("./useObjectState"));
 var _jsxRuntime = require("react/jsx-runtime");
-const INIT_STATE = {
+var INIT_STATE = {
   name: 'Foo',
   widgets: [1],
   attributes: {
@@ -13,68 +14,89 @@ const INIT_STATE = {
     baz: 1
   }
 };
-const TestComponent = () => {
-  const [state, updateState] = (0, _useObjectState.default)(INIT_STATE);
+var TestComponent = function TestComponent() {
+  var _useObjectState = (0, _useObjectState3["default"])(INIT_STATE),
+    _useObjectState2 = (0, _slicedToArray2["default"])(_useObjectState, 2),
+    state = _useObjectState2[0],
+    updateState = _useObjectState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       placeholder: "state",
-      onChange: () => {},
+      onChange: function onChange() {},
       value: JSON.stringify(state)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      onClick: () => updateState({
-        widgets: []
-      }),
+      onClick: function onClick() {
+        return updateState({
+          widgets: []
+        });
+      },
       children: "Remove widgets"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      onClick: () => updateState({
-        widgets: [1]
-      }),
+      onClick: function onClick() {
+        return updateState({
+          widgets: [1]
+        });
+      },
       children: "Add widget"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      onClick: () => updateState({
-        attributes: {
-          bar: 2
-        }
-      }),
+      onClick: function onClick() {
+        return updateState({
+          attributes: {
+            bar: 2
+          }
+        });
+      },
       children: "Nested update"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "text",
       value: state.name,
-      onChange: e => updateState({
-        name: e.target.value
-      }),
+      onChange: function onChange(e) {
+        return updateState({
+          name: e.target.value
+        });
+      },
       placeholder: "name"
     })]
   });
 };
-describe('useObjectState', () => {
-  const getState = () => JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
-  beforeEach(() => {
+describe('useObjectState', function () {
+  var getState = function getState() {
+    return JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
+  };
+  beforeEach(function () {
     (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
   });
-  it('updates arrays', () => {
+  it('updates arrays', function () {
     expect(getState()).toStrictEqual(INIT_STATE);
-    (0, _react2.act)(() => _react2.screen.getByText('Remove widgets').click());
+    (0, _react2.act)(function () {
+      return _react2.screen.getByText('Remove widgets').click();
+    });
     expect(getState()).toMatchObject({
       widgets: []
     });
-    (0, _react2.act)(() => _react2.screen.getByText('Add widget').click());
+    (0, _react2.act)(function () {
+      return _react2.screen.getByText('Add widget').click();
+    });
     expect(getState()).toMatchObject({
       widgets: [1]
     });
   });
-  it('updates a simple value', () => {
-    (0, _react2.act)(() => _react2.fireEvent.change(_react2.screen.getByPlaceholderText('name'), {
-      target: {
-        value: 'Ramon'
-      }
-    }));
+  it('updates a simple value', function () {
+    (0, _react2.act)(function () {
+      return _react2.fireEvent.change(_react2.screen.getByPlaceholderText('name'), {
+        target: {
+          value: 'Ramon'
+        }
+      });
+    });
     expect(getState()).toMatchObject({
       name: 'Ramon'
     });
   });
-  it('updates a nested object', () => {
-    (0, _react2.act)(() => _react2.screen.getByText('Nested update').click());
+  it('updates a nested object', function () {
+    (0, _react2.act)(function () {
+      return _react2.screen.getByText('Nested update').click();
+    });
     expect(getState()).toMatchObject({
       attributes: {
         bar: 2,

package/dist/cjs/hooks/useOnClickOutside.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _element = require("@wordpress/element");
 // https://usehooks.com/useOnClickOutside/
 
@@ -11,9 +11,9 @@ var _element = require("@wordpress/element");
  * External dependencies.
  */
 
-const useOnClickOutside = (ref, handler) => {
-  (0, _element.useEffect)(() => {
-    const listener = event => {
+var useOnClickOutside = function useOnClickOutside(ref, handler) {
+  (0, _element.useEffect)(function () {
+    var listener = function listener(event) {
       // Do nothing if clicking ref's element or descendent elements
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -22,7 +22,7 @@ const useOnClickOutside = (ref, handler) => {
     };
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
-    return () => {
+    return function () {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
@@ -35,4 +35,4 @@ const useOnClickOutside = (ref, handler) => {
   // ... passing it into this hook.
   [ref, handler]);
 };
-var _default = exports.default = useOnClickOutside;
+var _default = exports["default"] = useOnClickOutside;

package/dist/cjs/hooks/usePrompt.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _element = require("@wordpress/element");
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 // https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
@@ -17,13 +17,11 @@ var _router = _interopRequireDefault(require("../proxied-imports/router"));
  * Internal dependencies.
  */
 
-const {
-  useHistory
-} = _router.default;
-var _default = (when, message) => {
-  const history = useHistory();
-  const self = (0, _element.useRef)(null);
-  const onWindowOrTabClose = event => {
+var useHistory = _router["default"].useHistory;
+var _default = exports["default"] = function _default(when, message) {
+  var history = useHistory();
+  var self = (0, _element.useRef)(null);
+  var onWindowOrTabClose = function onWindowOrTabClose(event) {
     if (!when) {
       return;
     }
@@ -32,18 +30,17 @@ var _default = (when, message) => {
     }
     return message;
   };
-  (0, _element.useEffect)(() => {
+  (0, _element.useEffect)(function () {
     if (when) {
       self.current = history.block(message);
       window.addEventListener('beforeunload', onWindowOrTabClose);
     }
-    return () => {
+    return function () {
       if (self.current) {
         self.current();
       }
       window.removeEventListener('beforeunload', onWindowOrTabClose);
     };
   }, [message, when]);
-  return self.current || (() => {});
-};
-exports.default = _default;
+  return self.current || function () {};
+};