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

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { WmTableColumnProps, CellStateReturn } from "../props";
+/**
+ * Renders a table cell based on the widget-type property of the column
+ * @param column - The column configuration
+ * @param rowData - The row data object
+ * @param listener - Optional event listener
+ * @param cellState - Optional cell state manager
+ * @returns React element for the cell content
+ */
+export declare const renderDisplayCell: (column: WmTableColumnProps, rowData: any, listener?: any, cellState?: CellStateReturn) => React.ReactElement;

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

@@ -0,0 +1,141 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx } from "react/jsx-runtime";
+import React from "react";
+import { WmButton } from "../../../form/button";
+import { WmCheckbox } from "../../../input/default/checkbox/index";
+import { WmLabel } from "../../../basic/label";
+import { getWidgetMappingForType } from "./widgetMapping";
+import { WmAnchor } from "../../../basic/anchor";
+import { WmIcon } from "../../../basic/icon";
+import { WmPicture } from "../../../basic/picture";
+import { get, toString, isUndefined, noop } from "lodash-es";
+import {
+  getCellValue as getCellStateValue,
+  setCellValue as setCellStateValue
+} from "../hooks/useCellState";
+const extractCellProps = (column, rowData) => {
+  const fieldName = toString(get(column, "field", ""));
+  const value = get(rowData, fieldName, "");
+  const childProps = React.isValidElement(column.children) ? get(column.children, "props", {}) : {};
+  return {
+    fieldName,
+    value,
+    caption: get(childProps, "caption", value),
+    className: get(childProps, "className", ""),
+    iconclass: get(childProps, "iconclass", ""),
+    onClick: get(childProps, "onClick", noop)
+  };
+};
+const createBaseProps = (fieldName, suffix, className, listener) => ({
+  name: `${fieldName}_${suffix}`,
+  className,
+  listener
+});
+const widgetRenderers = {
+  WmButton: ({ column, rowData, listener }) => {
+    const { fieldName, caption, className, iconclass, onClick } = extractCellProps(column, rowData);
+    const value = rowData[fieldName] || caption;
+    return /* @__PURE__ */ jsx(
+      WmButton,
+      __spreadProps(__spreadValues({}, createBaseProps(fieldName, "button", className, listener)), {
+        iconclass,
+        caption: value || "Button",
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onClick(rowData);
+        }
+      })
+    );
+  },
+  WmCheckbox: ({ column, rowData, listener, cellState }) => {
+    const { fieldName, value, className } = extractCellProps(column, rowData);
+    const rowId = rowData._wmTableRowId || String(rowData.id) || "";
+    const checkboxValue = cellState ? getCellStateValue(cellState, rowId, fieldName, !!value) : !!value;
+    return /* @__PURE__ */ jsx(
+      WmCheckbox,
+      __spreadProps(__spreadValues({}, createBaseProps(fieldName, "checkbox", className, listener)), {
+        datavalue: checkboxValue,
+        onChange: (event, widget, newValue) => {
+          if (cellState) {
+            setCellStateValue(cellState, rowId, fieldName, newValue);
+          }
+        }
+      })
+    );
+  },
+  WmAnchor: ({ column, rowData, listener }) => {
+    const { fieldName, className, caption } = extractCellProps(column, rowData);
+    const href = get(rowData, column.field);
+    return /* @__PURE__ */ jsx(
+      WmAnchor,
+      __spreadProps(__spreadValues({}, createBaseProps(fieldName, "anchor", className, listener)), {
+        hyperlink: href || "",
+        caption: caption || href
+      })
+    );
+  },
+  WmIcon: ({ column, rowData, listener }) => {
+    const { fieldName, value, className } = extractCellProps(column, rowData);
+    return /* @__PURE__ */ jsx(
+      WmIcon,
+      __spreadProps(__spreadValues({}, createBaseProps(fieldName, "icon", className, listener)), {
+        iconclass: !isUndefined(value) ? toString(value) : "",
+        caption: !isUndefined(value) ? toString(value) : "Icon"
+      })
+    );
+  },
+  WmPicture: ({ column, rowData, listener }) => {
+    const { fieldName, value, caption, className } = extractCellProps(column, rowData);
+    return /* @__PURE__ */ jsx(
+      WmPicture,
+      __spreadProps(__spreadValues({}, createBaseProps(fieldName, "picture", className, listener)), {
+        picturesource: !isUndefined(value) ? toString(value) : "",
+        alttext: caption || "Image alt text not provided"
+      })
+    );
+  },
+  WmLabel: ({ column, rowData, listener }) => {
+    const { fieldName, value, className } = extractCellProps(column, rowData);
+    return /* @__PURE__ */ jsx(
+      WmLabel,
+      __spreadProps(__spreadValues({}, createBaseProps(fieldName, "label", className, listener)), {
+        caption: !isUndefined(value) ? toString(value) : "Label",
+        type: "p"
+      })
+    );
+  },
+  // Special renderer for dynamic columns - renders raw text like Angular
+  "dynamic-text": ({ column, rowData }) => {
+    const fieldName = toString(get(column, "field", ""));
+    const value = get(rowData, fieldName, "");
+    return /* @__PURE__ */ jsx(Fragment, { children: !isUndefined(value) ? toString(value) : "" });
+  }
+};
+const renderDisplayCell = (column, rowData, listener, cellState) => {
+  const widgetType = get(column, "widgetType", "label");
+  const mappedWidgetType = column.field ? getWidgetMappingForType(widgetType) : "dynamic-text";
+  const renderer = get(widgetRenderers, mappedWidgetType) || widgetRenderers.WmLabel;
+  return renderer({ column, rowData, listener, cellState });
+};
+export {
+  renderDisplayCell
+};

package/components/data/table/utils/script-page-size-broadcast.d.ts

@@ -0,0 +1,2 @@
+export declare function subscribeToScriptPageSizeBroadcast(name: string, storageKey: string, onUpdate: (value: number) => void): () => void;
+export declare function broadcastScriptPageSize(name: string, callerStorageKey: string, value: number): void;

package/components/data/table/utils/script-page-size-broadcast.js

@@ -0,0 +1,33 @@
+const listenersByTableName = /* @__PURE__ */ new Map();
+function subscribeToScriptPageSizeBroadcast(name, storageKey, onUpdate) {
+  const key = name;
+  if (!listenersByTableName.has(key)) {
+    listenersByTableName.set(key, /* @__PURE__ */ new Set());
+  }
+  const entry = {
+    storageKey,
+    cb: (value, callerStorageKey) => {
+      if (callerStorageKey !== storageKey) {
+        onUpdate(value);
+      }
+    }
+  };
+  const listeners = listenersByTableName.get(name);
+  if (listeners) {
+    listeners.add(entry);
+  }
+  return () => {
+    var _a;
+    (_a = listenersByTableName.get(key)) == null ? void 0 : _a.delete(entry);
+  };
+}
+function broadcastScriptPageSize(name, callerStorageKey, value) {
+  const entries = listenersByTableName.get(name);
+  if (entries) {
+    entries.forEach(({ cb }) => cb(value, callerStorageKey));
+  }
+}
+export {
+  broadcastScriptPageSize,
+  subscribeToScriptPageSizeBroadcast
+};

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

@@ -0,0 +1,37 @@
+import { CellStateReturn } from "../props";
+/**
+ * Check if an element has any of the interactive classes
+ */
+export declare const hasInteractiveClass: (element: HTMLElement) => boolean;
+/**
+ * Check if an element has interactive attributes
+ */
+export declare const hasInteractiveAttributes: (element: HTMLElement) => boolean;
+/**
+ * Check if element or its ancestors are interactive
+ */
+export declare const isInteractiveElement: (event: React.MouseEvent) => boolean;
+/**
+ * Get row IDs from dataset
+ */
+export declare const getRowIdsFromDataset: (dataset: any[]) => string[];
+/**
+ * Check if a row exists in dataset
+ */
+export declare const rowExistsInDataset: (rowId: string, dataset: any[]) => boolean;
+/**
+ * Unified selection state management functions
+ * Uses a single selectedRowIds array for both radio and multiselect modes:
+ * - Radio select: array contains at most 1 item (replaces on new selection)
+ * - Multiselect: array can contain multiple items (add/remove on selection)
+ */
+export declare const selectionStateHelpers: {
+    getSelection: (cellState: CellStateReturn) => string[];
+    setSelection: (cellState: CellStateReturn, rowId: string) => void;
+    addToSelection: (cellState: CellStateReturn, rowId: string) => void;
+    removeFromSelection: (cellState: CellStateReturn, rowId: string) => void;
+    toggleSelection: (cellState: CellStateReturn, rowId: string) => boolean;
+    setAllSelection: (cellState: CellStateReturn, rowIds: string[]) => void;
+    clearSelection: (cellState: CellStateReturn) => void;
+    isRowSelected: (cellState: CellStateReturn, rowId: string) => boolean;
+};

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

@@ -0,0 +1,111 @@
+import { getSelectedRowIds, setSelectedRowIds } from "../hooks/useCellState";
+import {
+  INTERACTIVE_CLASSES,
+  INTERACTIVE_ROLES,
+  INTERACTIVE_DATA_ROLES,
+  INTERACTIVE_TAG_NAMES
+} from "./constants";
+const hasInteractiveClass = (element) => {
+  if (!element.className || typeof element.className !== "string") return false;
+  const className = element.className;
+  for (const interactiveClass of INTERACTIVE_CLASSES) {
+    if (className.includes(interactiveClass)) {
+      return true;
+    }
+  }
+  return false;
+};
+const hasInteractiveAttributes = (element) => {
+  if (element.getAttribute("contenteditable") === "true") {
+    return true;
+  }
+  const role = element.getAttribute("role");
+  if (role && INTERACTIVE_ROLES.includes(role)) {
+    return true;
+  }
+  const dataRole = element.getAttribute("data-role");
+  if (dataRole) {
+    for (const interactiveRole of INTERACTIVE_DATA_ROLES) {
+      if (dataRole.includes(interactiveRole)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const isInteractiveElement = (event) => {
+  const target = event.target;
+  if (INTERACTIVE_TAG_NAMES.includes(target.tagName)) {
+    return true;
+  }
+  let element = target;
+  while (element) {
+    if (hasInteractiveClass(element) || hasInteractiveAttributes(element)) {
+      return true;
+    }
+    element = element.parentElement;
+  }
+  return false;
+};
+const getRowIdsFromDataset = (dataset) => {
+  return dataset.map((row) => row._wmTableRowId || String(row.id));
+};
+const rowExistsInDataset = (rowId, dataset) => {
+  return dataset.some((row) => row._wmTableRowId === rowId || String(row.id) === rowId);
+};
+const selectionStateHelpers = {
+  // Get current selection (works for both modes)
+  getSelection: (cellState) => {
+    return getSelectedRowIds(cellState);
+  },
+  // Set selection - replaces entire selection (for radio select)
+  setSelection: (cellState, rowId) => {
+    setSelectedRowIds(cellState, [rowId]);
+  },
+  // Add to selection (for multiselect)
+  addToSelection: (cellState, rowId) => {
+    const current = getSelectedRowIds(cellState);
+    if (!current.includes(rowId)) {
+      setSelectedRowIds(cellState, [...current, rowId]);
+    }
+  },
+  // Remove from selection (for multiselect)
+  removeFromSelection: (cellState, rowId) => {
+    const current = getSelectedRowIds(cellState);
+    setSelectedRowIds(
+      cellState,
+      current.filter((id) => id !== rowId)
+    );
+  },
+  // Toggle selection (for multiselect - adds if not present, removes if present)
+  toggleSelection: (cellState, rowId) => {
+    const current = getSelectedRowIds(cellState);
+    const isSelected = current.includes(rowId);
+    if (isSelected) {
+      selectionStateHelpers.removeFromSelection(cellState, rowId);
+    } else {
+      selectionStateHelpers.addToSelection(cellState, rowId);
+    }
+    return !isSelected;
+  },
+  // Set all selections (for select all in multiselect)
+  setAllSelection: (cellState, rowIds) => {
+    setSelectedRowIds(cellState, rowIds);
+  },
+  // Clear all selections
+  clearSelection: (cellState) => {
+    setSelectedRowIds(cellState, []);
+  },
+  // Check if a row is selected
+  isRowSelected: (cellState, rowId) => {
+    return getSelectedRowIds(cellState).includes(rowId);
+  }
+};
+export {
+  getRowIdsFromDataset,
+  hasInteractiveAttributes,
+  hasInteractiveClass,
+  isInteractiveElement,
+  rowExistsInDataset,
+  selectionStateHelpers
+};

package/components/data/table/utils/table-helpers.d.ts

@@ -0,0 +1,62 @@
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+export interface TableSearchFilter {
+    field: string;
+    value: string | number | boolean | null | undefined;
+    matchMode: string;
+    type: string;
+}
+export interface FilterFieldObject {
+    value: string | number | boolean | null | undefined;
+    logicalOp: string;
+    matchMode: string;
+    type?: string;
+}
+export type FilterFieldsObject = Record<string, FilterFieldObject>;
+export interface TableSortState {
+    field: string;
+    direction: "asc" | "desc";
+}
+export interface TableStateData {
+    pagination: number;
+    pagesize?: number;
+    actualpagesize?: number;
+    selectedItem: Array<{
+        page: number;
+        index: number;
+    }>;
+    search?: TableSearchFilter[];
+    sort?: TableSortState;
+}
+/**
+ * Save table state
+ * @param name - Table widget name
+ * @param storage - Storage type (session/local)
+ * @param stateToSave - State object to save
+ */
+export declare const saveTableState: (name: string, storage: StorageType, stateToSave: Partial<TableStateData>) => void;
+/**
+ * Get table state from storage
+ * @param name - Table widget name
+ * @param storage - Storage type (session/local)
+ * @returns Table state data or null
+ */
+export declare const getTableState: (name: string, storage: StorageType) => TableStateData | null;
+/**
+ * Clear table state from storage
+ * @param name - Table widget name
+ * @param storage - Storage type (session/local)
+ */
+export declare const clearTableState: (name: string, storage: StorageType) => void;
+/**
+ * Convert filter array format to object format for datasource.invoke
+ * @param filterArray - Array of TableSearchFilter items
+ * @param defaultLogicalOp - Default logical operator (default: 'AND')
+ * @returns FilterFieldsObject for datasource
+ */
+export declare const convertFilterArrayToObject: (filterArray: TableSearchFilter[], defaultLogicalOp?: string) => FilterFieldsObject;
+/**
+ * Convert filter object format to array format for internal state
+ * @param filterObject - FilterFieldsObject from datasource
+ * @returns Array of TableSearchFilter items
+ */
+export declare const convertFilterObjectToArray: (filterObject: FilterFieldsObject) => TableSearchFilter[];

package/components/data/table/utils/table-helpers.js

@@ -0,0 +1,64 @@
+import {
+  clearWidgetState,
+  getWidgetState,
+  setWidgetState
+} from "../../../../utils/state-persistance";
+import { forEach } from "lodash-es";
+const saveTableState = (name, storage, stateToSave) => {
+  setWidgetState(
+    {
+      name,
+      type: "table",
+      storage
+    },
+    stateToSave
+  );
+};
+const getTableState = (name, storage) => {
+  const state = getWidgetState({
+    name,
+    type: "table",
+    storage
+  });
+  return state;
+};
+const clearTableState = (name, storage) => {
+  clearWidgetState({
+    name,
+    storage,
+    type: "table"
+  });
+};
+const convertFilterArrayToObject = (filterArray, defaultLogicalOp = "AND") => {
+  const filterObject = {};
+  forEach(filterArray, (filter) => {
+    if (filter.field) {
+      filterObject[filter.field] = {
+        value: filter.value,
+        logicalOp: defaultLogicalOp,
+        matchMode: filter.matchMode || "anywhereignorecase",
+        type: filter.type
+      };
+    }
+  });
+  return filterObject;
+};
+const convertFilterObjectToArray = (filterObject) => {
+  const filterArray = [];
+  forEach(filterObject, (filter, field) => {
+    filterArray.push({
+      field,
+      value: filter.value,
+      matchMode: filter.matchMode || "anywhereignorecase",
+      type: filter.type || "string"
+    });
+  });
+  return filterArray;
+};
+export {
+  clearTableState,
+  convertFilterArrayToObject,
+  convertFilterObjectToArray,
+  getTableState,
+  saveTableState
+};

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

@@ -0,0 +1,13 @@
+import { WmTableColumnProps, FieldValidationState } from "../props";
+/**
+ * Validates a single field and updates validation state
+ */
+export declare const validateField: (rowId: string, fieldName: string, value: any, column: WmTableColumnProps | undefined, validationState: FieldValidationState) => boolean;
+/**
+ * Resets validation state for specific context
+ */
+export declare const resetValidationState: (context: "editing" | "new-row" | "all" | undefined, editingRowId: string | null, validationState: FieldValidationState) => void;
+/**
+ * Updates validation errors for fields based on validation results
+ */
+export declare const updateValidationErrors: (validationResult: any, relevantFieldRefs: Record<string, HTMLElement | null>, validationState: FieldValidationState) => void;

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

@@ -0,0 +1,82 @@
+import { forEach, entries, keys } from "lodash-es";
+const validateField = (rowId, fieldName, value, column, validationState) => {
+  var _a, _b, _c, _d, _e, _f;
+  const fieldKey = `${rowId}_${fieldName}`;
+  const { fieldRefs, fieldValidationErrors, cellUpdateCallbacks } = validationState;
+  if (!(column == null ? void 0 : column.required)) return true;
+  if ((column == null ? void 0 : column.required) && (value === void 0 || value === null || value === "")) {
+    fieldValidationErrors.current[fieldKey] = true;
+    (_b = (_a = cellUpdateCallbacks.current)[fieldKey]) == null ? void 0 : _b.call(_a);
+    return false;
+  }
+  const fieldElement = fieldRefs.current[fieldKey];
+  if (fieldElement) {
+    const input = fieldElement.querySelector("input, textarea, select");
+    if (input && !input.validity.valid) {
+      fieldValidationErrors.current[fieldKey] = true;
+      (_d = (_c = cellUpdateCallbacks.current)[fieldKey]) == null ? void 0 : _d.call(_c);
+      return false;
+    }
+  }
+  fieldValidationErrors.current[fieldKey] = false;
+  (_f = (_e = cellUpdateCallbacks.current)[fieldKey]) == null ? void 0 : _f.call(_e);
+  return true;
+};
+const resetValidationState = (context, editingRowId, validationState) => {
+  const { fieldRefs, fieldValidationErrors, cellUpdateCallbacks } = validationState;
+  if (context === "editing" && editingRowId) {
+    forEach(keys(fieldRefs.current), (key) => {
+      if (key.startsWith(`${editingRowId}_`)) {
+        delete fieldRefs.current[key];
+        delete fieldValidationErrors.current[key];
+        delete cellUpdateCallbacks.current[key];
+      }
+    });
+  } else if (context === "new-row") {
+    forEach(keys(fieldRefs.current), (key) => {
+      if (key.startsWith("new-row_")) {
+        delete fieldRefs.current[key];
+        delete fieldValidationErrors.current[key];
+        delete cellUpdateCallbacks.current[key];
+      }
+    });
+  } else {
+    forEach(keys(fieldRefs.current), (key) => {
+      delete fieldRefs.current[key];
+    });
+    fieldValidationErrors.current = {};
+    cellUpdateCallbacks.current = {};
+  }
+};
+const updateValidationErrors = (validationResult, relevantFieldRefs, validationState) => {
+  const { fieldValidationErrors, cellUpdateCallbacks } = validationState;
+  const errors = {};
+  forEach(keys(relevantFieldRefs), (fieldKey) => {
+    errors[fieldKey] = false;
+  });
+  if (validationResult.invalidFieldKeys && validationResult.invalidFieldKeys.length > 0) {
+    forEach(validationResult.invalidFieldKeys, (fieldKey) => {
+      errors[fieldKey] = true;
+    });
+  } else {
+    validationResult.invalidElements.forEach((invalidElement) => {
+      forEach(entries(relevantFieldRefs), ([fieldKey, fieldElement]) => {
+        if (fieldElement === invalidElement || (fieldElement == null ? void 0 : fieldElement.contains(invalidElement))) {
+          errors[fieldKey] = true;
+        }
+      });
+    });
+  }
+  forEach(entries(errors), ([fieldKey, hasError]) => {
+    var _a, _b;
+    if (fieldValidationErrors.current[fieldKey] !== hasError) {
+      fieldValidationErrors.current[fieldKey] = hasError;
+      (_b = (_a = cellUpdateCallbacks.current)[fieldKey]) == null ? void 0 : _b.call(_a);
+    }
+  });
+};
+export {
+  resetValidationState,
+  updateValidationErrors,
+  validateField
+};

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

@@ -0,0 +1,5 @@
+export declare const getWidgetMappingForType: (widgetType: string) => string;
+export declare const getBooleanDataset: () => {
+    key: boolean;
+    value: string;
+}[];

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

@@ -0,0 +1,41 @@
+const getWidgetMappingForType = (widgetType) => {
+  const widgetMappings = {
+    text: "WmText",
+    password: "WmPassword",
+    textarea: "WmTextarea",
+    number: "WmNumber",
+    checkbox: "WmCheckbox",
+    toggle: "WmToggle",
+    switch: "WmSwitch",
+    slider: "WmSlider",
+    richtext: "WmRichtext",
+    richtexteditor: "WmRichtexteditor",
+    currency: "WmCurrency",
+    select: "WmSelect",
+    checkboxset: "WmCheckboxset",
+    radioset: "WmRadioset",
+    date: "WmDate",
+    time: "WmTime",
+    timestamp: "WmTimestamp",
+    datetime: "WmDatetime",
+    rating: "WmRating",
+    autocomplete: "WmAutocomplete",
+    chips: "WmChips",
+    colorpicker: "WmColorpicker",
+    upload: "WmFileupload",
+    label: "WmLabel",
+    button: "WmButton",
+    icon: "WmIcon",
+    image: "WmPicture",
+    anchor: "WmAnchor"
+  };
+  return widgetMappings[widgetType] || widgetType;
+};
+const getBooleanDataset = () => [
+  { key: true, value: "Yes" },
+  { key: false, value: "No" }
+];
+export {
+  getBooleanDataset,
+  getWidgetMappingForType
+};