@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/data/table/utils/dynamic-columns.d.ts

@@ -0,0 +1,38 @@
+import { WmTableColumnProps } from "../props";
+/**
+ * Check if a field should be excluded from dynamic column generation
+ * Combines existing INTERNAL_PROPERTIES with pattern-based detection
+ * @param fieldName - The field name to check
+ * @returns true if the field should be excluded
+ */
+export declare const isInternalField: (fieldName: string) => boolean;
+/**
+ * Merge first rows (Angular uses up to 10) so nulls in row 0 are filled from later rows.
+ * Same idea as Angular getMetaDataFromData + assignWith in prepareFieldDefs.
+ */
+export declare const mergeRowsForAllFields: (data: any[]) => Record<string, any> | null;
+export interface PreparedFieldTerminal {
+    displayName: string;
+    field: string;
+    binding: string;
+    relatedTable?: string;
+    relatedField?: string;
+}
+/**
+ * Flatten nested objects/arrays into leaf field paths (e.g. children[0].dataset),
+ * matching Angular's prepareFieldDefs / pushFieldDefs in widget-utils.ts so
+ * onBeforedatarender scripts can toggle columns['children[0].widget'].show etc.
+ *
+ * Uses lodash `pickBy` to drop internal keys in one pass per object; recursion stays shallow.
+ */
+export declare const prepareFieldsFromMergedRow: (mergedRow: Record<string, any>, upperBound?: number) => PreparedFieldTerminal[];
+/**
+ * Generate column definitions from data array.
+ * Uses Angular-style nested flattening (prepareFieldDefs) so dynamic tables and
+ * onBeforedatarender(column) proxies match WaveMaker Angular (e.g. children[0].name).
+ */
+export declare const generateColumnsFromData: (data: any[]) => WmTableColumnProps[];
+/**
+ * Check if data is valid for column generation
+ */
+export declare const isValidDataForColumns: (data: any[]) => boolean;

