datastake-daf 0.6.149 → 0.6.150

package/dist/components/index.js

@@ -3065,7 +3065,7 @@ const config$3 = {
   Integration: config$4
 };
 
-const _excluded$q = ["width", "height", "size", "name", "fill"];
+const _excluded$r = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -3074,7 +3074,7 @@ const CustomIcon = _ref => {
       name = "",
       fill = "none"
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   const conf = config$3[name];
   if (conf) {
     return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -9276,7 +9276,7 @@ createCommonjsModule(function (module, exports) {
 !function(e,n){module.exports=n();}(commonjsGlobal,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}}));
 });
 
-const _excluded$p = ["view", "module", "scope", "form", "meta"];
+const _excluded$q = ["view", "module", "scope", "form", "meta"];
 dayjs__default["default"].extend(customParseFormat);
 dayjs__default["default"].extend(utc);
 dayjs__default["default"].extend(utc);
@@ -9650,7 +9650,7 @@ const filterCreateData = data => {
       form,
       meta
     } = data,
-    rest = _objectWithoutProperties(data, _excluded$p);
+    rest = _objectWithoutProperties(data, _excluded$q);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -10035,7 +10035,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$o = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
+const _excluded$p = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
 function DAFTable(_ref) {
   let {
       columns = [],
@@ -10066,7 +10066,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -10788,7 +10788,7 @@ Pagination.propTypes = {
   isMobile: PropTypes__default["default"].bool
 };
 
-const _excluded$n = ["size", "maxHeight", "dataSource", "columns", "pagination"];
+const _excluded$o = ["size", "maxHeight", "dataSource", "columns", "pagination"];
 function StickyTable(_ref) {
   let {
       size = null,
@@ -10797,7 +10797,7 @@ function StickyTable(_ref) {
       columns = {},
       pagination = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "daf-sticky-table",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11262,7 +11262,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$m = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$n = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -11276,7 +11276,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$m);
+    restProps = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -11510,12 +11510,12 @@ const Style$H = dt.div`
   }
 `;
 
-const _excluded$l = ["children"];
+const _excluded$m = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxRuntime.jsx(Style$H, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11524,7 +11524,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$b;
+var _templateObject$c;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -11642,7 +11642,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$G = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
+const Style$G = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11655,12 +11655,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$k = ["icon"];
+const _excluded$l = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -11982,7 +11982,7 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$j = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$k = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
   useToken: useToken$j
 } = antd.theme;
@@ -12075,7 +12075,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$j);
+    restProps = _objectWithoutProperties(_ref, _excluded$k);
   const {
     token
   } = useToken$j();
@@ -12742,7 +12742,7 @@ DAFHeader.propTypes = {
   downloadDisabled: PropTypes__default["default"].any
 };
 
-const _excluded$i = ["tabs", "onChange", "value", "className"];
+const _excluded$j = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -12750,7 +12750,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -12847,14 +12847,16 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const useFooter = ({
-  leftContent,
-  centerContent,
-  rightContent,
-  actionButtons,
-  app,
-  isViewMode
-}) => {
+const _excluded$i = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const useFooter = _ref => {
+  let {
+    leftContent,
+    centerContent,
+    rightContent,
+    actionButtons,
+    app,
+    isViewMode
+  } = _ref;
   const renderFooterContent = React.useMemo(() => {
     const FooterContent = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "daf-footer-content",
@@ -12870,18 +12872,18 @@ const useFooter = ({
           className: "daf-footer-actions",
           children: actionButtons.map((button, index) => {
             const {
-              label,
-              onClick,
-              icon,
-              type = BTN_TYPES.PRIMARY,
-              tooltip,
-              disabled = false,
-              loading = false,
-              style = {},
-              className = "",
-              ...restProps
-            } = button;
-            return /*#__PURE__*/jsxRuntime.jsx(DafButton, {
+                label,
+                onClick,
+                icon,
+                type = BTN_TYPES.PRIMARY,
+                tooltip,
+                disabled = false,
+                loading = false,
+                style = {},
+                className = ""
+              } = button,
+              restProps = _objectWithoutProperties(button, _excluded$i);
+            return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
               size: BTN_SIZE.MD,
@@ -12893,9 +12895,8 @@ const useFooter = ({
               loading: loading,
               title: tooltip,
               style: style,
-              className: className,
-              ...restProps
-            }, index);
+              className: className
+            }, restProps), index);
           })
         })]
       })]
@@ -12908,180 +12909,8 @@ const useFooter = ({
   };
 };
 
-const FooterContainer = dt.div`
-	.daf-footer {
-		background: #ffffff;
-		border-top: 1px solid #e8e8e8;
-		border-left: none;
-		border-right: none;
-		border-bottom: none;
-		border-radius: 0;
-		padding: 24px;
-		margin: 0;
-		box-shadow: none;
-		z-index: 100;
-		position: relative;
-		min-height: 80px;
-
-		&.daf-footer-fixed {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			z-index: 1000;
-		}
-
-		.daf-footer-content {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 100%;
-			min-height: 32px;
-
-			.daf-footer-left {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: flex-start;
-			}
-
-			.daf-footer-center {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.daf-footer-right {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-				gap: 12px;
-
-				.daf-footer-actions {
-					.ant-btn {
-						height: 40px;
-						padding: 0 24px;
-						border-radius: 6px;
-						font-weight: 500;
-						font-size: 14px;
-						transition: all 0.3s ease;
-						border: 1px solid transparent;
-
-						&.ant-btn-primary {
-							background-color: var(--color-primary-70);
-							color: #ffffff;
-							border-color: var(--color-primary-70);
-
-							&:hover {
-								background-color: var(--color-primary-60);
-								border-color: var(--color-primary-60);
-							}
-
-							&:active {
-								background-color: var(--color-primary-80);
-								border-color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								background-color: #f5f5f5;
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-
-						&.ant-btn-default {
-							background: #ffffff;
-							color: #666666;
-							border-color: #d9d9d9;
-
-							&:hover {
-								border-color: var(--color-primary-70);
-								color: var(--color-primary-70);
-							}
-
-							&:active {
-								border-color: var(--color-primary-80);
-								color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								background-color: #f5f5f5;
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-
-						&.ant-btn-ghost {
-							background: transparent;
-							color: #666666;
-							border-color: #d9d9d9;
-
-							&:hover {
-								border-color: var(--color-primary-70);
-								color: var(--color-primary-70);
-								background: rgba(0, 0, 0, 0.02);
-							}
-
-							&:active {
-								border-color: var(--color-primary-80);
-								color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	/* Responsive design */
-	@media (max-width: 768px) {
-		.daf-footer {
-			margin: 0;
-			padding: 16px;
-
-			.daf-footer-content {
-				flex-direction: column;
-				gap: 16px;
-				align-items: stretch;
-
-				.daf-footer-left,
-				.daf-footer-center,
-				.daf-footer-right {
-					flex: none;
-					justify-content: center;
-				}
-
-				.daf-footer-right {
-					.daf-footer-actions {
-						justify-content: center;
-					}
-				}
-			}
-		}
-	}
-
-	/* App-specific styling */
-	&.sbg-app {
-		.daf-footer {
-			background: #f8f9fa;
-			border-color: #e9ecef;
-		}
-	}
-
-	&.nashiriki-app {
-		.daf-footer {
-			background: #fff;
-			border-color: #d9d9d9;
-		}
-	}
-`;
+var _templateObject$b;
+const FooterContainer = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\t.daf-footer {\n\t\tbackground: #ffffff;\n\t\tborder-top: 1px solid #e8e8e8;\n\t\tborder-left: none;\n\t\tborder-right: none;\n\t\tborder-bottom: none;\n\t\tborder-radius: 0;\n\t\tpadding: 24px;\n\t\tmargin: 0;\n\t\tbox-shadow: none;\n\t\tz-index: 100;\n\t\tposition: relative;\n\t\tmin-height: 80px;\n\n\t\t&.daf-footer-fixed {\n\t\t\tposition: fixed;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tz-index: 1000;\n\t\t}\n\n\t\t.daf-footer-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\twidth: 100%;\n\t\t\tmin-height: 32px;\n\n\t\t\t.daf-footer-left {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t}\n\n\t\t\t.daf-footer-center {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\n\t\t\t.daf-footer-right {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: 12px;\n\n\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t.ant-btn {\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tpadding: 0 24px;\n\t\t\t\t\t\tborder-radius: 6px;\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\t\tborder: 1px solid transparent;\n\n\t\t\t\t\t\t&.ant-btn-primary {\n\t\t\t\t\t\t\tbackground-color: var(--color-primary-70);\n\t\t\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-60);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-60);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-default {\n\t\t\t\t\t\t\tbackground: #ffffff;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-ghost {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t\tbackground: rgba(0, 0, 0, 0.02);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Responsive design */\n\t@media (max-width: 768px) {\n\t\t.daf-footer {\n\t\t\tmargin: 0;\n\t\t\tpadding: 16px;\n\n\t\t\t.daf-footer-content {\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 16px;\n\t\t\t\talign-items: stretch;\n\n\t\t\t\t.daf-footer-left,\n\t\t\t\t.daf-footer-center,\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\tflex: none;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* App-specific styling */\n\t&.sbg-app {\n\t\t.daf-footer {\n\t\t\tbackground: #f8f9fa;\n\t\t\tborder-color: #e9ecef;\n\t\t}\n\t}\n\n\t&.nashiriki-app {\n\t\t.daf-footer {\n\t\t\tbackground: #fff;\n\t\t\tborder-color: #d9d9d9;\n\t\t}\n\t}\n"])));
 
 function DAFFooter(_ref) {
   let {
@@ -13127,9 +12956,11 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const ROW_SPACING = 24; // Spacing between content rows
+const CONTENT_BOTTOM_PADDING = 30; // Extra padding at the very bottom of the last section of the document
+
 const Row = _ref => {
   let {
     widgets,
@@ -13178,49 +13009,84 @@ function PdfView(_ref2) {
     const keys = Object.keys(sectionsConfig);
     let _pages = [1];
     let _page = 1;
+
+    // The total vertical space available for flowing content on each page,
+    // considering that HEADER_HEIGHT and FOOTER_HEIGHT are for absolutely positioned elements
+    // and content should flow between them.
+    const usableContentHeightPerPage = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
     if (keys.length === config.length) {
-      let incrHeight = 0;
+      let currentFlowHeight = 0; // Tracks height accumulated within the `usableContentHeightPerPage` for the current page
+
+      // Reset all margins/paddings first for a clean slate
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
+        if (ref.current) {
+          ref.current.style.marginBottom = '0px';
+          ref.current.style.marginTop = '0px';
+          ref.current.style.paddingBottom = '0px';
+        }
       });
       keys.forEach((k, i) => {
         const {
           height,
           ref
         } = sectionsConfig[k];
-        if (i === 0) {
-          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-          incrHeight += HEADER_HEIGHT;
+        if (!ref.current) return; // Skip if ref is not available yet
+
+        let sectionTopMargin = ROW_SPACING; // Default margin for sections that follow another on the same page
+
+        // The first section on *any* page (either global first or first on a new page)
+        // needs to be offset by HEADER_HEIGHT from the top of the page.
+        if (i === 0 || currentFlowHeight === 0) {
+          sectionTopMargin = HEADER_HEIGHT;
         }
-        const newHeight = incrHeight + height;
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+
+        // Calculate the total height this section would occupy *including its immediate top margin and its own height*.
+        let totalHeightForThisSection = sectionTopMargin + height;
+
+        // If it's not the very last section of the document, add the standard row spacing.
+        if (i < keys.length - 1) {
+          totalHeightForThisSection += ROW_SPACING;
+        } else {
+          // For the very last section, add the document-level bottom padding.
+          totalHeightForThisSection += CONTENT_BOTTOM_PADDING;
         }
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
+
+        // Check if placing this section (with its calculated space) on the current page
+        // would exceed the usable content area for a theoretical page.
+        if (currentFlowHeight + totalHeightForThisSection > usableContentHeightPerPage) {
+          // This section overflows, so it starts on a new page.
           _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);
+
+          // Reset flow height for the new page.
+          // This section is now the first on a new page, so its top margin is HEADER_HEIGHT.
+          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
+          currentFlowHeight = HEADER_HEIGHT + height; // Start accumulated height for new page
+
+          // Add row spacing or bottom padding for this section on its new page
+          if (i < keys.length - 1) {
+            currentFlowHeight += ROW_SPACING;
+          } else {
+            ref.current.style.paddingBottom = "".concat(CONTENT_BOTTOM_PADDING, "px");
+            currentFlowHeight += CONTENT_BOTTOM_PADDING;
           }
         } else {
-          incrHeight = newHeight + 24;
+          // This section fits on the current page.
+          ref.current.style.marginTop = "".concat(sectionTopMargin, "px");
+          currentFlowHeight += totalHeightForThisSection; // Accumulate the height this section takes
+
+          // Apply special padding for the very last section of the document if it fits on current page
+          if (i === keys.length - 1) {
+            ref.current.style.paddingBottom = "".concat(CONTENT_BOTTOM_PADDING, "px");
+          }
         }
-        // console.groupEnd();
       });
       setPages(_pages);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13246,16 +13112,6 @@ function PdfView(_ref2) {
       })
     });
   }, [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: {
@@ -13266,11 +13122,13 @@ function PdfView(_ref2) {
         style: {
           top: (page - 1) * PAGE_HEIGHT,
           width: '100%',
-          height: HEADER_HEIGHT - 24,
+          height: HEADER_HEIGHT,
           position: 'absolute',
           left: 0,
           zIndex: 1000000
-        },
+        } // Changed height from HEADER_HEIGHT - 24 to HEADER_HEIGHT for consistency
+        ,
+
         className: "flex-row dashboard-header",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center flex-1",
@@ -13331,15 +13189,6 @@ function PdfView(_ref2) {
     }))]
   });
 }
-PdfView.propTypes = {
-  config: PropTypes__default["default"].array,
-  customClassName: PropTypes__default["default"].any,
-  title: PropTypes__default["default"].string,
-  imgSrc: PropTypes__default["default"].string,
-  userId: PropTypes__default["default"].string,
-  accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string
-};
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {
   const url = getApiBaseUrl();
@@ -15440,7 +15289,11 @@ function Widget(_ref) {
           className: "flex justify-content-end",
           children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
             size: "small",
-            className: "flex-1 no-min-width",
+            className: "squareIconButton no-min-width",
+            style: {
+              height: '25px',
+              width: '25px'
+            },
             onClick: handleCollapseToggle,
             icon: isCollapsed ? /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {
               style: {

package/package.json

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