@ceed/cds 0.0.85 → 0.0.86

package/framer/index.js

@@ -5728,7 +5728,6 @@ var require_createStyled = __commonJS({
 import { ControlType as ControlType28 } from "framer";
 import React184, {
   useEffect as useEffect37,
-  useMemo as useMemo38,
   useState as useState29
 } from "react";
 
@@ -44495,51 +44494,55 @@ var withCommonControls = (Component) => {
     }, []);
   };
 };
-var useMediaQuery = (fn2) => {
-  const theme = useTheme5();
-  const mediaQuery = useMemo38(() => fn2(theme), [fn2, theme]);
-  const [matches, setMatches] = useState29(
-    () => window.matchMedia(mediaQuery).matches
-  );
+var useElementResizeEffect = (element, callback) => {
   useEffect37(() => {
-    const handleResize = () => {
-      const matches2 = window.matchMedia(mediaQuery).matches;
-      setMatches(matches2);
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [mediaQuery]);
+    const observer = new ResizeObserver(callback);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element]);
+};
+var useResponsive = (breakpoint, rootElement) => {
+  const theme = useTheme5();
+  const point = theme.breakpoints.values[breakpoint];
+  const [matches, setMatches] = useState29(false);
+  useElementResizeEffect(rootElement, () => {
+    setMatches(rootElement.offsetWidth >= point);
+  });
   return matches;
 };
 var ResponsiveEmitter = (props) => {
   const { children, onSmChange, onMdChange, onLgChange, onXlChange } = props;
-  const isSm = useMediaQuery((theme) => theme.breakpoints.up("sm"));
-  const isMd = useMediaQuery((theme) => theme.breakpoints.up("md"));
-  const isLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
-  const isXl = useMediaQuery((theme) => theme.breakpoints.up("xl"));
-  useEffect37(() => {
-    if (isSm && onSmChange) {
-      onSmChange();
-    }
-  }, [isSm, onSmChange]);
-  useEffect37(() => {
-    if (isMd && onMdChange) {
-      onMdChange();
-    }
-  }, [isMd, onMdChange]);
-  useEffect37(() => {
-    if (isLg && onLgChange) {
-      onLgChange();
-    }
-  }, [isLg, onLgChange]);
+  const isSm = useResponsive(
+    "sm",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
+  const isMd = useResponsive(
+    "md",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
+  const isLg = useResponsive(
+    "lg",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
+  const isXl = useResponsive(
+    "xl",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
   useEffect37(() => {
     if (isXl && onXlChange) {
       onXlChange();
+      return;
+    } else if (isLg && onLgChange) {
+      onLgChange();
+      return;
+    } else if (isMd && onMdChange) {
+      onMdChange();
+      return;
+    } else if (isSm && onSmChange) {
+      onSmChange();
+      return;
     }
-  }, [isXl, onXlChange]);
+  }, [isSm, isMd, isLg, isXl, onSmChange, onMdChange, onLgChange, onXlChange]);
   return children;
 };
 var responsiveEmitterPropertyControls = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/cds",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",