package/components/data/table/utils/dynamic-columns.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareFieldsFromMergedRow = exports.mergeRowsForAllFields = exports.isValidDataForColumns = exports.isInternalField = exports.generateColumnsFromData = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _assignWith = _interopRequireDefault(require("lodash-es/assignWith"));
+var _forEach = _interopRequireDefault(require("lodash-es/forEach"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _pickBy = _interopRequireDefault(require("lodash-es/pickBy"));
+var _startCase = _interopRequireDefault(require("lodash-es/startCase"));
+var _columnBuilder = require("./columnBuilder");
+var _constants = require("./constants");
+var _index = require("./index");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * List of internal WaveMaker field prefixes that should be excluded
+ * from dynamic column generation
+ */
+var INTERNAL_FIELD_PATTERNS = ["_wm",
+// All fields starting with _wm (like _wmTableRowId, _wmListItemId, etc.)
+"__" // Double underscore fields (system fields)
+];
+
+/**
+ * Check if a field should be excluded from dynamic column generation
+ * Combines existing INTERNAL_PROPERTIES with pattern-based detection
+ * @param fieldName - The field name to check
+ * @returns true if the field should be excluded
+ */
+var isInternalField = exports.isInternalField = function isInternalField(fieldName) {
+  // Check exact matches from INTERNAL_PROPERTIES
+  if (_index.INTERNAL_PROPERTIES.includes(fieldName)) {
+    return true;
+  }
+
+  // Check pattern-based exclusions
+  return INTERNAL_FIELD_PATTERNS.some(function (pattern) {
+    return fieldName.startsWith(pattern);
+  });
+};
+
+/**
+ * Infer column type from data value
+ */
+var inferColumnType = function inferColumnType(value) {
+  if (value === null || value === undefined) {
+    return "string";
+  }
+  if (typeof value === "number") {
+    return "number";
+  }
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+  if (value instanceof Date) {
+    return "date";
+  }
+  if (typeof value === "string") {
+    // Check if it looks like a date
+    if (!isNaN(Date.parse(value)) && value.match(/^\d{4}-\d{2}-\d{2}/)) {
+      return "date";
+    }
+    // Check if it looks like a number
+    if (!isNaN(Number(value)) && value.trim() !== "") {
+      return "number";
+    }
+  }
+  return "string";
+};
+
+/** Plain object suitable for recursive field discovery (excludes Date, etc.) */
+var isPlainRecord = function isPlainRecord(value) {
+  return (0, _typeof2["default"])(value) === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
+};
+var MAX_FIELD_DEPTH = 12;
+
+/**
+ * Merge first rows (Angular uses up to 10) so nulls in row 0 are filled from later rows.
+ * Same idea as Angular getMetaDataFromData + assignWith in prepareFieldDefs.
+ */
+var mergeRowsForAllFields = exports.mergeRowsForAllFields = function mergeRowsForAllFields(data) {
+  if (!Array.isArray(data) || data.length === 0) return null;
+  var first = data[0];
+  if (first === null || (0, _typeof2["default"])(first) !== "object") return null;
+  var merged = _objectSpread({}, first);
+  var limit = Math.min(10, data.length);
+  for (var i = 1; i < limit; i++) {
+    var row = data[i];
+    if (row && (0, _typeof2["default"])(row) === "object") {
+      (0, _assignWith["default"])(merged, row, function (objVal, srcVal) {
+        return objVal === null || objVal === undefined ? srcVal : objVal;
+      });
+    }
+  }
+  return merged;
+};
+var PATH_SEGMENT_WITH_INDEX = /^(.+)\[(\d+)]$/;
+
+/** Caption for one binding path segment (e.g. `children[0]` → `Children[0]`). */
+function displayNameForFieldPath(fieldPath) {
+  return fieldPath.split(".").map(function (seg) {
+    var m = PATH_SEGMENT_WITH_INDEX.exec(seg);
+    return m ? "".concat((0, _startCase["default"])(m[1]), "[").concat(m[2], "]") : (0, _startCase["default"])(seg);
+  }).join(" ");
+}
+
+/** Keys like `table.column` become related metadata (Angular widget-utils parity). */
+function relatedFieldsFromKey(rawKey) {
+  if (!rawKey.includes(".")) return {};
+  var parts = rawKey.split(".");
+  return {
+    relatedTable: parts[0],
+    relatedField: parts[1]
+  };
+}
+function isLeafColumnValue(value) {
+  return value === null || value === undefined || (0, _typeof2["default"])(value) !== "object" || value instanceof Date || (0, _isArray["default"])(value) && !value[0];
+}
+
+/**
+ * Flatten nested objects/arrays into leaf field paths (e.g. children[0].dataset),
+ * matching Angular's prepareFieldDefs / pushFieldDefs in widget-utils.ts so
+ * onBeforedatarender scripts can toggle columns['children[0].widget'].show etc.
+ *
+ * Uses lodash `pickBy` to drop internal keys in one pass per object; recursion stays shallow.
+ */
+var prepareFieldsFromMergedRow = exports.prepareFieldsFromMergedRow = function prepareFieldsFromMergedRow(mergedRow) {
+  var upperBound = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.DYNAMIC_COLUMNS_CONFIG.maxColumns;
+  var terminals = [];
+  var columnCount = 0;
+  var pushTerminal = function pushTerminal(fieldPath, relatedTable, relatedField) {
+    if (columnCount >= upperBound) return;
+    var displayName = displayNameForFieldPath(fieldPath);
+    terminals.push({
+      displayName: displayName,
+      field: fieldPath,
+      binding: fieldPath,
+      relatedTable: relatedTable,
+      relatedField: relatedField !== null && relatedField !== void 0 ? relatedField : displayName
+    });
+    columnCount += 1;
+  };
+  var _pushFieldDef = function pushFieldDef(node, prefix, depth) {
+    if (columnCount >= upperBound || depth > MAX_FIELD_DEPTH || node == null) return;
+    if (!isPlainRecord(node)) return;
+    var visible = (0, _pickBy["default"])(node, function (_v, k) {
+      return !isInternalField(String(k));
+    });
+    (0, _forEach["default"])(visible, function (value, rawKey) {
+      if (columnCount >= upperBound) return;
+      var path = prefix ? "".concat(prefix, ".").concat(rawKey) : rawKey;
+      var rel = relatedFieldsFromKey(rawKey);
+      if (isLeafColumnValue(value)) {
+        pushTerminal(path, rel.relatedTable, rel.relatedField);
+        return;
+      }
+      if ((0, _isArray["default"])(value)) {
+        var first = value[0];
+        if (isPlainRecord(first)) {
+          _pushFieldDef(first, "".concat(path, "[0]"), depth + 1);
+        } else {
+          pushTerminal(path, rel.relatedTable, rel.relatedField);
+        }
+        return;
+      }
+      if (isPlainRecord(value)) {
+        _pushFieldDef(value, path, depth + 1);
+      }
+    });
+  };
+  _pushFieldDef(mergedRow, "", 0);
+  return terminals;
+};
+function sampleValueAtField(data, fieldPath) {
+  var limit = Math.min(10, data.length);
+  for (var i = 0; i < limit; i++) {
+    var row = data[i];
+    if (!row || (0, _typeof2["default"])(row) !== "object") continue;
+    var v = (0, _get["default"])(row, fieldPath);
+    if (v !== null && v !== undefined) return v;
+  }
+  return undefined;
+}
+
+/**
+ * Generate column definitions from data array.
+ * Uses Angular-style nested flattening (prepareFieldDefs) so dynamic tables and
+ * onBeforedatarender(column) proxies match WaveMaker Angular (e.g. children[0].name).
+ */
+var generateColumnsFromData = exports.generateColumnsFromData = function generateColumnsFromData(data) {
+  if (!data || data.length === 0) {
+    return [];
+  }
+  var merged = mergeRowsForAllFields(data);
+  if (!merged) {
+    return [];
+  }
+  var terminals = prepareFieldsFromMergedRow(merged, _constants.DYNAMIC_COLUMNS_CONFIG.maxColumns);
+  if (terminals.length === 0) {
+    return [];
+  }
+  return terminals.map(function (t, index) {
+    var firstNonNullValue = sampleValueAtField(data, t.field);
+    var inferredType = inferColumnType(firstNonNullValue);
+    return (0, _columnBuilder.createDefaultColumnProps)(t.field, t.displayName, inferredType, index);
+  });
+};
+
+/**
+ * Check if data is valid for column generation
+ */
+var isValidDataForColumns = exports.isValidDataForColumns = function isValidDataForColumns(data) {
+  return Array.isArray(data) && data.length > 0 && data.some(function (row) {
+    return row && (0, _typeof2["default"])(row) === "object" && Object.keys(row).length > 0;
+  });
+};

package/components/data/table/utils/groupHeaderUtils.d.ts

@@ -0,0 +1,18 @@
+import { TableStructureItem, TableGroup } from "./index";
+import { HeaderCellData } from "../props";
+/**
+ * Calculate the colspan for a group based on visible child columns
+ */
+export declare const calculateColspan: (group: TableGroup) => number;
+/**
+ * Calculate the maximum depth of the hierarchical structure
+ */
+export declare const calculateMaxDepth: (structure: TableStructureItem[]) => number;
+/**
+ * Generate header rows with proper colspan and rowspan values
+ */
+export declare const generateHeaderRows: (structure: TableStructureItem[], maxDepth: number) => HeaderCellData[][];
+/**
+ * Check if the table has any groups
+ */
+export declare const hasTableGroups: (structure: TableStructureItem[]) => boolean;

package/components/data/table/utils/groupHeaderUtils.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasTableGroups = exports.generateHeaderRows = exports.calculateMaxDepth = exports.calculateColspan = void 0;
+/**
+ * Calculate the colspan for a group based on visible child columns
+ */
+var calculateColspan = exports.calculateColspan = function calculateColspan(group) {
+  var _countVisibleColumns = function countVisibleColumns(items) {
+    var count = 0;
+    items.forEach(function (item) {
+      if ("isGroup" in item && item.isGroup) {
+        // Recursively count columns in nested groups
+        count += _countVisibleColumns(item.columns);
+      } else {
+        // It's a column - check if it's visible
+        var column = item;
+        if (column.show !== false) {
+          count++;
+        }
+      }
+    });
+    return count;
+  };
+  var colspan = _countVisibleColumns(group.columns);
+  return colspan || 1; // Return at least 1 to avoid invalid colspan
+};
+
+/**
+ * Calculate the maximum depth of the hierarchical structure
+ */
+var _calculateMaxDepth = exports.calculateMaxDepth = function calculateMaxDepth(structure) {
+  var maxDepth = 1;
+  structure.forEach(function (item) {
+    if ("isGroup" in item && item.isGroup) {
+      var groupDepth = 1 + _calculateMaxDepth(item.columns);
+      maxDepth = Math.max(maxDepth, groupDepth);
+    }
+  });
+  return maxDepth;
+};
+
+/**
+ * Generate header rows with proper colspan and rowspan values
+ */
+var generateHeaderRows = exports.generateHeaderRows = function generateHeaderRows(structure, maxDepth) {
+  var headerRows = [];
+
+  // Initialize empty rows
+  for (var i = 0; i < maxDepth; i++) {
+    headerRows.push([]);
+  }
+  var _processStructure = function processStructure(items) {
+    var currentLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    items.forEach(function (item) {
+      if ("isGroup" in item && item.isGroup) {
+        // It's a group - add to current level with colspan
+        var groupItem = item;
+        var colspan = calculateColspan(groupItem);
+        headerRows[currentLevel].push({
+          isGroup: true,
+          field: groupItem.field,
+          displayName: groupItem.displayName || "",
+          colspan: colspan,
+          textAlignment: groupItem.textAlignment,
+          backgroundColor: groupItem.backgroundColor,
+          "class": groupItem["class"],
+          colClass: groupItem.colClass,
+          styles: groupItem.styles
+        });
+
+        // Process children at next level
+        _processStructure(groupItem.columns, currentLevel + 1);
+      } else {
+        // It's a column - add with rowspan to reach bottom
+        var column = item;
+        if (column.show !== false) {
+          var rowspan = maxDepth - currentLevel;
+          headerRows[currentLevel].push({
+            isGroup: false,
+            field: column.field || column.binding || "",
+            displayName: column.caption || column.displayName || "",
+            rowspan: rowspan,
+            column: column
+          });
+        }
+      }
+    });
+  };
+  _processStructure(structure);
+  return headerRows;
+};
+/**
+ * Check if the table has any groups
+ */
+var hasTableGroups = exports.hasTableGroups = function hasTableGroups(structure) {
+  return structure.some(function (item) {
+    return "isGroup" in item && item.isGroup;
+  });
+};

package/components/data/table/utils/index.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps, ValidationResult } from "../props";
+declare const formWidgets: readonly ["WmText", "WmTextarea", "WmCheckbox", "WmSlider", "WmCurrency", "WmSwitch", "WmSelect", "WmCheckboxSet", "WmRadioSet", "WmDate", "WmTime", "WmTimestamp", "WmRating", "WmDatetime", "WmSearch", "WmChips", "WmColorPicker"];
+type FormWidgetType = (typeof formWidgets)[number];
+export type EditWidgetType = FormWidgetType;
+/**
+ * Adds unique row IDs to the dataset if they don't already have them.
+ * Uses _wmTableRowId or _wmListItemId as the primary key, falling back to a generated ID.
+ *
+ * @param dataset - The dataset to process
+ * @param options - Options for ID generation
+ * @param options.type - Type of widget ('table' or 'list')
+ * @param options.idProperty - Custom property name for the ID (defaults to _wmTableRowId for table, _wmListItemId for list)
+ * @returns The dataset with unique row IDs added
+ */
+export declare const addUniqueRowIds: (dataset: any, options?: {
+    type?: "table" | "list";
+    idProperty?: string;
+}) => any[];
+export declare const getWidgetMappingForType: (widgetType: string) => string;
+export declare const getBooleanDataset: () => {
+    key: boolean;
+    value: string;
+}[];
+export declare const isColumnVisibleForViewport: (column: WmTableColumnProps, viewportWidth: number) => boolean;
+export interface TableGroup {
+    isGroup: true;
+    field: string;
+    displayName: string;
+    columns: (TableGroup | WmTableColumnProps)[];
+    textAlignment?: string;
+    backgroundColor?: string;
+    class?: string;
+    colClass?: string;
+    styles?: React.CSSProperties;
+}
+export type TableStructureItem = TableGroup | WmTableColumnProps;
+export declare const parseTableColumns: (children: React.ReactNode, dataset: any) => WmTableColumnProps[];
+export declare const getAggregateFunctions: (dataset: any[], binding: string) => Record<string, Function>;
+export declare const parseTableStructureWithGroups: (children: React.ReactNode) => TableStructureItem[];
+export declare const flattenTableStructure: (structure: TableStructureItem[]) => WmTableColumnProps[];
+export declare const parseTableRowActions: (children: React.ReactNode) => WmTableRowActionProps[];
+export declare const parseTableActions: (children: React.ReactNode) => WmTableActionProps[];
+export declare const parseTableRowExpansion: (children: React.ReactNode) => WmTableRowProps | null;
+export declare const isEditAction: (actionKey: string) => boolean;
+export declare const isDeleteAction: (actionKey: string) => boolean;
+export declare const isAddNewAction: (actionKey: string) => boolean;
+export declare const getActionButtonClass: (action: WmTableRowActionProps) => string;
+export declare const getTableActionButtonClass: (action: WmTableActionProps) => string;
+/**
+ * Validates editing fields and focuses first invalid field if validation fails
+ * Can be used across different edit modes (inline, dialog, quick edit)
+ *
+ * @param fieldRefs - Record of field references from editing form
+ * @param editingRowId - Optional ID for logging/debugging purposes
+ * @returns ValidationResult object with validation status and invalid elements
+ */
+export declare const validateEditingFields: (fieldRefs: Record<string, HTMLElement | null>, editingRowId?: string) => ValidationResult;
+export declare const getButtonClasses: (action: any, spacing?: string, isGridEditMode?: boolean, isLoading?: boolean) => string;
+export declare const getSpacingClasses: (spacing?: string) => string;
+export declare const shouldShowPagination: ({ shownavigation, onDemandLoad, internalDataset, pagesize, allowpagesizechange, datasource, showrecordcount, }: {
+    shownavigation: boolean;
+    onDemandLoad: boolean;
+    internalDataset: any[];
+    pagesize: number;
+    allowpagesizechange: boolean;
+    datasource?: any;
+    showrecordcount?: boolean;
+}) => boolean;
+export declare const shouldShowPanelHeading: (title?: string, subheading?: string, iconclass?: string, exportformat?: any[], headerActions?: any[]) => boolean;
+/**
+ * Utility function to handle navigation after a new row is added to the table
+ * Used by both inline edit and quick edit modes
+ */
+export declare const handleNewRowNavigation: (tableRef: React.RefObject<any>, newRecord: any, internalDataset: any[]) => void;
+/**
+ * List of internal properties that should be removed from row data
+ * before passing to external handlers or form data
+ */
+export declare const INTERNAL_PROPERTIES: string[];
+/**
+ * Cleans row data by removing internal properties
+ * Handles both single objects and arrays of objects
+ * Removes:
+ * - Exact matches from INTERNAL_PROPERTIES list
+ * - Fields ending with internal suffixes (e.g., _formWidget)
+ * - Recursively cleans nested objects
+ * @param data The raw data - can be a single object, array of objects, or primitive
+ * @returns The cleaned data without internal properties
+ */
+export declare const cleanRowData: (data: any) => any;
+export declare const parseWidth: (width: string | number, fallbackSize?: number) => number;
+export declare const getColClass: (colClass: string, rowData: any, columnName: string) => string;
+export * from "./constants";
+export * from "./renderDisplayCell";
+export * from "./buildSelectionColumns";
+export * from "./validation";
+export * from "./selectionUtils";
+export * from "./columnBuilder";
+export * from "./columnWidthDistribution";
+export * from "./table-helpers";