@shoplflow/base 0.45.15 → 0.45.16

package/dist/index.cjs

@@ -905,22 +905,33 @@ var useViewportSizeObserver = () => {
   return size2;
 };
 var ModalOptionContext = React3.createContext({
-  heightToDeduct: 0,
-  setHeightToDeduct: utils.noop,
-  clearHeightToDeduct: utils.noop
+  topHeight: 0,
+  bottomHeight: 0,
+  setTopHeight: utils.noop,
+  setBottomHeight: utils.noop,
+  clearTopHeight: utils.noop,
+  clearBottomHeight: utils.noop
 });
 var ModalOptionContextProvider = ({ children }) => {
-  const [heightToDeduct, setHeightToDeduct] = React3.useState(0);
-  const controlHeightToDeduct = React3.useCallback((heightToAdd) => {
-    setHeightToDeduct((prev) => prev + heightToAdd);
+  const [topHeight, setTopHeight] = React3.useState(0);
+  const [bottomHeight, setBottomHeight] = React3.useState(0);
+  const clearTopHeight = React3.useCallback(() => {
+    setTopHeight(0);
   }, []);
-  const clearHeightToDeduct = React3.useCallback(() => {
-    setHeightToDeduct(0);
+  const clearBottomHeight = React3.useCallback(() => {
+    setBottomHeight(0);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalOptionContext.Provider,
     {
-      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      value: {
+        topHeight,
+        bottomHeight,
+        setTopHeight,
+        setBottomHeight,
+        clearTopHeight,
+        clearBottomHeight
+      },
       children
     }
   );
@@ -1012,7 +1023,8 @@ var ModalBody = ({
   padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
-  const { heightToDeduct } = useModalOption();
+  const { topHeight, bottomHeight } = useModalOption();
+  const heightToDeduct = topHeight + bottomHeight;
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -1110,29 +1122,45 @@ ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
 var ModalTop = ({ children }) => {
   const [topRef, setTopRef] = React3.useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setTopHeight, clearTopHeight } = useModalOption();
   React3.useEffect(() => {
-    if (!topRef) {
+    if (!topRef || !setTopHeight) {
       return;
     }
-    const { height } = topRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = topRef.getBoundingClientRect();
+      setTopHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(topRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearTopHeight();
+    };
+  }, [topRef, setTopHeight, clearTopHeight]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setTopRef, children });
 };
 var ModalTop_default = ModalTop;
 var ModalBottom = ({ children }) => {
   const [bottomRef, setBottomRef] = React3.useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setBottomHeight, clearBottomHeight } = useModalOption();
   React3.useEffect(() => {
-    if (!bottomRef) {
+    if (!bottomRef || !setBottomHeight) {
       return;
     }
-    const { height } = bottomRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = bottomRef.getBoundingClientRect();
+      setBottomHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(bottomRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearBottomHeight();
+    };
+  }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsxRuntime.jsx(BottomContainer, { ref: setBottomRef, children });
 };
 exports.ModalHandlerContext = React3.createContext({

package/dist/index.js

@@ -878,22 +878,33 @@ var useViewportSizeObserver = () => {
   return size2;
 };
 var ModalOptionContext = createContext({
-  heightToDeduct: 0,
-  setHeightToDeduct: noop,
-  clearHeightToDeduct: noop
+  topHeight: 0,
+  bottomHeight: 0,
+  setTopHeight: noop,
+  setBottomHeight: noop,
+  clearTopHeight: noop,
+  clearBottomHeight: noop
 });
 var ModalOptionContextProvider = ({ children }) => {
-  const [heightToDeduct, setHeightToDeduct] = useState(0);
-  const controlHeightToDeduct = useCallback((heightToAdd) => {
-    setHeightToDeduct((prev) => prev + heightToAdd);
+  const [topHeight, setTopHeight] = useState(0);
+  const [bottomHeight, setBottomHeight] = useState(0);
+  const clearTopHeight = useCallback(() => {
+    setTopHeight(0);
   }, []);
-  const clearHeightToDeduct = useCallback(() => {
-    setHeightToDeduct(0);
+  const clearBottomHeight = useCallback(() => {
+    setBottomHeight(0);
   }, []);
   return /* @__PURE__ */ jsx(
     ModalOptionContext.Provider,
     {
-      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      value: {
+        topHeight,
+        bottomHeight,
+        setTopHeight,
+        setBottomHeight,
+        clearTopHeight,
+        clearBottomHeight
+      },
       children
     }
   );
@@ -985,7 +996,8 @@ var ModalBody = ({
   padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
-  const { heightToDeduct } = useModalOption();
+  const { topHeight, bottomHeight } = useModalOption();
+  const heightToDeduct = topHeight + bottomHeight;
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -1083,29 +1095,45 @@ ModalHeader[MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
 var ModalTop = ({ children }) => {
   const [topRef, setTopRef] = useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setTopHeight, clearTopHeight } = useModalOption();
   useEffect(() => {
-    if (!topRef) {
+    if (!topRef || !setTopHeight) {
       return;
     }
-    const { height } = topRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = topRef.getBoundingClientRect();
+      setTopHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(topRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearTopHeight();
+    };
+  }, [topRef, setTopHeight, clearTopHeight]);
   return /* @__PURE__ */ jsx("div", { ref: setTopRef, children });
 };
 var ModalTop_default = ModalTop;
 var ModalBottom = ({ children }) => {
   const [bottomRef, setBottomRef] = useState(null);
-  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  const { setBottomHeight, clearBottomHeight } = useModalOption();
   useEffect(() => {
-    if (!bottomRef) {
+    if (!bottomRef || !setBottomHeight) {
       return;
     }
-    const { height } = bottomRef.getBoundingClientRect();
-    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
-    return () => clearHeightToDeduct();
-  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+    const updateHeight = () => {
+      const { height } = bottomRef.getBoundingClientRect();
+      setBottomHeight(height);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(bottomRef);
+    return () => {
+      resizeObserver.disconnect();
+      clearBottomHeight();
+    };
+  }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsx(BottomContainer, { ref: setBottomRef, children });
 };
 var ModalHandlerContext = createContext({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.45.15",
+  "version": "0.45.16",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -99,7 +99,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/shopl-assets": "^0.12.34",
+    "@shoplflow/shopl-assets": "^0.12.35",
     "@shoplflow/utils": "^0.7.2"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",