datastake-daf 0.6.421 → 0.6.423

package/dist/components/index.js

@@ -13303,41 +13303,14 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const Row = _ref => {
-  let {
-    widgets,
-    i,
-    onChangeHeight = () => {}
-  } = _ref;
-  const ref = React.useRef();
-  const [height, setHeight] = React.useState(0);
-  React.useEffect(() => {
-    const observer = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        setHeight(entry.contentRect.height);
-      }
-    });
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, []);
-  React.useEffect(() => {
-    if (height) {
-      onChangeHeight(i, {
-        height,
-        ref
-      });
-    }
-  }, [height]);
-  return /*#__PURE__*/jsxRuntime.jsx("section", {
-    ref: ref,
-    style: widgets.style,
-    children: typeof widgets.render === 'function' ? widgets.render() : null
-  });
-};
-function PdfView(_ref2) {
+const PAGE_MARGIN_TOP = 20;
+const PAGE_MARGIN_BOTTOM = 20;
+const CONTENT_HEIGHT = 1200; // 1397px
+const SECTION_GAP = 24;
+const isHTMLElement = node => node instanceof HTMLElement;
+function PdfView(_ref) {
   let {
     config = [],
     customClassName,
@@ -13347,105 +13320,224 @@ function PdfView(_ref2) {
     accountId = 'IDD-0000000',
     documentId = 'IDD-0000000',
     downloadId = 'DWL-00000123'
-  } = _ref2;
-  const [sectionsConfig, setSectionsConfig] = React.useState({});
+  } = _ref;
   const [pages, setPages] = React.useState([1]);
-  const doSizing = React.useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
-    if (keys.length === config.length) {
-      let incrHeight = 0;
-      keys.forEach(k => {
-        const {
-          ref
-        } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
+  const contentRef = React.useRef(null);
+  const sectionsRef = React.useRef([]);
+  const resizeTimeoutRef = React.useRef(null);
+  const isCalculatingRef = React.useRef(false);
+  const resetPaginationStyles = React.useCallback(sections => {
+    sections.forEach(section => {
+      if (!section) return;
+      section.style.marginTop = '';
+      section.style.marginBottom = '';
+      section.style.pageBreakBefore = '';
+      section.style.breakBefore = '';
+      section.removeAttribute('data-pdf-page');
+
+      // Reset all children
+      const allElements = section.querySelectorAll('*');
+      allElements.forEach(el => {
+        if (!isHTMLElement(el)) return;
+        el.style.marginTop = '';
+        el.style.marginBottom = '';
+        el.style.pageBreakBefore = '';
+        el.style.breakBefore = '';
+        el.removeAttribute('data-pdf-page');
       });
-      keys.forEach((k, i) => {
-        const {
-          height,
-          ref
-        } = sectionsConfig[k];
-        if (i === 0) {
-          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-          incrHeight += HEADER_HEIGHT;
-        }
-        const newHeight = incrHeight + height;
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-          if (sectionsConfig[keys[i - 1]]) {
-            const {
-              ref: topRef
-            } = sectionsConfig[keys[i - 1]];
-            topRef.current.style.marginBottom = "".concat(dif + HEADER_HEIGHT - 24, "px");
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
+    });
+  }, []);
+  const getAllBreakableElements = React.useCallback(section => {
+    const elements = [];
+    const shouldInclude = el => {
+      if (!isHTMLElement(el)) return false;
+      const style = window.getComputedStyle(el);
+      if (style.display === 'inline' || style.display === 'contents') return false;
+      if (style.position === 'absolute' || style.position === 'fixed') return false;
+      if (el.offsetHeight === 0) return false;
+      return true;
+    };
+    const traverse = parent => {
+      Array.from(parent.children).forEach(child => {
+        if (shouldInclude(child)) {
+          elements.push(child);
+          traverse(child);
+        }
+      });
+    };
+    traverse(section);
+    return elements;
+  }, []);
+  const paginateContent = React.useCallback(() => {
+    // Prevent recursive calls
+    if (isCalculatingRef.current) return;
+    const sections = sectionsRef.current.filter(Boolean);
+    if (sections.length === 0) return;
+    isCalculatingRef.current = true;
+    resetPaginationStyles(sections);
+
+    // Force layout recalc
+    sections.forEach(s => s.offsetHeight);
+    let currentPage = 1;
+    let currentPageHeight = 0;
+    sections.forEach((section, sectionIndex) => {
+      // Measure height after reset
+      const sectionHeight = section.offsetHeight;
+      const isFirstOnPage = currentPageHeight === 0;
+      const gapBefore = isFirstOnPage ? 0 : SECTION_GAP;
+      if (currentPageHeight + gapBefore + sectionHeight <= CONTENT_HEIGHT) {
+        // Fits in current page
+        section.setAttribute('data-pdf-page', currentPage.toString());
+        if (isFirstOnPage) {
+          // First item on page
+          if (currentPage === 1) {
+            // Very first section on first page - needs to be below header
+            section.style.marginTop = '0px'; // Container padding handles this
+          } else {
+            // First section on subsequent pages - no margin (container padding handles it)
+            section.style.marginTop = '0px';
           }
         } else {
-          incrHeight = newHeight + 24;
+          // Not first item on page - add gap
+          section.style.marginTop = "".concat(SECTION_GAP, "px");
         }
-        // console.groupEnd();
-      });
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+        currentPageHeight += gapBefore + sectionHeight;
+      } else {
+        // Doesn't fit - need to move to next page
+        const remainingSpace = CONTENT_HEIGHT - currentPageHeight;
+
+        // Calculate margin needed to push this section to the next page
+        // remainingSpace = space left on current page
+        // Then we need to skip: footer margin + footer + header margin + header
+        const pushMargin = remainingSpace + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
+
+        // Move entire section to next page
+        currentPage += 1;
+        section.setAttribute('data-pdf-page', currentPage.toString());
+        section.style.pageBreakBefore = 'always';
+        section.style.breakBefore = 'page';
+        section.style.marginTop = "".concat(pushMargin, "px");
+
+        // Start fresh height counter for new page
+        currentPageHeight = sectionHeight;
+
+        // Check if section is too tall and needs internal breaks
+        if (sectionHeight > CONTENT_HEIGHT) {
+          // Try to break within section
+          const innerElements = getAllBreakableElements(section);
+          let pageHeightInSection = 0;
+          let sectionPage = currentPage;
+          for (const el of innerElements) {
+            const rect = el.getBoundingClientRect();
+            const sectionRect = section.getBoundingClientRect();
+            const relativeTop = rect.top - sectionRect.top;
+            const elHeight = rect.height;
+
+            // Check if this element would exceed the page
+            if (pageHeightInSection + elHeight > CONTENT_HEIGHT && relativeTop > 50) {
+              // Calculate remaining space on this page within the section
+              const remainingInSection = CONTENT_HEIGHT - pageHeightInSection;
+              const pushMarginInner = remainingInSection + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
+              sectionPage += 1;
+              el.setAttribute('data-pdf-page', sectionPage.toString());
+              el.style.pageBreakBefore = 'always';
+              el.style.breakBefore = 'page';
+              el.style.marginTop = "".concat(pushMarginInner, "px");
+
+              // Reset page height for new page within section
+              pageHeightInSection = elHeight;
+            } else {
+              pageHeightInSection += elHeight;
+            }
+          }
+
+          // Update current page if we created additional pages
+          if (sectionPage > currentPage) {
+            currentPage = sectionPage;
+            currentPageHeight = pageHeightInSection;
+          }
+        }
+      }
+    });
+    setPages(Array.from({
+      length: currentPage
+    }, (_, idx) => idx + 1));
+
+    // Reset flag after a brief delay to allow next calculation
+    setTimeout(() => {
+      isCalculatingRef.current = false;
+    }, 100);
+  }, [getAllBreakableElements, resetPaginationStyles]);
+  React.useLayoutEffect(() => {
+    // Use requestAnimationFrame to ensure DOM is painted
+    const rafId = requestAnimationFrame(() => {
+      paginateContent();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [paginateContent, config]);
   React.useEffect(() => {
-    doSizing();
-  }, [doSizing]);
-  const onChangeHeight = React.useCallback((index, conf) => {
-    setSectionsConfig(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-      [index]: conf
-    }));
-  }, []);
+    const sections = sectionsRef.current.filter(Boolean);
+    if (sections.length === 0) return undefined;
+    const observer = new ResizeObserver(() => {
+      // Debounce the pagination calculation
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      resizeTimeoutRef.current = setTimeout(() => {
+        // Use requestAnimationFrame to avoid ResizeObserver loop warning
+        requestAnimationFrame(() => {
+          paginateContent();
+        });
+      }, 150);
+    });
+    sections.forEach(section => observer.observe(section));
+    return () => {
+      observer.disconnect();
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, [paginateContent, config.length]);
   const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
-  const renderDashboard = React.useCallback(() => {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: contClassName,
+    style: {
+      position: 'relative',
+      minHeight: "".concat(PAGE_HEIGHT, "px")
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "view-content",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "daf-analysis-layout",
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "sections-cont",
-          children: config.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
-            widgets: widgets,
-            i: i,
-            onChangeHeight: onChangeHeight
-          }, "dashboard-sections=".concat(i + 1)))
+          ref: contentRef,
+          "data-pdf-content-root": "true",
+          style: {
+            marginTop: "".concat(HEADER_HEIGHT + PAGE_MARGIN_TOP, "px"),
+            // paddingBottom: `${FOOTER_HEIGHT + PAGE_MARGIN_BOTTOM}px !important`,
+            position: 'relative'
+          },
+          children: config.map((widgets, index) => /*#__PURE__*/jsxRuntime.jsx("section", {
+            ref: el => {
+              sectionsRef.current[index] = el;
+            },
+            style: widgets.style,
+            "data-pdf-section": "true",
+            children: typeof widgets.render === 'function' ? widgets.render() : null
+          }, "dashboard-section-".concat(index + 1)))
         })
       })
-    });
-  }, [config, onChangeHeight]);
-
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
-
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
-
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: contClassName,
-    style: {
-      position: 'relative'
-    },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          top: (page - 1) * PAGE_HEIGHT,
+          top: (page - 1) * PAGE_HEIGHT + PAGE_MARGIN_TOP,
           width: '100%',
