@ninetailed/experience.js-react 7.5.2 → 7.5.3-beta.1

package/index.cjs

@@ -380,7 +380,9 @@ const useExperience = ({
   }));
 };
 
-const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
+const ComponentMarker = /*#__PURE__*/React.forwardRef(({
+  hidden: _hidden = false
+}, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -398,7 +400,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   }, [logger]);
   React.useEffect(() => {
     if (markerRef.current) {
-      const nextSibling = markerRef.current.nextSibling;
+      const nextSibling = getNextSibling(markerRef.current, _hidden);
       if (ref) {
         if (typeof ref === 'function') {
           ref(nextSibling);
@@ -407,7 +409,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
         }
       }
     }
-  }, []);
+  }, [_hidden]);
   return jsxRuntime.jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -416,6 +418,21 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
     ref: markerRef
   });
 });
+const getNextSibling = (element, recursive = false) => {
+  if (!recursive) {
+    return element.nextSibling;
+  }
+  const {
+    parentElement
+  } = element;
+  if (!parentElement) {
+    return null;
+  }
+  if (parentElement.nextSibling) {
+    return parentElement.nextSibling;
+  }
+  return getNextSibling(parentElement, true);
+};
 
 const DefaultExperienceLoadingComponent = _a => {
   var {
@@ -542,7 +559,8 @@ const Experience = _a => {
   const isVariantHidden = 'hidden' in variant && variant.hidden;
   if (isVariantHidden) {
     return jsxRuntime.jsx(ComponentMarker, {
-      ref: componentRef
+      ref: componentRef,
+      hidden: true
     }, `marker-hidden-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {

package/index.js

@@ -372,7 +372,9 @@ const useExperience = ({
   }));
 };
 
-const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
+const ComponentMarker = /*#__PURE__*/forwardRef(({
+  hidden: _hidden = false
+}, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -390,7 +392,7 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
   }, [logger]);
   useEffect(() => {
     if (markerRef.current) {
-      const nextSibling = markerRef.current.nextSibling;
+      const nextSibling = getNextSibling(markerRef.current, _hidden);
       if (ref) {
         if (typeof ref === 'function') {
           ref(nextSibling);
@@ -399,7 +401,7 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
         }
       }
     }
-  }, []);
+  }, [_hidden]);
   return jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -408,6 +410,21 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
     ref: markerRef
   });
 });
+const getNextSibling = (element, recursive = false) => {
+  if (!recursive) {
+    return element.nextSibling;
+  }
+  const {
+    parentElement
+  } = element;
+  if (!parentElement) {
+    return null;
+  }
+  if (parentElement.nextSibling) {
+    return parentElement.nextSibling;
+  }
+  return getNextSibling(parentElement, true);
+};
 
 const DefaultExperienceLoadingComponent = _a => {
   var {
@@ -534,7 +551,8 @@ const Experience = _a => {
   const isVariantHidden = 'hidden' in variant && variant.hidden;
   if (isVariantHidden) {
     return jsx(ComponentMarker, {
-      ref: componentRef
+      ref: componentRef,
+      hidden: true
     }, `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.2",
+  "version": "7.5.3-beta.1",
   "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.2",
-    "@ninetailed/experience.js-shared": "7.5.2",
+    "@ninetailed/experience.js": "7.5.3-beta.1",
+    "@ninetailed/experience.js-shared": "7.5.3-beta.1",
     "radash": "10.9.0",
     "react-intersection-observer": "8.34.0",
     "react-is": "18.2.0"

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

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