@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,23 @@
+import type { CSSProperties } from "react";
+/** Minimal header shape for expansion insert-index calculation (TanStack Header-compatible). */
+export type ExpansionColumnHeaderLike = {
+    id: string;
+    column: {
+        id: string;
+        columnDef?: unknown;
+    };
+};
+/**
+ * Index at which the row-expansion `<th>` / `<td>` / `<col>` is inserted.
+ * Mirrors Angular datatable.js preparedHeaderData row-expansion placement.
+ */
+export declare function getExpansionColumnInsertIndex(headers: ReadonlyArray<ExpansionColumnHeaderLike>, rowExpansionConfig: {
+    position?: string | number;
+} | null | undefined, options?: {
+    appendForGroupedTable?: boolean;
+}): number;
+export declare function buildExpansionColSpec(columnwidth?: string): {
+    key: string;
+    width: string;
+    style: CSSProperties;
+};

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

@@ -0,0 +1,56 @@
+const SYSTEM_HEADER_IDS = /* @__PURE__ */ new Set([
+  "multiSelect",
+  "radioSelect",
+  "row-index",
+  "rowIndex",
+  "actions"
+]);
+function findFirstDataColumnIndex(headers) {
+  for (let i = 0; i < headers.length; i++) {
+    if (!SYSTEM_HEADER_IDS.has(headers[i].id)) {
+      return i;
+    }
+  }
+  return 0;
+}
+function getExpansionColumnInsertIndex(headers, rowExpansionConfig, options) {
+  if (!rowExpansionConfig) return -1;
+  if (options == null ? void 0 : options.appendForGroupedTable) {
+    return headers.length;
+  }
+  const position = rowExpansionConfig.position;
+  if (position === "-1" || position === -1) {
+    return Math.max(0, headers.length - 1);
+  }
+  if (typeof position === "number" || typeof position === "string" && !isNaN(Number(position))) {
+    return findFirstDataColumnIndex([...headers]) + Number(position);
+  }
+  if (typeof position === "string") {
+    const columnIndex = headers.findIndex((header) => {
+      var _a;
+      if (header.id === position || header.column.id === position) {
+        return true;
+      }
+      const accessorKey = (_a = header.column.columnDef) == null ? void 0 : _a.accessorKey;
+      if (accessorKey === position) {
+        return true;
+      }
+      const normalizedPosition = position.replace(/\./g, "_");
+      return header.id === normalizedPosition || header.column.id === normalizedPosition;
+    });
+    return columnIndex >= 0 ? columnIndex + 1 : 0;
+  }
+  return 0;
+}
+function buildExpansionColSpec(columnwidth) {
+  const w = columnwidth || "50px";
+  return {
+    key: "row-expansion",
+    width: w,
+    style: { width: w }
+  };
+}
+export {
+  buildExpansionColSpec,
+  getExpansionColumnInsertIndex
+};

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,77 @@
+const calculateColspan = (group) => {
+  const countVisibleColumns = (items) => {
+    let count = 0;
+    items.forEach((item) => {
+      if ("isGroup" in item && item.isGroup) {
+        count += countVisibleColumns(item.columns);
+      } else {
+        const column = item;
+        if (column.show !== false) {
+          count++;
+        }
+      }
+    });
+    return count;
+  };
+  const colspan = countVisibleColumns(group.columns);
+  return colspan || 1;
+};
+const calculateMaxDepth = (structure) => {
+  let maxDepth = 1;
+  structure.forEach((item) => {
+    if ("isGroup" in item && item.isGroup) {
+      const groupDepth = 1 + calculateMaxDepth(item.columns);
+      maxDepth = Math.max(maxDepth, groupDepth);
+    }
+  });
+  return maxDepth;
+};
+const generateHeaderRows = (structure, maxDepth) => {
+  const headerRows = [];
+  for (let i = 0; i < maxDepth; i++) {
+    headerRows.push([]);
+  }
+  const processStructure = (items, currentLevel = 0) => {
+    items.forEach((item) => {
+      if ("isGroup" in item && item.isGroup) {
+        const groupItem = item;
+        const colspan = calculateColspan(groupItem);
+        headerRows[currentLevel].push({
+          isGroup: true,
+          field: groupItem.field,
+          displayName: groupItem.displayName || "",
+          colspan,
+          textAlignment: groupItem.textAlignment,
+          backgroundColor: groupItem.backgroundColor,
+          class: groupItem.class,
+          colClass: groupItem.colClass,
+          styles: groupItem.styles
+        });
+        processStructure(groupItem.columns, currentLevel + 1);
+      } else {
+        const column = item;
+        if (column.show !== false) {
+          const rowspan = maxDepth - currentLevel;
+          headerRows[currentLevel].push({
+            isGroup: false,
+            field: column.field || column.binding || "",
+            displayName: column.caption || column.displayName || "",
+            rowspan,
+            column
+          });
+        }
+      }
+    });
+  };
+  processStructure(structure);
+  return headerRows;
+};
+const hasTableGroups = (structure) => {
+  return structure.some((item) => "isGroup" in item && item.isGroup);
+};
+export {
+  calculateColspan,
+  calculateMaxDepth,
+  generateHeaderRows,
+  hasTableGroups
+};

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

