@weaverse/react 0.7.54 → 0.7.56

package/dist/index.js

@@ -992,7 +992,7 @@ var StyledOverlay = (0, import_react17.styled)(import_react_dialog.Overlay, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
-  zIndex: 9999,
+  zIndex: 99999,
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
@@ -1015,7 +1015,7 @@ var StyledContent = (0, import_react17.styled)(import_react_dialog.Content, {
   transform: "translate(-50%, -50%)",
   padding: 24,
   animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  zIndex: 9999,
+  zIndex: 99999,
   maxWidth: "90vw",
   width: "auto",
   "*": {
@@ -1041,8 +1041,8 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
   cursor: "pointer",
   fontFamily: "inherit",
   borderRadius: "100%",
-  height: 25,
-  width: 25,
+  height: 32,
+  width: 32,
   padding: 4,
   display: "inline-flex",
   alignItems: "center",
@@ -1055,8 +1055,8 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
     backgroundColor: "rgba(112, 112, 112, .1)"
   },
   svg: {
-    width: 20,
-    height: 20
+    width: 24,
+    height: 24
   }
 });
 
@@ -1064,20 +1064,23 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
 var import_react18 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = (0, import_react18.useContext)(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
   (0, import_react18.useEffect)(() => {
     let isOpen = open || defaultOpen;
-    if (isOpen) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
   let handleOpenChange = (open2) => {
-    if (open2) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(open2);
     onOpenChange?.(open2);
   };
   return handleOpenChange;
@@ -1251,30 +1254,44 @@ var css9 = {
   }
 };
 
+// src/components/Slider/ResizePlugin.ts
+var ResizePlugin = (slider) => {
+  let observer = new ResizeObserver(() => slider.update());
+  slider.on("created", () => {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", () => {
+    observer.unobserve(slider.container);
+  });
+};
+
 // src/components/Slider/index.tsx
 function Slider({ children, className }) {
   let [currentSlide, setCurrentSlide] = (0, import_react24.useState)(0);
   let [created, setCreated] = (0, import_react24.useState)(false);
-  let [ref, instanceRef] = (0, import_react23.useKeenSlider)({
-    slides: { perView: 4, spacing: 16 },
-    breakpoints: {
-      "(max-width: 1024px)": {
-        slides: { perView: 3, spacing: 16 }
-      },
-      "(max-width: 768px)": {
-        slides: {
-          perView: 1,
-          spacing: 32
+  let [ref, instanceRef] = (0, import_react23.useKeenSlider)(
+    {
+      slides: { perView: 4, spacing: 16 },
+      breakpoints: {
+        "(max-width: 1024px)": {
+          slides: { perView: 3, spacing: 16 }
+        },
+        "(max-width: 768px)": {
+          slides: {
+            perView: 1,
+            spacing: 32
+          }
         }
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
       }
     },
-    created: () => {
-      setCreated(true);
-    },
-    slideChanged: (slider) => {
-      setCurrentSlide(slider.track.details.rel);
-    }
-  });
+    [ResizePlugin]
+  );
   let _className = (0, import_clsx4.default)("keen-slider", className);
   let arrowsClass = (0, import_clsx4.default)(className && `${className}-arrows`);
   return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("div", {

package/dist/index.mjs

@@ -961,7 +961,7 @@ var StyledOverlay = styled(Overlay2, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
-  zIndex: 9999,
+  zIndex: 99999,
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
@@ -984,7 +984,7 @@ var StyledContent = styled(Content, {
   transform: "translate(-50%, -50%)",
   padding: 24,
   animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  zIndex: 9999,
+  zIndex: 99999,
   maxWidth: "90vw",
   width: "auto",
   "*": {
@@ -1010,8 +1010,8 @@ var StyledCloseIcon = styled("button", {
   cursor: "pointer",
   fontFamily: "inherit",
   borderRadius: "100%",
-  height: 25,
-  width: 25,
+  height: 32,
+  width: 32,
   padding: 4,
   display: "inline-flex",
   alignItems: "center",
@@ -1024,29 +1024,32 @@ var StyledCloseIcon = styled("button", {
     backgroundColor: "rgba(112, 112, 112, .1)"
   },
   svg: {
-    width: 20,
-    height: 20
+    width: 24,
+    height: 24
   }
 });
 
 // src/components/Modal/useOpenChangeEffect.ts
-import { useEffect as useEffect2 } from "react";
+import { useContext as useContext4, useEffect as useEffect2 } from "react";
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = useContext4(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
   useEffect2(() => {
     let isOpen = open || defaultOpen;
-    if (isOpen) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
   let handleOpenChange = (open2) => {
-    if (open2) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(open2);
     onOpenChange?.(open2);
   };
   return handleOpenChange;
@@ -1136,10 +1139,10 @@ import React22, { useState } from "react";
 
 // src/components/Slider/Arrows.tsx
 import clsx3 from "clsx";
-import React21, { useContext as useContext4 } from "react";
+import React21, { useContext as useContext5 } from "react";
 function Arrows(props) {
   let { currentSlide, instanceRef, className } = props;
-  let { stitchesInstance } = useContext4(WeaverseContext);
+  let { stitchesInstance } = useContext5(WeaverseContext);
   let { className: cssClass } = stitchesInstance.css(css9)();
   let isFirstSlide = currentSlide === 0;
   let isLastSlide = false;
@@ -1220,30 +1223,44 @@ var css9 = {
   }
 };
 
+// src/components/Slider/ResizePlugin.ts
+var ResizePlugin = (slider) => {
+  let observer = new ResizeObserver(() => slider.update());
+  slider.on("created", () => {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", () => {
+    observer.unobserve(slider.container);
+  });
+};
+
 // src/components/Slider/index.tsx
 function Slider({ children, className }) {
   let [currentSlide, setCurrentSlide] = useState(0);
   let [created, setCreated] = useState(false);
-  let [ref, instanceRef] = useKeenSlider({
-    slides: { perView: 4, spacing: 16 },
-    breakpoints: {
-      "(max-width: 1024px)": {
-        slides: { perView: 3, spacing: 16 }
-      },
-      "(max-width: 768px)": {
-        slides: {
-          perView: 1,
-          spacing: 32
+  let [ref, instanceRef] = useKeenSlider(
+    {
+      slides: { perView: 4, spacing: 16 },
+      breakpoints: {
+        "(max-width: 1024px)": {
+          slides: { perView: 3, spacing: 16 }
+        },
+        "(max-width: 768px)": {
+          slides: {
+            perView: 1,
+            spacing: 32
+          }
         }
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
       }
     },
-    created: () => {
-      setCreated(true);
-    },
-    slideChanged: (slider) => {
-      setCurrentSlide(slider.track.details.rel);
-    }
-  });
+    [ResizePlugin]
+  );
   let _className = clsx4("keen-slider", className);
   let arrowsClass = clsx4(className && `${className}-arrows`);
   return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", {
@@ -1406,7 +1423,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React24, { useContext as useContext5, useEffect as useEffect5, useRef, useState as useState3 } from "react";
+import React24, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState3 } from "react";
 var WeaverseRoot = ({ context }) => {
   let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
@@ -1434,7 +1451,7 @@ var WeaverseRoot = ({ context }) => {
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
   let [data, setData] = useState3(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
   useEffect5(() => {
@@ -1469,7 +1486,7 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext5(WeaverseContext);
+  let context = useContext6(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.54",
+  "version": "0.7.56",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "0.7.54",
+    "@weaverse/core": "0.7.56",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }