@ninetailed/experience.js-react 7.5.3-beta.3 → 7.5.3-beta.5

package/index.cjs

@@ -380,9 +380,7 @@ const useExperience = ({
   }));
 };
 
-const ComponentMarker = /*#__PURE__*/React.forwardRef(({
-  hidden: _hidden = false
-}, ref) => {
+const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -400,16 +398,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: {
@@ -418,9 +416,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
@@ -428,10 +439,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 => {
@@ -539,7 +547,7 @@ const Experience = _a => {
     return () => {
       // noop
     };
-  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience]);
+  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience, isVariantHidden]);
   if (!hasVariants) {
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
@@ -561,8 +569,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.js

@@ -372,9 +372,7 @@ const useExperience = ({
   }));
 };
 
-const ComponentMarker = /*#__PURE__*/forwardRef(({
-  hidden: _hidden = false
-}, ref) => {
+const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -392,16 +390,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 jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -410,9 +408,22 @@ 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
@@ -420,10 +431,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 => {
@@ -531,7 +539,7 @@ const Experience = _a => {
     return () => {
       // noop
     };
-  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience]);
+  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience, isVariantHidden]);
   if (!hasVariants) {
     return jsxs(Fragment, {
       children: [!isComponentForwardRef && jsx(ComponentMarker, {
@@ -553,8 +561,7 @@ const Experience = _a => {
   }
   if (isVariantHidden) {
     return jsx(ComponentMarker, {
-      ref: componentRef,
-      hidden: true
+      ref: componentRef
     }, `marker-hidden-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
   }
   return jsxs(Fragment, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.5.3-beta.3",
+  "version": "7.5.3-beta.5",
   "description": "Ninetailed SDK for React",
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -16,8 +16,8 @@
   "type": "module",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@ninetailed/experience.js": "7.5.3-beta.3",
-    "@ninetailed/experience.js-shared": "7.5.3-beta.3",
+    "@ninetailed/experience.js": "7.5.3-beta.5",
+    "@ninetailed/experience.js-shared": "7.5.3-beta.5",
     "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 {};