@oneblink/apps-react 6.9.0-beta.1 → 6.9.0-beta.11

package/dist/utils/scrollToElement.js

@@ -0,0 +1,65 @@
+/**
+ * Recursively traverses ancestors to find the first visible ancestor element
+ * and allow getting its scroll point. It handles the case of ancestor elements
+ * being hidden by `ob-hidden` or an ancestor section being collapsed.
+ *
+ * @param element - The element for which to find its first visible ancestor or
+ *   ancestor sibling.
+ * @returns A callback that returns the scroll point of the first visible
+ *   ancestor element, or undefined if none is found.
+ */
+const findScrollPointOfVisibleAncestorElement = (element) => {
+    var _a;
+    const isVisible = element.checkVisibility();
+    if (!isVisible) {
+        const OBHiddenElement = element.closest('.is-hidden');
+        if (OBHiddenElement) {
+            // In the case of a hidden ancestor element we will navigate to the bottom of the previous visible sibling.
+            const parentIsVisible = (_a = OBHiddenElement.parentElement) === null || _a === void 0 ? void 0 : _a.checkVisibility();
+            if (!parentIsVisible) {
+                return findScrollPointOfVisibleAncestorElement(OBHiddenElement);
+            }
+            let previousSibling = OBHiddenElement.previousElementSibling;
+            while (previousSibling) {
+                if (previousSibling.checkVisibility()) {
+                    // Have to reasign for TS, because it does not recognise the typeguard in the `while` inside the callback function
+                    const sib = previousSibling;
+                    return () => sib.getBoundingClientRect().bottom;
+                }
+                previousSibling = previousSibling.previousElementSibling;
+            }
+        }
+        // Collapsed section ancestor
+        const ancestorCollapsedSection = element.closest('.ob-section__collapsed');
+        if (ancestorCollapsedSection) {
+            const ancestorSectionRoot = ancestorCollapsedSection.closest('.ob-section');
+            return ancestorSectionRoot
+                ? findScrollPointOfVisibleAncestorElement(ancestorSectionRoot)
+                : undefined;
+        }
+        // Not visible for some other reason
+        return;
+    }
+    else {
+        return () => element.getBoundingClientRect().top;
+    }
+};
+const scrollToElement = ({ id, navigationTopOffset, }) => {
+    const element = document.getElementById(id);
+    if (element) {
+        const getScrollPoint = findScrollPointOfVisibleAncestorElement(element);
+        if (getScrollPoint) {
+            window.requestAnimationFrame(() => {
+                window.scrollTo({
+                    top: getScrollPoint() +
+                        window.scrollY -
+                        // We allow an offset to cater for any headers
+                        navigationTopOffset,
+                    behavior: 'smooth',
+                });
+            });
+        }
+    }
+};
+export default scrollToElement;
+//# sourceMappingURL=scrollToElement.js.map