-          height: HEADER_HEIGHT - 24,
+          height: HEADER_HEIGHT,
           position: 'absolute',
           left: 0,
-          zIndex: 1000000
+          zIndex: 1000000,
+          pointerEvents: 'none'
         },
         className: "flex-row dashboard-header",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -13460,14 +13552,15 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
+          top: page * PAGE_HEIGHT - FOOTER_HEIGHT - PAGE_MARGIN_BOTTOM,
           width: '100%',
           height: FOOTER_HEIGHT,
           position: 'absolute',
           left: 0,
-          zIndex: 1000000
+          zIndex: 1000000,
+          pointerEvents: 'none'
         },
         className: "dashboard-footer flex-row",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -13503,8 +13596,8 @@ function PdfView(_ref2) {
             children: page
           })
         })]
-      }, "footers-".concat(page))]
-    }))]
+      })]
+    }, "pdf-decor-".concat(page)))]
   });
 }
 PdfView.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.421",
+	"version": "0.6.423",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/PdfView/PdfView.stories.js

@@ -189,5 +189,15 @@ export const Primary = {
       },
     ],
   },
-}
-
+  render: (args) => (
+    <div style={{
+      height: '100vh',
+      overflowY: 'auto',
+        background: "#f8f8f8",
+        padding: "20px",
+      }}
+    >
+      <PdfView {...args} />
+    </div>
+  ),
+};

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -1,41 +1,17 @@
 import moment from "moment";
 import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const PAGE_MARGIN_TOP = 20;
