@ninetailed/experience.js-react 7.6.0-beta.5 → 7.6.0-beta.6

package/index.cjs.js

@@ -284,9 +284,7 @@ const useExperience = ({
   return experience;
 };
 
-const ComponentMarker = /*#__PURE__*/React.forwardRef(({
-  hidden: _hidden = false
-}, ref) => {
+const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -304,16 +302,16 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef(({
   }, [logger]);
   React.useEffect(() => {
     if (markerRef.current) {
-      const nextSibling = getNextSibling(markerRef.current, _hidden);
+      const observableElement = getObservableElement(markerRef.current);
       if (ref) {
         if (typeof ref === 'function') {
-          ref(nextSibling);
+          ref(observableElement);
         } else {
-          ref.current = nextSibling;
+          ref.current = observableElement;
         }
       }
     }
-  }, [_hidden]);
+  }, []);
   return jsxRuntime.jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -322,9 +320,22 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef(({
     ref: markerRef
   });
 });
-const getNextSibling = (element, recursive = false) => {
-  if (!recursive) {
-    return element.nextSibling;
+const getObservableSibling = element => {
+  const nextSibling = element.nextElementSibling;
+  if (!nextSibling) {
+    return null;
+  }
+  const nextSiblingStyle = getComputedStyle(nextSibling);
+  // Elements with display: none are not observable by the IntersectionObserver
+  if (nextSiblingStyle.display !== 'none') {
+    return nextSibling;
+  }
+  return getObservableSibling(nextSibling);
+};
+const getObservableElement = element => {
+  const observableSibling = getObservableSibling(element);
+  if (observableSibling) {
+    return observableSibling;
   }
   const {
     parentElement
@@ -332,10 +343,7 @@ const getNextSibling = (element, recursive = false) => {
   if (!parentElement) {
     return null;
   }
-  if (parentElement.nextSibling) {
-    return parentElement.nextSibling;
-  }
-  return getNextSibling(parentElement, true);
+  return getObservableElement(parentElement);
 };
 
 const DefaultExperienceLoadingComponent = _a => {
@@ -465,8 +473,7 @@ const Experience = _a => {
   }
   if (isVariantHidden) {
     return jsxRuntime.jsx(ComponentMarker, {
-      ref: componentRef,
-      hidden: true
+      ref: componentRef
     }, `marker-hidden-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {

package/index.esm.js

@@ -262,9 +262,7 @@ const useExperience = ({
   return experience;
 };
 
-const ComponentMarker = /*#__PURE__*/forwardRef(({
-  hidden: _hidden = false
-}, ref) => {
+const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -282,16 +280,16 @@ const ComponentMarker = /*#__PURE__*/forwardRef(({
   }, [logger]);
   useEffect(() => {
     if (markerRef.current) {
-      const nextSibling = getNextSibling(markerRef.current, _hidden);
+      const observableElement = getObservableElement(markerRef.current);
       if (ref) {
         if (typeof ref === 'function') {
-          ref(nextSibling);
+          ref(observableElement);
         } else {
-          ref.current = nextSibling;
+          ref.current = observableElement;
         }
       }
     }
-  }, [_hidden]);
+  }, []);
   return /*#__PURE__*/jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -300,9 +298,23 @@ const ComponentMarker = /*#__PURE__*/forwardRef(({
     ref: markerRef
   });
 });
-const getNextSibling = (element, recursive = false) => {
-  if (!recursive) {
-    return element.nextSibling;
+const getObservableSibling = element => {
+  const nextSibling = element.nextElementSibling;
+  if (!nextSibling) {
+    return null;
+  }
+  const nextSiblingStyle = getComputedStyle(nextSibling);
+
+  // Elements with display: none are not observable by the IntersectionObserver
+  if (nextSiblingStyle.display !== 'none') {
+    return nextSibling;
+  }
+  return getObservableSibling(nextSibling);
+};
+const getObservableElement = element => {
+  const observableSibling = getObservableSibling(element);
+  if (observableSibling) {
+    return observableSibling;
   }
   const {
     parentElement
@@ -310,10 +322,7 @@ const getNextSibling = (element, recursive = false) => {
   if (!parentElement) {
     return null;
   }
-  if (parentElement.nextSibling) {
-    return parentElement.nextSibling;
-  }
-  return getNextSibling(parentElement, true);
+  return getObservableElement(parentElement);
 };
 
 const _excluded$1 = ["component", "unhideAfterMs", "passthroughProps"],
@@ -445,8 +454,7 @@ const Experience = _ref2 => {
   }
   if (isVariantHidden) {
     return /*#__PURE__*/jsx(ComponentMarker, {
-      ref: componentRef,
-      hidden: true
+      ref: componentRef
     }, `marker-hidden-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
   }
   return /*#__PURE__*/jsxs(Fragment, {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.6.0-beta.5",
+  "version": "7.6.0-beta.6",
   "description": "Ninetailed SDK for React",
   "dependencies": {
-    "@ninetailed/experience.js": "7.6.0-beta.5",
-    "@ninetailed/experience.js-shared": "7.6.0-beta.5",
-    "@ninetailed/experience.js-plugin-analytics": "7.6.0-beta.5",
+    "@ninetailed/experience.js": "7.6.0-beta.6",
+    "@ninetailed/experience.js-shared": "7.6.0-beta.6",
+    "@ninetailed/experience.js-plugin-analytics": "7.6.0-beta.6",
     "radash": "10.9.0",
     "react-intersection-observer": "8.34.0",
     "react-is": "18.2.0",

package/src/lib/Experience/ComponentMarker/ComponentMarker.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ComponentMarker: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;

package/src/lib/Experience/ComponentMarker/index.d.ts

@@ -0,0 +1 @@
+export * from './ComponentMarker';

package/src/lib/Experience/ComponentMarker.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type ComponentMarkerProps = {
-    hidden?: boolean;
-};
-export declare const ComponentMarker: React.ForwardRefExoticComponent<ComponentMarkerProps & React.RefAttributes<unknown>>;
-export {};