@@ -0,0 +1,119 @@
+import React, { type CSSProperties } 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;
+/**
+ * Angular behavior: when a dataset is a non-array object (e.g. a REST API response
+ * like { users: [...], total: 100 }), return the first array-valued property as the
+ * actual row data.  If the value is already an array it is returned as-is; if no
+ * array property is found (e.g. a params snapshot) an empty array is returned.
+ */
+export declare const extractDataArray: (dataset: any) => any[];
+/**
+ * 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 { getWidgetMappingForType, getBooleanDataset } from "./widgetMapping";
+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;
+/** Resolve displayName from a React element, including memo/withBaseWrapper layers */
+export declare function getChildComponentDisplayName(child: any): string;
+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[];
+/** Resolve row-bound expansion props. Uses precomputed map first, then tableRowProps(rowData) fallback. */
+export declare const getRowExpansionConfig: (config: WmTableRowProps | null, rowId: string, rowData?: any) => WmTableRowProps | null;
+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;
+/**
+ * Angular datatable.js hides show:false columns via jQuery `.hide()` / `.show()`
+ * (sets element.style.display = "none"), not by removing th/td from the DOM.
+ * setColGroupWidths also hides the matching `<col>` ($headerCol.hide()).
+ */
+export declare function isColumnDomHidden(meta?: Record<string, unknown>): boolean;
+/** Angular setColGroupWidths: jQuery `.hide()` plus width 0 on col for table-layout:fixed. */
+export declare function getDomHiddenColStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
+/** Inline style for hidden th/td — display:none and zero box so flex sizing cannot leak width. */
+export declare function getDomHiddenCellStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
+export declare const getColClass: (colClass: string, rowData: any, columnName: string) => string;
+export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
+export { renderDisplayCell } from "./renderDisplayCell";
+export { buildSelectionColumns } from "./buildSelectionColumns";
+export { validateField, resetValidationState, updateValidationErrors } from "./validation";
+export { hasInteractiveClass, hasInteractiveAttributes, isInteractiveElement, getRowIdsFromDataset, rowExistsInDataset, selectionStateHelpers, } from "./selectionUtils";
+export { createRowIndexColumn, createDataColumn, createDataColumns, createEditingActionButtons, createDefaultColumnProps, getActionColumnSize, } from "./columnBuilder";
+export { isDataColumn, hasExplicitWidth, distributeColumnWidths } from "./columnWidthDistribution";
+export type { TableSearchFilter, FilterFieldObject, FilterFieldsObject, TableSortState, TableStateData, } from "./table-helpers";
+export { saveTableState, getTableState, clearTableState, convertFilterArrayToObject, convertFilterObjectToArray, } from "./table-helpers";