+const PAGE_MARGIN_BOTTOM = 20;
+const CONTENT_HEIGHT = 1200; // 1397px
+const SECTION_GAP = 24;
 
-const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
-  const ref = useRef();
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setHeight(entry.contentRect.height);
-      }
-    });
-
-    observer.observe(ref.current);
-
-    return () => observer.disconnect();
-  }, []);
-
-  useEffect(() => {
-    if (height) {
-      onChangeHeight(i, { height, ref });
-    }
-  }, [height])
-
-  return (
-    <section ref={ref} style={widgets.style}>
-      {typeof widgets.render === 'function' ? widgets.render() : null}
-    </section>
-  )
-};
+const isHTMLElement = (node) => node instanceof HTMLElement;
 
 export default function PdfView({
   config = [],
@@ -47,104 +23,251 @@ export default function PdfView({
   documentId = 'IDD-0000000',
   downloadId = 'DWL-00000123',
 }) {
-  const [sectionsConfig, setSectionsConfig] = useState({});
   const [pages, setPages] = useState([1]);
+  const contentRef = useRef(null);
+  const sectionsRef = useRef([]);
+  const resizeTimeoutRef = useRef(null);
+  const isCalculatingRef = useRef(false);
+
+  const resetPaginationStyles = useCallback((sections) => {
+    sections.forEach((section) => {
+      if (!section) return;
+      section.style.marginTop = '';
+      section.style.marginBottom = '';
+      section.style.pageBreakBefore = '';
+      section.style.breakBefore = '';
+      section.removeAttribute('data-pdf-page');
+      
+      // Reset all children
+      const allElements = section.querySelectorAll('*');
+      allElements.forEach((el) => {
+        if (!isHTMLElement(el)) return;
+        el.style.marginTop = '';
+        el.style.marginBottom = '';
+        el.style.pageBreakBefore = '';
+        el.style.breakBefore = '';
+        el.removeAttribute('data-pdf-page');
+      });
+    });
+  }, []);
+
+  const getAllBreakableElements = useCallback((section) => {
+    const elements = [];
+    
+    const shouldInclude = (el) => {
+      if (!isHTMLElement(el)) return false;
+      const style = window.getComputedStyle(el);
+      if (style.display === 'inline' || style.display === 'contents') return false;
+      if (style.position === 'absolute' || style.position === 'fixed') return false;
+      if (el.offsetHeight === 0) return false;
+      return true;
+    };
 
-  const doSizing = useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
+    const traverse = (parent) => {
+      Array.from(parent.children).forEach((child) => {
+        if (shouldInclude(child)) {
+          elements.push(child);
+          traverse(child);
+        }
+      });
+    };
 
-    if (keys.length === config.length) {
-      let incrHeight = 0;
+    traverse(section);
+    return elements;
+  }, []);
 
-      keys.forEach(k => {
-        const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+  const paginateContent = useCallback(() => {
+    // Prevent recursive calls
+    if (isCalculatingRef.current) return;
+    
+    const sections = sectionsRef.current.filter(Boolean);
+    if (sections.length === 0) return;
 
-      keys.forEach((k, i) => {
-        const { height, ref } = sectionsConfig[k];
+    isCalculatingRef.current = true;
 
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
-        }
+    resetPaginationStyles(sections);
 
-        const newHeight = incrHeight + height;
+    // Force layout recalc
+    sections.forEach(s => s.offsetHeight);
 
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
+    let currentPage = 1;
+    let currentPageHeight = 0;
+    const breaks = [];
 
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-
-          if (sectionsConfig[keys[i - 1]]) {
-            const { ref: topRef } = sectionsConfig[keys[i - 1]];
-            topRef.current.style.marginBottom = `${dif + HEADER_HEIGHT - 24}px`;
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
+    sections.forEach((section, sectionIndex) => {
+      // Measure height after reset
+      const sectionHeight = section.offsetHeight;
+      const isFirstOnPage = currentPageHeight === 0;
+      const gapBefore = isFirstOnPage ? 0 : SECTION_GAP;
+      
+      if (currentPageHeight + gapBefore + sectionHeight <= CONTENT_HEIGHT) {
+        // Fits in current page
+        section.setAttribute('data-pdf-page', currentPage.toString());
+        
+        if (isFirstOnPage) {
+          // First item on page
+          if (currentPage === 1) {
+            // Very first section on first page - needs to be below header
+            section.style.marginTop = '0px'; // Container padding handles this
+          } else {
+            // First section on subsequent pages - no margin (container padding handles it)
+            section.style.marginTop = '0px';
           }
         } else {
-          incrHeight = newHeight + 24;
+          // Not first item on page - add gap
+          section.style.marginTop = `${SECTION_GAP}px`;
+        }
+        currentPageHeight += gapBefore + sectionHeight;
+      } else {
+        // Doesn't fit - need to move to next page
+        const remainingSpace = CONTENT_HEIGHT - currentPageHeight;
+        
+        // Calculate margin needed to push this section to the next page
+        // remainingSpace = space left on current page
+        // Then we need to skip: footer margin + footer + header margin + header
+        const pushMargin = remainingSpace + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
+        
+        // Move entire section to next page
+        currentPage += 1;
+        breaks.push({ section, type: 'section', page: currentPage });
+        section.setAttribute('data-pdf-page', currentPage.toString());
+        section.style.pageBreakBefore = 'always';
+        section.style.breakBefore = 'page';
+        section.style.marginTop = `${pushMargin}px`;
+        
+        // Start fresh height counter for new page
+        currentPageHeight = sectionHeight;
+        
+        // Check if section is too tall and needs internal breaks
+        if (sectionHeight > CONTENT_HEIGHT) {
+          // Try to break within section
+          const innerElements = getAllBreakableElements(section);
+          let pageHeightInSection = 0;
+          let sectionPage = currentPage;
+          
+          for (const el of innerElements) {
+            const rect = el.getBoundingClientRect();
+            const sectionRect = section.getBoundingClientRect();
+            const relativeTop = rect.top - sectionRect.top;
+            const elHeight = rect.height;
+            
+            // Check if this element would exceed the page
+            if (pageHeightInSection + elHeight > CONTENT_HEIGHT && relativeTop > 50) {
+              // Calculate remaining space on this page within the section
+              const remainingInSection = CONTENT_HEIGHT - pageHeightInSection;
+              const pushMarginInner = remainingInSection + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
+              
+              sectionPage += 1;
+              breaks.push({ element: el, type: 'inner', page: sectionPage });
+              el.setAttribute('data-pdf-page', sectionPage.toString());
+              el.style.pageBreakBefore = 'always';
+              el.style.breakBefore = 'page';
+              el.style.marginTop = `${pushMarginInner}px`;
+              
+              // Reset page height for new page within section
+              pageHeightInSection = elHeight;
+            } else {
+              pageHeightInSection += elHeight;
+            }
+          }
+          
+          // Update current page if we created additional pages
+          if (sectionPage > currentPage) {
+            currentPage = sectionPage;
+            currentPageHeight = pageHeightInSection;
+          }
         }
-        // console.groupEnd();
-      })
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+      }
+    });
+
+    setPages(Array.from({ length: currentPage }, (_, idx) => idx + 1));
+    
+    // Reset flag after a brief delay to allow next calculation
+    setTimeout(() => {
+      isCalculatingRef.current = false;
+    }, 100);
+  }, [getAllBreakableElements, resetPaginationStyles]);
+
+  useLayoutEffect(() => {
+    // Use requestAnimationFrame to ensure DOM is painted
+    const rafId = requestAnimationFrame(() => {
+      paginateContent();
+    });
+    
+    return () => cancelAnimationFrame(rafId);
+  }, [paginateContent, config]);
 
   useEffect(() => {
-    doSizing();
-  }, [doSizing]);
+    const sections = sectionsRef.current.filter(Boolean);
+    if (sections.length === 0) return undefined;
 
-  const onChangeHeight = useCallback((index, conf) => {
-    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
-  }, []);
+    const observer = new ResizeObserver(() => {
+      // Debounce the pagination calculation
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      
+      resizeTimeoutRef.current = setTimeout(() => {
+        // Use requestAnimationFrame to avoid ResizeObserver loop warning
+        requestAnimationFrame(() => {
+          paginateContent();
+        });
+      }, 150);
+    });
+
+    sections.forEach(section => observer.observe(section));
+
+    return () => {
+      observer.disconnect();
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, [paginateContent, config.length]);
 
   const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
 
-  const renderDashboard = useCallback(() => {
-    return (
+  return (
+    <div className={contClassName} style={{ position: 'relative', minHeight: `${PAGE_HEIGHT}px` }}>
       <div className="view-content">
         <div className="daf-analysis-layout">
-          <div className='sections-cont'>
-            {config.map((widgets, i) => (
-              <Row
-                widgets={widgets}
-                key={`dashboard-sections=${i + 1}`}
-                i={i}
-                onChangeHeight={onChangeHeight}
-              />
+          <div
+            className='sections-cont'
+            ref={contentRef}
+            data-pdf-content-root="true"
+            style={{
+              marginTop: `${HEADER_HEIGHT + PAGE_MARGIN_TOP}px`,
+              // paddingBottom: `${FOOTER_HEIGHT + PAGE_MARGIN_BOTTOM}px !important`,
+              position: 'relative',
+            }}
+          >
+            {config.map((widgets, index) => (
+              <section
+                key={`dashboard-section-${index + 1}`}
+                ref={(el) => {
+                  sectionsRef.current[index] = el;
+                }}
+                style={widgets.style}
+                data-pdf-section="true"
+              >
+                {typeof widgets.render === 'function' ? widgets.render() : null}
+              </section>
             ))}
           </div>
         </div>
       </div>
-    );
-  }, [config, onChangeHeight]);
-
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
-
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
-
-  return (
-    <div className={contClassName} style={{ position: 'relative' }}>
-      {renderDashboard()}
       {pages.map((page) => (
-        <>
+        <Fragment key={`pdf-decor-${page}`}>
           <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`headers-${page}`}
+            style={{ 
+              top: ((page - 1) * PAGE_HEIGHT) + PAGE_MARGIN_TOP, 
+              width: '100%', 
+              height: HEADER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000,
+              pointerEvents: 'none'
+            }}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -155,8 +278,15 @@ export default function PdfView({
             </div>
           </div>
           <div
-            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`footers-${page}`}
+            style={{ 
+              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT - PAGE_MARGIN_BOTTOM, 
+              width: '100%', 
+              height: FOOTER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000,
+              pointerEvents: 'none'
+            }}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -190,7 +320,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </>
+        </Fragment>
       ))}
     </div>
   );

package/dist/style/datastake/mapbox-gl.css

@@ -1,330 +0,0 @@
-/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
-
-/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
-.mapbox-gl-scope .mapboxgl-map {
-  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
-  overflow: hidden;
-  position: relative;
-  -webkit-tap-highlight-color: rgb(0 0 0/0);
-}
-
-.mapbox-gl-scope .mapboxgl-canvas {
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
-  height: 100%;
-  width: 100%;
-}
-
-.mapbox-gl-scope .mapboxgl-canary {
-  background-color: salmon;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
-.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
-  cursor: grab;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
-  cursor: pointer;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
-.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
-  cursor: grabbing;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
-  touch-action: pan-x pan-y;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
-  touch-action: pinch-zoom;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
-  touch-action: none;
-}
-
-/* Control positioning */
-.mapbox-gl-scope .mapboxgl-ctrl-bottom,
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
-.mapbox-gl-scope .mapboxgl-ctrl-left,
-.mapbox-gl-scope .mapboxgl-ctrl-right,
-.mapbox-gl-scope .mapboxgl-ctrl-top,
-.mapbox-gl-scope .mapboxgl-ctrl-top-left,
-.mapbox-gl-scope .mapboxgl-ctrl-top-right {
-  pointer-events: none;
-  position: absolute;
-  z-index: 2;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-left {
-  left: 0;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top {
-  left: 50%;
-  top: 0;
-  transform: translateX(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-right {
-  right: 0;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-right {
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
-  bottom: 0;
-  right: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
-  bottom: 0;
-  left: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-left {
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl {
-  clear: both;
-  pointer-events: auto;
-  transform: translate(0);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0 0 10px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
-  float: right;
-  margin: 10px 10px 0 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
-.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
-  float: right;
-  margin: 0 10px 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
-.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
-  float: left;
-  margin: 0 0 10px 10px;
-}
-
-/* Control group styling */
-.mapbox-gl-scope .mapboxgl-ctrl-group {
-  background: #fff;
-  border-radius: 4px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
-  box-shadow: 0 0 0 2px #0000001a;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button {
-  background-color: initial;
-  border: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: block;
-  height: 29px;
-  outline: none;
-  overflow: hidden;
-  padding: 0;
-  width: 29px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
-  border-top: 1px solid #ddd;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
-  background-position: 50%;
-  background-repeat: no-repeat;
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
-.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
-  box-shadow: 0 0 2px 2px #0096ff;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
-  cursor: not-allowed;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
-  opacity: .25;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
-  border-radius: 4px 4px 0 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
-  border-radius: 0 0 4px 4px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
-  border-radius: inherit;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
-  background-color: #0000000d;
-}
-
-/* Marker styles */
-.mapbox-gl-scope .mapboxgl-marker {
-  position: absolute;
-  z-index: 1;
-}
-
-.mapbox-gl-scope .mapboxgl-marker svg {
-  display: block;
-}
-
-/* Popup styles */
-.mapbox-gl-scope .mapboxgl-popup {
-  position: absolute;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
-  padding: 1px;
-  text-align: left;
-  border-radius: 12px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content {
-  margin: 13px 24px 13px 20px;
-  line-height: 1.3;
-  font-size: 13px;
-  min-height: 1px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content p {
-  margin: 17px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-tip-container {
-  width: 40px;
-  height: 20px;
-  position: absolute;
-  left: 50%;
-  margin-top: -1px;
-  margin-left: -20px;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-tip {
-  width: 17px;
-  height: 17px;
-  padding: 1px;
-  margin: -10px auto 0;
-  pointer-events: auto;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
-.mapbox-gl-scope .mapboxgl-popup-tip {
-  background: white;
-  color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-}
-
-.mapbox-gl-scope .mapboxgl-popup-close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: none;
-  text-align: center;
-  width: 24px;
-  height: 24px;
-  font: 16px/24px Tahoma, Verdana, sans-serif;
-  color: #757575;
-  text-decoration: none;
-  background: transparent;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
-.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
-  color: #585858;
-}
-
-/* Attribution */
-.mapbox-gl-scope .mapboxgl-ctrl-attribution {
-  background: #fff;
-  background: rgba(255, 255, 255, 0.8);
-  margin: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution,
-.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
-  padding: 0 5px;
-  color: #333;
-  line-height: 1.4;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
-  text-decoration: none;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
-  text-decoration: underline;
-}
-
-/* Hide attribution by default */
-.mapbox-gl-scope .mapboxgl-ctrl-attribution {
-  display: none !important;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-logo {
-  display: none !important;
-}