datastake-daf 0.6.254 → 0.6.255

package/dist/components/index.js

@@ -15422,35 +15422,327 @@ const PdfForm = _ref3 => {
     return organizedSections;
   };
   const organizedForm = React.useMemo(() => organizeFormByHeaders(form), [form]);
+
+  // Constants for height calculations (same as PdfView)
+  const PAGE_HEIGHT = 1587;
+  const FOOTER_HEIGHT = 70;
+  const HEADER_HEIGHT = 100;
+
+  // Detect if running in headless/Puppeteer environment (more conservative detection)
+  const isPuppeteerEnvironment = () => {
+    if (typeof window === 'undefined') return false;
+
+    // Only trigger on explicit URL parameters (most reliable)
+    return window.location.search.includes('puppeteer=true') || window.location.search.includes('headless=true') || window.location.search.includes('pdf=true') ||
+    // Only very specific headless browser indicators
+    window.navigator.webdriver === true && window.navigator.userAgent.includes('HeadlessChrome');
+  };
+
+  // Debug function to log detection results (can be removed later)
+  const debugEnvironment = () => {
+    if (typeof window !== 'undefined' && window.console) {
+      console.log('Environment Detection:', {
+        isPuppeteer: isPuppeteerEnvironment(),
+        userAgent: window.navigator.userAgent,
+        webdriver: window.navigator.webdriver,
+        resizeObserver: !!window.ResizeObserver,
+        urlParams: window.location.search
+      });
+    }
+  };
+
+  // Conservative height estimation for Puppeteer compatibility
+  const estimateTreeNodeHeight = function (key, config, value) {
+    let level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    const isPuppeteer = isPuppeteerEnvironment();
+    // Call debug only once to avoid spam
+    if (level === 0 && key === Object.keys(form)[0]) {
+      debugEnvironment();
+    }
+
+    // Appropriate base heights for each environment
+    const baseHeight = isPuppeteer ? 35 : 25; // Less aggressive for normal browsers
+    const indentHeight = level * (isPuppeteer ? 3 : 2); // Normal indent for browsers
+    let totalHeight = baseHeight + indentHeight;
+
+    // Type-based adjustments - less aggressive for normal browsers
+    if ((config === null || config === void 0 ? void 0 : config.type) === 'header') {
+      totalHeight += isPuppeteer ? 25 : 12;
+    } else if ((config === null || config === void 0 ? void 0 : config.type) === 'textarea') {
+      totalHeight += isPuppeteer ? 60 : 30;
+    } else if ((config === null || config === void 0 ? void 0 : config.type) === 'dataLink' || (config === null || config === void 0 ? void 0 : config.type) === 'dataLinkGroup') {
+      totalHeight += isPuppeteer ? 35 : 15;
+    } else if ((config === null || config === void 0 ? void 0 : config.type) === 'groupInputs') {
+      totalHeight += isPuppeteer ? 40 : 20;
+    }
+
+    // Content height estimation - appropriate for each environment
+    if (value && typeof value === 'string') {
+      if (value.length > 100) {
+        const multiplier = isPuppeteer ? 20 : 12; // Less aggressive for browsers
+        totalHeight += Math.ceil(value.length / 50) * multiplier;
+      } else if (value.length > 30) {
+        totalHeight += isPuppeteer ? 25 : 10; // Much less for normal browsers
+      }
+    }
+
+    // Add height for children recursively with appropriate multiplier
+    if (config !== null && config !== void 0 && config.inputs) {
+      const childKeys = Object.keys(config.inputs).filter(childKey => {
+        const childConfig = config.inputs[childKey];
+        // Check showIf condition
+        if (childConfig !== null && childConfig !== void 0 && childConfig.showIf && !evaluateShowIfCondition(childConfig.showIf, data)) {
+          return false;
+        }
+        return true;
+      }).sort((a, b) => {
+        var _config$inputs$a3, _config$inputs$b3;
+        const positionA = ((_config$inputs$a3 = config.inputs[a]) === null || _config$inputs$a3 === void 0 ? void 0 : _config$inputs$a3.position) || 0;
+        const positionB = ((_config$inputs$b3 = config.inputs[b]) === null || _config$inputs$b3 === void 0 ? void 0 : _config$inputs$b3.position) || 0;
+        return positionA - positionB;
+      });
+      let childrenHeight = 0;
+      childKeys.forEach(childKey => {
+        const childConfig = config.inputs[childKey];
+        const childValue = (value === null || value === void 0 ? void 0 : value[childKey]) || (data === null || data === void 0 ? void 0 : data[childKey]);
+        childrenHeight += estimateTreeNodeHeight(childKey, childConfig, childValue, level + 1);
+      });
+
+      // Only add safety multiplier for Puppeteer
+      totalHeight += childrenHeight * (isPuppeteer ? 1.3 : 1.0);
+    }
+
+    // Handle array/repeated content
+    if (Array.isArray(value)) {
+      value.forEach(itemValue => {
+        const multiplier = isPuppeteer ? 1.1 : 1.0; // No buffer for normal browsers
+        totalHeight += estimateTreeNodeHeight(key, config, itemValue, level) * multiplier;
+      });
+    }
+    return Math.ceil(totalHeight);
+  };
+
+  // Helper function to split section based on height constraints (goes deep if needed)
+  const createHeightConstrainedSections = (sectionKey, section) => {
+    const isPuppeteer = isPuppeteerEnvironment();
+
+    // Environment-appropriate height limits
+    const BASE_BUFFER = isPuppeteer ? 300 : 100; // Much smaller buffer for normal browsers
+    const MAX_SECTION_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - BASE_BUFFER;
+    const subSections = [];
+
+    // Get all top-level items in the section with detailed analysis
+    const topLevelItems = Object.keys(section).filter(key => !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')).map(key => {
+      var _section$key;
+      return {
+        key,
+        config: section[key],
+        estimatedHeight: estimateTreeNodeHeight(key, section[key], data === null || data === void 0 ? void 0 : data[key]),
+        canSplit: ((_section$key = section[key]) === null || _section$key === void 0 ? void 0 : _section$key.inputs) && Object.keys(section[key].inputs).length > 1 // Can this item be further split?
+      };
+    }).sort((a, b) => {
+      var _a$config, _b$config;
+      return (((_a$config = a.config) === null || _a$config === void 0 ? void 0 : _a$config.position) || 0) - (((_b$config = b.config) === null || _b$config === void 0 ? void 0 : _b$config.position) || 0);
+    });
+    let currentSubSection = _objectSpread2({}, section);
+
+    // Remove all items from the base section structure
+    Object.keys(section).forEach(key => {
+      if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
+        delete currentSubSection[key];
+      }
+    });
+    let currentHeight = 80; // Base height for section header
+    let subSectionIndex = 0;
+    topLevelItems.forEach((item, index) => {
+      const {
+        key,
+        config,
+        estimatedHeight,
+        canSplit
+      } = item;
+
+      // Environment-appropriate splitting thresholds
+      const SPLIT_THRESHOLD = isPuppeteer ? 0.6 : 0.85; // Less aggressive for browsers
+      const CHILD_MAX_HEIGHT = isPuppeteer ? 0.4 : 0.7;
+
+      // If a single item is too large and can be split, split it at the child level
+      if (estimatedHeight > MAX_SECTION_HEIGHT * SPLIT_THRESHOLD && canSplit) {
+        // Split this large item into smaller parts
+        const childSplits = splitLargeItem(key, config, data === null || data === void 0 ? void 0 : data[key], MAX_SECTION_HEIGHT * CHILD_MAX_HEIGHT);
+        childSplits.forEach((splitItem, splitIndex) => {
+          // Check if current subsection has room
+          if (currentHeight + splitItem.estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
+            // Save current sub-section
+            subSections.push({
+              key: "".concat(sectionKey, "_part_").concat(subSectionIndex),
+              section: _objectSpread2({}, currentSubSection),
+              title: section.label
+            });
+
+            // Start new sub-section
+            currentSubSection = {
+              id: section.id,
+              label: section.label,
+              position: section.position + subSectionIndex + 1,
+              subTitle: section.subTitle
+            };
+            currentHeight = 80;
+            subSectionIndex++;
+          }
+
+          // Add split item to current sub-section
+          currentSubSection[splitItem.key] = splitItem.config;
+          currentHeight += splitItem.estimatedHeight;
+        });
+      } else {
+        // Regular processing for items that fit or can't be split
+        // Check if adding this item would exceed height limit
+        if (currentHeight + estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
+          // Save current sub-section
+          subSections.push({
+            key: "".concat(sectionKey, "_part_").concat(subSectionIndex),
+            section: _objectSpread2({}, currentSubSection),
+            title: section.label
+          });
+
+          // Start new sub-section
+          currentSubSection = {
+            id: section.id,
+            label: section.label,
+            position: section.position + subSectionIndex + 1,
+            subTitle: section.subTitle
+          };
+          currentHeight = 80;
+          subSectionIndex++;
+        }
+
+        // Add item to current sub-section
+        currentSubSection[key] = config;
+        currentHeight += estimatedHeight;
+      }
+    });
+
+    // Add the final sub-section if it has content
+    if (Object.keys(currentSubSection).length > 4) {
+      subSections.push({
+        key: subSectionIndex === 0 ? sectionKey : "".concat(sectionKey, "_part_").concat(subSectionIndex),
+        section: currentSubSection,
+        title: section.label
+      });
+    }
+    return subSections.length > 0 ? subSections : [{
+      key: sectionKey,
+      section: section,
+      title: section.label
+    }];
+  };
+
+  // Helper function to split large items at the child level
+  const splitLargeItem = (parentKey, parentConfig, parentValue, maxHeight) => {
+    if (!(parentConfig !== null && parentConfig !== void 0 && parentConfig.inputs)) {
+      return [{
+        key: parentKey,
+        config: parentConfig,
+        estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue)
+      }];
+    }
+    const childItems = Object.keys(parentConfig.inputs).filter(childKey => {
+      const childConfig = parentConfig.inputs[childKey];
+      return !(childConfig !== null && childConfig !== void 0 && childConfig.showIf) || evaluateShowIfCondition(childConfig.showIf, data);
+    }).map(childKey => ({
+      key: childKey,
+      config: parentConfig.inputs[childKey],
+      estimatedHeight: estimateTreeNodeHeight(childKey, parentConfig.inputs[childKey], parentValue === null || parentValue === void 0 ? void 0 : parentValue[childKey])
+    })).sort((a, b) => {
+      var _a$config2, _b$config2;
+      return (((_a$config2 = a.config) === null || _a$config2 === void 0 ? void 0 : _a$config2.position) || 0) - (((_b$config2 = b.config) === null || _b$config2 === void 0 ? void 0 : _b$config2.position) || 0);
+    });
+    const splits = [];
+    let currentSplit = {
+      key: "".concat(parentKey, "_part_0"),
+      config: _objectSpread2(_objectSpread2({}, parentConfig), {}, {
+        inputs: {}
+      }),
+      estimatedHeight: 40 // Base height for parent structure
+    };
+    let splitIndex = 0;
+    childItems.forEach(child => {
+      if (currentSplit.estimatedHeight + child.estimatedHeight > maxHeight && Object.keys(currentSplit.config.inputs).length > 0) {
+        splits.push(currentSplit);
+        splitIndex++;
+        currentSplit = {
+          key: "".concat(parentKey, "_part_").concat(splitIndex),
+          config: _objectSpread2(_objectSpread2({}, parentConfig), {}, {
+            label: parentConfig.label,
+            inputs: {}
+          }),
+          estimatedHeight: 40
+        };
+      }
+      currentSplit.config.inputs[child.key] = child.config;
+      currentSplit.estimatedHeight += child.estimatedHeight;
+    });
+    if (Object.keys(currentSplit.config.inputs).length > 0) {
+      splits.push(currentSplit);
+    }
+    return splits.length > 0 ? splits : [{
+      key: parentKey,
+      config: parentConfig,
+      estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue)
+    }];
+  };
   const pdfConfig = React.useMemo(() => {
     const sections = [];
+    const isPuppeteer = isPuppeteerEnvironment();
+
+    // Apply Puppeteer-specific class to document body if needed
+    if (typeof document !== 'undefined') {
+      if (isPuppeteer) {
+        document.body.setAttribute('data-puppeteer', 'true');
+      } else {
+        document.body.removeAttribute('data-puppeteer');
+      }
+    }
     Object.keys(organizedForm).forEach(sectionKey => {
       const section = organizedForm[sectionKey];
       if (typeof section !== 'object' || !section.label) {
         return;
       }
-      sections.push({
-        render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "pdf-form-section",
-          children: /*#__PURE__*/jsxRuntime.jsx(PdfFormContent, {
-            form: {
-              [sectionKey]: section
-            },
-            data: data,
-            t: t,
-            user: user,
-            title: formName,
-            source: source,
-            version: version,
-            getApiBaseUrl: getApiBaseUrl,
-            getAppHeader: getAppHeader,
-            app: app
-          })
-        }, sectionKey),
-        style: {
-          marginBottom: '20px',
-          padding: '0 20px'
-        }
+
+      // Create height-constrained sub-sections
+      const subSections = createHeightConstrainedSections(sectionKey, section);
+      subSections.forEach(_ref4 => {
+        let {
+          key,
+          section: subSection,
+          title
+        } = _ref4;
+        sections.push({
+          render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "pdf-form-section ".concat(isPuppeteer ? 'puppeteer-mode' : ''),
+            children: /*#__PURE__*/jsxRuntime.jsx(PdfFormContent, {
+              form: {
+                [key]: _objectSpread2(_objectSpread2({}, subSection), {}, {
+                  label: title
+                })
+              },
+              data: data,
+              t: t,
+              user: user,
+              title: formName,
+              source: source,
+              version: version,
+              getApiBaseUrl: getApiBaseUrl,
+              getAppHeader: getAppHeader,
+              app: app
+            })
+          }, key),
+          style: {
+            marginBottom: '20px',
+            padding: '0 20px'
+          }
+        });
       });
     });
     return sections;