package/dist/utils/scrollToElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollToElement.js","sourceRoot":"","sources":["../../src/utils/scrollToElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,uCAAuC,GAAG,CAC9C,OAAgB,EACY,EAAE;;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,eAAe,EAAE,CAAA;IAC3C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;QAErD,IAAI,eAAe,EAAE,CAAC;YACpB,2GAA2G;YAC3G,MAAM,eAAe,GAAG,MAAA,eAAe,CAAC,aAAa,0CAAE,eAAe,EAAE,CAAA;YACxE,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,OAAO,uCAAuC,CAAC,eAAe,CAAC,CAAA;YACjE,CAAC;YACD,IAAI,eAAe,GAAG,eAAe,CAAC,sBAAsB,CAAA;YAC5D,OAAO,eAAe,EAAE,CAAC;gBACvB,IAAI,eAAe,CAAC,eAAe,EAAE,EAAE,CAAC;oBACtC,kHAAkH;oBAClH,MAAM,GAAG,GAAG,eAAe,CAAA;oBAC3B,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAA;gBACjD,CAAC;gBACD,eAAe,GAAG,eAAe,CAAC,sBAAsB,CAAA;YAC1D,CAAC;QACH,CAAC;QAED,6BAA6B;QAC7B,MAAM,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAA;QAC1E,IAAI,wBAAwB,EAAE,CAAC;YAC7B,MAAM,mBAAmB,GACvB,wBAAwB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;YACjD,OAAO,mBAAmB;gBACxB,CAAC,CAAC,uCAAuC,CAAC,mBAAmB,CAAC;gBAC9D,CAAC,CAAC,SAAS,CAAA;QACf,CAAC;QAED,oCAAoC;QACpC,OAAM;IACR,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAA;IAClD,CAAC;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,EAAE,EACF,mBAAmB,GAKpB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAE3C,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,cAAc,GAAG,uCAAuC,CAAC,OAAO,CAAC,CAAA;QACvE,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAChC,MAAM,CAAC,QAAQ,CAAC;oBACd,GAAG,EACD,cAAc,EAAE;wBAChB,MAAM,CAAC,OAAO;wBACd,8CAA8C;wBAC9C,mBAAmB;oBACrB,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA","sourcesContent":["/**\n * Recursively traverses ancestors to find the first visible ancestor element\n * and allow getting its scroll point. It handles the case of ancestor elements\n * being hidden by `ob-hidden` or an ancestor section being collapsed.\n *\n * @param element - The element for which to find its first visible ancestor or\n *   ancestor sibling.\n * @returns A callback that returns the scroll point of the first visible\n *   ancestor element, or undefined if none is found.\n */\nconst findScrollPointOfVisibleAncestorElement = (\n  element: Element,\n): (() => number) | undefined => {\n  const isVisible = element.checkVisibility()\n  if (!isVisible) {\n    const OBHiddenElement = element.closest('.is-hidden')\n\n    if (OBHiddenElement) {\n      // In the case of a hidden ancestor element we will navigate to the bottom of the previous visible sibling.\n      const parentIsVisible = OBHiddenElement.parentElement?.checkVisibility()\n      if (!parentIsVisible) {\n        return findScrollPointOfVisibleAncestorElement(OBHiddenElement)\n      }\n      let previousSibling = OBHiddenElement.previousElementSibling\n      while (previousSibling) {\n        if (previousSibling.checkVisibility()) {\n          // Have to reasign for TS, because it does not recognise the typeguard in the `while` inside the callback function\n          const sib = previousSibling\n          return () => sib.getBoundingClientRect().bottom\n        }\n        previousSibling = previousSibling.previousElementSibling\n      }\n    }\n\n    // Collapsed section ancestor\n    const ancestorCollapsedSection = element.closest('.ob-section__collapsed')\n    if (ancestorCollapsedSection) {\n      const ancestorSectionRoot =\n        ancestorCollapsedSection.closest('.ob-section')\n      return ancestorSectionRoot\n        ? findScrollPointOfVisibleAncestorElement(ancestorSectionRoot)\n        : undefined\n    }\n\n    // Not visible for some other reason\n    return\n  } else {\n    return () => element.getBoundingClientRect().top\n  }\n}\n\nconst scrollToElement = ({\n  id,\n  navigationTopOffset,\n}: {\n  id: string\n  /** We allow an offset to cater for any headers */\n  navigationTopOffset: number\n}) => {\n  const element = document.getElementById(id)\n\n  if (element) {\n    const getScrollPoint = findScrollPointOfVisibleAncestorElement(element)\n    if (getScrollPoint) {\n      window.requestAnimationFrame(() => {\n        window.scrollTo({\n          top:\n            getScrollPoint() +\n            window.scrollY -\n            // We allow an offset to cater for any headers\n            navigationTopOffset,\n          behavior: 'smooth',\n        })\n      })\n    }\n  }\n}\n\nexport default scrollToElement\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "6.9.0-beta.1",
+  "version": "6.9.0-beta.11",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -76,17 +76,18 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fixpack": "^4.0.0",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.2.4",
     "prettier-plugin-jsdoc": "^1.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.4",
     "sass": "^1.70.0",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.2.5",
     "tsc-watch": "^6.0.4",
-    "typedoc": "^0.24.8",
-    "typescript": "^4.9.5"
+    "typedoc": "^0.26.9",
+    "typescript": "^5.6.3"
   },
   "directories": {
     "doc": "docs"