@dream-encode/wp-js-plugin-utils 0.6.2 → 0.6.3

package/dist/settings/useActiveSection.js

@@ -5,6 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _element = require("@wordpress/element");
+/**
+ * Read the raw section key carried in the URL hash.
+ *
+ * @since  0.6.3
+ * @return {string}  Hash without its leading `#`, or an empty string.
+ */
+const readHash = () => {
+  return window.location.hash.replace(/^#/, '');
+};
+
 /**
  * Read the section key carried in the URL hash.
  *
@@ -13,7 +23,7 @@ var _element = require("@wordpress/element");
  * @return {string|null}  Matching section key, or null when the hash names nothing known.
  */
 const readSectionFromHash = keys => {
-  const hash = window.location.hash.replace(/^#/, '');
+  const hash = readHash();
   return keys.includes(hash) ? hash : null;
 };
 
@@ -26,6 +36,15 @@ const readSectionFromHash = keys => {
  * the browser Back button still leaves the settings page instead of walking back
  * through the sections that were opened.
  *
+ * A page whose sections depend on a setting registers them in two passes: the first
+ * render happens before `/wp/v2/settings` answers, so any section gated behind a
+ * value is missing from `sections` at that point. A hash naming one of those is
+ * therefore unknown when the page mounts. Rather than discard it and fall back to
+ * the first section, the requested key is parked and adopted as soon as it appears,
+ * which is what makes a link to a gated section work. The parked key is dropped the
+ * moment the reader chooses a section themselves, so a late arriving section can
+ * never pull them away from what they are looking at.
+ *
  * @since  0.6.0
  * @param  {Array}  sections  Section definitions.
  * @return {Array}            The active section key and a setter for it.
@@ -35,15 +54,26 @@ const useActiveSection = sections => {
   const keys = (0, _element.useMemo)(() => {
     return keySignature.split('|').filter(Boolean);
   }, [keySignature]);
+  const requestedSection = (0, _element.useRef)(null);
   const [activeKey, setActiveKey] = (0, _element.useState)(() => {
+    const hash = readHash();
+    if (hash && !keys.includes(hash)) {
+      requestedSection.current = hash;
+    }
     return readSectionFromHash(keys) || keys[0] || '';
   });
   (0, _element.useEffect)(() => {
     const handleHashChange = () => {
-      const nextKey = readSectionFromHash(keys);
-      if (nextKey) {
-        setActiveKey(nextKey);
+      const hash = readHash();
+      if (!hash) {
+        return;
       }
+      if (keys.includes(hash)) {
+        requestedSection.current = null;
+        setActiveKey(hash);
+        return;
+      }
+      requestedSection.current = hash;
     };
     window.addEventListener('hashchange', handleHashChange);
     return () => {
@@ -51,11 +81,25 @@ const useActiveSection = sections => {
     };
   }, [keys]);
   (0, _element.useEffect)(() => {
+    if (!requestedSection.current) {
+      return;
+    }
+    if (!keys.includes(requestedSection.current)) {
+      return;
+    }
+    setActiveKey(requestedSection.current);
+    requestedSection.current = null;
+  }, [keys]);
+  (0, _element.useEffect)(() => {
+    if (requestedSection.current) {
+      return;
+    }
     if (keys.length && !keys.includes(activeKey)) {
       setActiveKey(keys[0]);
     }
   }, [keys, activeKey]);
   const selectSection = (0, _element.useCallback)(key => {
+    requestedSection.current = null;
     setActiveKey(key);
     window.history.replaceState(null, '', `#${key}`);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dream-encode/wp-js-plugin-utils",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Common JS functionality used by custom WP plugins.",
   "keywords": [
     "wordpress",