@@ -20505,12 +20797,29 @@ const DAFSteps = _ref => {
   let {
     direction = "vertical",
     current = 0,
-    items = []
+    items = [],
+    scrollThreshold = 4
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-      title: "Life Cycle",
-      className: "with-border-header",
+  const shouldScroll = items.length > scrollThreshold;
+  const scrollableStyles = shouldScroll ? _objectSpread2(_objectSpread2({}, direction === "vertical" ? {
+    maxHeight: "300px",
+    overflowY: "auto",
+    overflowX: "hidden"
+  } : {
+    maxWidth: "100%",
+    overflowX: "auto",
+    overflowY: "hidden",
+    whiteSpace: "nowrap"
+  }), {}, {
+    padding: "8px",
+    marginRight: direction === "vertical" ? "-8px" : "0",
+    paddingRight: direction === "vertical" ? "16px" : "8px"
+  }) : {};
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: "Life Cycle",
+    className: "with-border-header",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: scrollableStyles,
       children: /*#__PURE__*/jsxRuntime.jsx(antd.Steps, {
         direction: direction,
         current: current,
@@ -20525,12 +20834,14 @@ DAFSteps.propTypes = {
   items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     title: PropTypes__default["default"].string.isRequired,
     description: PropTypes__default["default"].string
-  }))
+  })),
+  scrollThreshold: PropTypes__default["default"].number
 };
 DAFSteps.defaultProps = {
   direction: "vertical",
   current: 0,
-  items: []
+  items: [],
+  scrollThreshold: 4
 };
 
 /**

package/package.json

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

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

@@ -17,6 +17,11 @@ VerticalSteps.args = {
     { title: "Step 1", description: "This is the first step" },
     { title: "Step 2", description: "This is the second step" },
     { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
   ],
 };
 

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

@@ -3,16 +3,35 @@ import { Steps } from "antd";
 import Widget from "../../Dashboard/Widget/index.jsx";
 import PropTypes from "prop-types";
 
-const DAFSteps = ({ direction = "vertical", current = 0, items = [] }) => {
+const DAFSteps = ({ direction = "vertical", current = 0, items = [], scrollThreshold = 4 }) => {
+  const shouldScroll = items.length > scrollThreshold;
+  
+  const scrollableStyles = shouldScroll ? {
+    ...(direction === "vertical" ? {
+      maxHeight: "300px",
+      overflowY: "auto",
+      overflowX: "hidden"
+    } : {
+      maxWidth: "100%",
+      overflowX: "auto",
+      overflowY: "hidden",
+      whiteSpace: "nowrap"
+    }),
+    padding: "8px",
+    marginRight: direction === "vertical" ? "-8px" : "0",
+    paddingRight: direction === "vertical" ? "16px" : "8px"
+  } : {};
+
   return (
-    <><Widget title="Life Cycle" className="with-border-header">
-      <Steps
-        direction={direction}
-        current={current}
-        items={items}
-      />
+    <Widget title="Life Cycle" className="with-border-header">
+      <div style={scrollableStyles}>
+        <Steps
+          direction={direction}
+          current={current}
+          items={items}
+        />
+      </div>
     </Widget>
-    </>
   );
 };
 
@@ -25,12 +44,14 @@ DAFSteps.propTypes = {
       description: PropTypes.string,
     })
   ),
+  scrollThreshold: PropTypes.number,
 };
 
 DAFSteps.defaultProps = {
   direction: "vertical",
   current: 0,
   items: [],
+  scrollThreshold: 4,
 };
 
 export default DAFSteps;

package/src/@daf/core/components/EditForm/storyConfig.js

@@ -1,3 +1,3 @@
-import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig3";
+import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig2";
 
 export { getApiBaseUrl, getAppHeader, storyData };