qstd 0.2.15 → 0.2.16

package/dist/block/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,SAAS,sKAAoB,CAAC;AACpC,QAAA,MAAM,SAAS,4KAAuB,CAAC;AA0TvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,uDAuDrE"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,SAAS,sKAAoB,CAAC;AACpC,QAAA,MAAM,SAAS,4KAAuB,CAAC;AAuUvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,uDAuDrE"}

package/dist/react/index.cjs

@@ -2496,6 +2496,7 @@ function DrawerComponent(props) {
   const dragHandleRef = React12__namespace.default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
   const closeFnRef = React12__namespace.default.useRef(null);
+  const prevOpenRef = React12__namespace.default.useRef(null);
   const dragControls = framerMotion.useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, ...rest } = props;
@@ -2527,8 +2528,14 @@ function DrawerComponent(props) {
     }
   };
   React12__namespace.default.useEffect(() => {
-    if (props.open) openDrawer();
-    else closeFnRef.current?.();
+    const wasOpen = prevOpenRef.current;
+    const isOpen = props.open;
+    if (isOpen) {
+      openDrawer();
+    } else if (wasOpen === true) {
+      closeFnRef.current?.();
+    }
+    prevOpenRef.current = isOpen;
   }, [props.open]);
   React12__namespace.default.useEffect(() => {
     const container = ref.current;
@@ -2807,19 +2814,21 @@ function Backdrop(props) {
   );
 }
 function useMatchMedia(queries, defaultValues = []) {
-  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = React12__namespace.default.useState(getValue);
+  defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+  const [value, setValue] = React12__namespace.default.useState(() => {
+    return queries.map((q) => window.matchMedia(q).matches);
+  });
   React12__namespace.default.useLayoutEffect(() => {
-    const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  if (typeof window === "undefined") return initialValues;
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+    const handler = () => {
+      setValue(mediaQueryLists.map((mql) => mql.matches));
+    };
+    handler();
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
+  }, [queries]);
   return value;
 }
 var MotionDiv5 = motionTags.div;

package/dist/react/index.js

@@ -2473,6 +2473,7 @@ function DrawerComponent(props) {
   const dragHandleRef = React12__default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
   const closeFnRef = React12__default.useRef(null);
+  const prevOpenRef = React12__default.useRef(null);
   const dragControls = useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, ...rest } = props;
@@ -2504,8 +2505,14 @@ function DrawerComponent(props) {
     }
   };
   React12__default.useEffect(() => {
-    if (props.open) openDrawer();
-    else closeFnRef.current?.();
+    const wasOpen = prevOpenRef.current;
+    const isOpen = props.open;
+    if (isOpen) {
+      openDrawer();
+    } else if (wasOpen === true) {
+      closeFnRef.current?.();
+    }
+    prevOpenRef.current = isOpen;
   }, [props.open]);
   React12__default.useEffect(() => {
     const container = ref.current;
@@ -2784,19 +2791,21 @@ function Backdrop(props) {
   );
 }
 function useMatchMedia(queries, defaultValues = []) {
-  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = React12__default.useState(getValue);
+  defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+  const [value, setValue] = React12__default.useState(() => {
+    return queries.map((q) => window.matchMedia(q).matches);
+  });
   React12__default.useLayoutEffect(() => {
-    const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  if (typeof window === "undefined") return initialValues;
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+    const handler = () => {
+      setValue(mediaQueryLists.map((mql) => mql.matches));
+    };
+    handler();
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
+  }, [queries]);
   return value;
 }
 var MotionDiv5 = motionTags.div;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",