@webspatial/react-sdk 1.0.2 → 1.0.4

package/dist/default/index.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.0.2"
+        window.__webspatialsdk__['react-sdk-version'] = "1.0.4"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -1502,6 +1502,7 @@ import {
   useMemo as useMemo4,
   useRef as useRef6
 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/spatial-react-components/CSSSpatialDiv/useSpatialStyle.ts
 import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5, useState as useState3 } from "react";
@@ -1714,7 +1715,7 @@ function useSpatialStyle() {
       );
     };
   }, []);
-  return { ref, ready, spatialStyle };
+  return { ref, ready: true, spatialStyle };
 }
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialDebugNameContext.ts
@@ -1997,6 +1998,9 @@ var CSSSpatialRootContext = createContext8(null);
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var cssParserDivContainer = document.createElement("div");
+cssParserDivContainer.style.position = "absolute";
+document.body.appendChild(cssParserDivContainer);
 function renderRootCSSSpatialComponent(inProps, refIn) {
   const cssSpatialRootContextObject = useMemo4(
     () => new CSSSpatialRootContextObject(),
@@ -2013,8 +2017,12 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
   const { ref, spatialStyle, ready } = useSpatialStyle();
   const divRefStyle = {
     ...style,
-    width: 0,
-    height: 0,
+    // width: 0,
+    // height: 0,
+    left: -1e4,
+    top: -1e4,
+    opacity: 0,
+    pointerEvents: "none",
     padding: 0,
     transition: "none",
     position: "absolute"
@@ -2026,6 +2034,19 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
   const El = inProps.component || "div";
   const spatialDivRef = useHijackSpatialDivRef(refIn, ref);
   const divRefClassName = className + " " + InjectClassName;
+  const cssParserDom = createPortal2(
+    /* @__PURE__ */ jsx7(
+      El,
+      {
+        style: divRefStyle,
+        className: divRefClassName,
+        ...props,
+        ref,
+        "data-cssparser": true
+      }
+    ),
+    cssParserDivContainer
+  );
   return /* @__PURE__ */ jsxs3(CSSSpatialRootContext.Provider, { value: cssSpatialRootContextObject, children: [
     ready && /* @__PURE__ */ jsx7(
       SpatialReactComponent,
@@ -2040,16 +2061,7 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
         ref: spatialDivRef
       }
     ),
-    /* @__PURE__ */ jsx7(
-      El,
-      {
-        style: divRefStyle,
-        className: divRefClassName,
-        ...props,
-        ref,
-        "data-cssparser": true
-      }
-    )
+    cssParserDom
   ] });
 }
 function renderInWebEnv(props, ref) {
@@ -2087,8 +2099,12 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
   const { ref, spatialStyle, ready } = useSpatialStyle();
   const divRefStyle = {
     ...style,
-    width: 0,
-    height: 0,
+    // width: 0,
+    // height: 0,
+    left: -1e4,
+    top: -1e4,
+    opacity: 0,
+    pointerEvents: "none",
     padding: 0,
     transition: "none",
     position: "absolute"
@@ -2102,6 +2118,10 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
   useEffect7(() => {
     cssSpatialRootContextObject.setCSSParserRef(cssSpatialID, ref.current);
   }, [ref.current]);
+  const cssParserDom = createPortal2(
+    /* @__PURE__ */ jsx7(El, { style: divRefStyle, className: divRefClassName, ...props, ref }),
+    cssParserDivContainer
+  );
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     ready && /* @__PURE__ */ jsx7(
       SpatialReactComponent,
@@ -2115,15 +2135,7 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
         debugShowStandardInstance
       }
     ),
-    /* @__PURE__ */ jsx7(
-      El,
-      {
-        style: divRefStyle,
-        className: divRefClassName,
-        ...props,
-        ref
-      }
-    )
+    cssParserDom
   ] });
 }
 function CSSSpatialComponentBase(inProps, ref) {
@@ -3242,8 +3254,12 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
   const { className, style = {}, ...props } = inProps;
   const cssParserDomStyle = {
     ...style,
-    width: 0,
-    height: 0,
+    // width: 0,
+    // height: 0,
+    left: -1e4,
+    top: -1e4,
+    opacity: 0,
+    pointerEvents: "none",
     padding: 0,
     position: "absolute"
   };
@@ -3331,8 +3347,12 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
   }, [ref.current]);
   const cssParserDomStyle = {
     ...style,
-    width: 0,
-    height: 0,
+    // width: 0,
+    // height: 0,
+    left: -1e4,
+    top: -1e4,
+    opacity: 0,
+    pointerEvents: "none",
     padding: 0,
     position: "absolute"
   };
@@ -3795,7 +3815,7 @@ function spatialPolyfill() {
 }
 
 // src/index.ts
-var version = "1.0.2";
+var version = "1.0.4";
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,