@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

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

@@ -10,6 +10,9 @@ var _exportNames = {
   getBooleanDataset: true,
   isColumnVisibleForViewport: true,
   parseTableColumns: true,
+  getAggregateFunctions: true,
+  parseTableStructureWithGroups: true,
+  flattenTableStructure: true,
   parseTableRowActions: true,
   parseTableActions: true,
   parseTableRowExpansion: true,
@@ -26,10 +29,12 @@ var _exportNames = {
   handleNewRowNavigation: true,
   INTERNAL_PROPERTIES: true,
   cleanRowData: true,
-  parseWidth: true
+  parseWidth: true,
+  getColClass: true
 };
-exports.validateEditingFields = exports.shouldShowPanelHeading = exports.shouldShowPagination = exports.parseWidth = exports.parseTableRowExpansion = exports.parseTableRowActions = exports.parseTableColumns = exports.parseTableActions = exports.isEditAction = exports.isDeleteAction = exports.isColumnVisibleForViewport = exports.isAddNewAction = exports.handleNewRowNavigation = exports.getWidgetMappingForType = exports.getTableActionButtonClass = exports.getSpacingClasses = exports.getButtonClasses = exports.getBooleanDataset = exports.getActionButtonClass = exports.cleanRowData = exports.addUniqueRowIds = exports.INTERNAL_PROPERTIES = void 0;
+exports.validateEditingFields = exports.shouldShowPanelHeading = exports.shouldShowPagination = exports.parseWidth = exports.parseTableStructureWithGroups = exports.parseTableRowExpansion = exports.parseTableRowActions = exports.parseTableColumns = exports.parseTableActions = exports.isEditAction = exports.isDeleteAction = exports.isColumnVisibleForViewport = exports.isAddNewAction = exports.handleNewRowNavigation = exports.getWidgetMappingForType = exports.getTableActionButtonClass = exports.getSpacingClasses = exports.getColClass = exports.getButtonClasses = exports.getBooleanDataset = exports.getAggregateFunctions = exports.getActionButtonClass = exports.flattenTableStructure = exports.cleanRowData = exports.addUniqueRowIds = exports.INTERNAL_PROPERTIES = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lodashEs = require("lodash-es");
@@ -174,17 +179,22 @@ var addUniqueRowIds = exports.addUniqueRowIds = function addUniqueRowIds(dataset
     if ((0, _typeof2["default"])(item) !== "object" || item === null || (0, _lodashEs.isArray)(item)) {
       return item;
     }
+    var getProperty = function getProperty(propName) {
+      return (0, _lodashEs.get)(item, propName);
+    };
 
     // Skip if the item already has a unique row ID
     if (item[idProperty]) {
-      return item;
+      return item.getProperty ? item : _objectSpread(_objectSpread({}, item), {}, {
+        getProperty: getProperty
+      });
     }
 
     // Generate a unique ID based on existing id field or create a deterministic hash
     var rowId = item.id || item.ID || item.Id || generateDeterministicHash(item, index);
 
-    // Use spread operator for objects to add the ID property
-    return _objectSpread(_objectSpread({}, item), {}, (0, _defineProperty2["default"])({}, idProperty, rowId));
+    // Use spread operator for objects to add the ID property and getProperty helper
+    return _objectSpread(_objectSpread({}, item), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, idProperty, rowId), "getProperty", getProperty));
   });
 };
 
@@ -266,14 +276,48 @@ var isColumnVisibleForViewport = exports.isColumnVisibleForViewport = function i
   }
   return true;
 };
+function transformExpression(exp) {
+  if (typeof exp === "string") {
+    // First replacing generic getProperty calls with rowData
+    // Matches patterns like: fragment.row?.getProperty?.("key") -> rowData['key']
+    var transformedExp = exp.replace(/(?:[\w$]+(?:\?\.|\.))*getProperty(?:\?\.)?\(\s*(['"])(.*?)\1\s*\)/g, function (_, quote, key) {
+      return "rowData['".concat(key, "']");
+    });
+
+    // Regex to split by string literals (double or single quoted)
+    var parts = transformedExp.split(/(".*?"|'.*?')/);
+    return parts.map(function (part) {
+      // If part is a string literal, return as is
+      if (part.startsWith('"') || part.startsWith("'")) {
+        return part;
+      }
+
+      // Replace identifiers that are not keywords
+      // Identifiers start with letter, _, or $
+      return part.replace(/\b([a-zA-Z_$][a-zA-Z0-9_$]*)\b/g, function (match) {
+        var keywords = ["true", "false", "null", "undefined", "NaN", "Infinity", "in", "instanceof", "typeof", "void", "new", "delete", "rowData" // Don't replace rowData if it's already there
+        ];
+        if (keywords.includes(match)) {
+          return match;
+        }
+        return "rowData['".concat(match, "']");
+      });
+    }).join("");
+  }
+  return exp;
+}
+
+// Table structure types for grouping
 
 // Children parsing utilities
-var parseTableColumns = exports.parseTableColumns = function parseTableColumns(children) {
+var parseTableColumns = exports.parseTableColumns = function parseTableColumns(children, dataset) {
   var columns = [];
   _react["default"].Children.forEach(children, function (child) {
     if (child && child.props && child.props.name && child.props.name.includes("wm_table_column")) {
       var props = (0, _lodashEs.get)(child, "props", {});
-      columns.push(_objectSpread({
+      var binding = (0, _lodashEs.get)(props, "binding");
+      var aggregate = getAggregateFunctions(dataset, binding);
+      columns.push(_objectSpread(_objectSpread({}, props), {}, {
         field: (0, _lodashEs.get)(props, "binding"),
         caption: (0, _lodashEs.get)(props, "caption"),
         displayName: (0, _lodashEs.get)(props, "caption"),
@@ -287,10 +331,105 @@ var parseTableColumns = exports.parseTableColumns = function parseTableColumns(c
         widgetType: (0, _lodashEs.get)(props, "widgetType", "label"),
         required: (0, _lodashEs.get)(props, "required") === true || (0, _lodashEs.get)(props, "required") === "true",
         defaultvalue: (0, _lodashEs.get)(props, "defaultvalue"),
-        disabled: (0, _lodashEs.get)(props, "disabled") === true || (0, _lodashEs.get)(props, "disabled") === "true",
+        disabled: transformExpression((0, _lodashEs.get)(props, "disabled")),
+        readonly: (0, _lodashEs.get)(props, "readonly") || (0, _lodashEs.get)(props, "readonly") === "true",
         placeholder: (0, _lodashEs.get)(props, "placeholder"),
-        sortby: (0, _lodashEs.get)(props, "sortby")
-      }, props));
+        sortby: (0, _lodashEs.get)(props, "sortby"),
+        aggregate: aggregate,
+        colClass: (0, _lodashEs.get)(props, "colClass")
+      }));
+    }
+  });
+  return columns;
+};
+var getAggregateFunctions = exports.getAggregateFunctions = function getAggregateFunctions(dataset, binding) {
+  function _getColumnData() {
+    return (0, _lodashEs.map)(dataset, binding);
+  }
+  var aggregate = {
+    sum: function sum() {
+      return (0, _lodashEs.sum)(_getColumnData());
+    },
+    average: function average() {
+      var precision = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
+      return (0, _lodashEs.round)((0, _lodashEs.mean)(_getColumnData()), precision);
+    },
+    count: function count() {
+      return _getColumnData().length;
+    },
+    minimum: function minimum() {
+      return (0, _lodashEs.min)(_getColumnData());
+    },
+    maximum: function maximum() {
+      return (0, _lodashEs.max)(_getColumnData());
+    },
+    percent: function percent(value) {
+      var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+      return (0, _lodashEs.round)((0, _lodashEs.sum)(_getColumnData()) / value * 100, precision);
+    }
+  };
+  return aggregate;
+};
+// Parse table structure with groups support
+var _parseTableStructureWithGroups = exports.parseTableStructureWithGroups = function parseTableStructureWithGroups(children) {
+  var structure = [];
+  _react["default"].Children.forEach(children, function (child) {
+    if (!child || !child.props) return;
+    var childName = (0, _lodashEs.get)(child, "props.name", "");
+
+    // Handle WmTableGroup
+    if (childName.includes("group")) {
+      var props = (0, _lodashEs.get)(child, "props", {});
+      var group = {
+        isGroup: true,
+        field: (0, _lodashEs.get)(props, "name", ""),
+        displayName: (0, _lodashEs.get)(props, "caption", ""),
+        textAlignment: (0, _lodashEs.get)(props, "textalignment"),
+        backgroundColor: (0, _lodashEs.get)(props, "backgroundcolor"),
+        "class": (0, _lodashEs.get)(props, "class"),
+        colClass: (0, _lodashEs.get)(props, "col-class"),
+        styles: (0, _lodashEs.get)(props, "styles"),
+        columns: _parseTableStructureWithGroups(child.props.children) // Recursive for nested groups
+      };
+      structure.push(group);
+    }
+    // Handle WmTableColumn
+    else if (childName.includes("wm_table_column")) {
+      var _props = (0, _lodashEs.get)(child, "props", {});
+      var column = _objectSpread({
+        field: (0, _lodashEs.get)(_props, "binding"),
+        caption: (0, _lodashEs.get)(_props, "caption"),
+        displayName: (0, _lodashEs.get)(_props, "caption"),
+        show: (0, _lodashEs.get)(_props, "show", true) !== false,
+        sortable: (0, _lodashEs.get)(_props, "sortable", true) !== false,
+        textalignment: (0, _lodashEs.get)(_props, "textalignment", "left"),
+        backgroundcolor: (0, _lodashEs.get)(_props, "backgroundcolor"),
+        textcolor: (0, _lodashEs.get)(_props, "textcolor"),
+        width: (0, _lodashEs.get)(_props, "width"),
+        editWidgetType: (0, _lodashEs.get)(_props, "editWidgetType", "WmText"),
+        widgetType: (0, _lodashEs.get)(_props, "widgetType", "label"),
+        required: (0, _lodashEs.get)(_props, "required") === true || (0, _lodashEs.get)(_props, "required") === "true",
+        defaultvalue: (0, _lodashEs.get)(_props, "defaultvalue"),
+        disabled: (0, _lodashEs.get)(_props, "disabled") === true || (0, _lodashEs.get)(_props, "disabled") === "true",
+        placeholder: (0, _lodashEs.get)(_props, "placeholder"),
+        sortby: (0, _lodashEs.get)(_props, "sortby")
+      }, _props);
+      structure.push(column);
+    }
+  });
+  return structure;
+};
+
+// Flatten hierarchical structure to get all columns
+var _flattenTableStructure = exports.flattenTableStructure = function flattenTableStructure(structure) {
+  var columns = [];
+  structure.forEach(function (item) {
+    if ("isGroup" in item && item.isGroup) {
+      // Recursively flatten groups
+      columns.push.apply(columns, (0, _toConsumableArray2["default"])(_flattenTableStructure(item.columns)));
+    } else {
+      // It's a column
+      columns.push(item);
     }
   });
   return columns;
@@ -337,8 +476,8 @@ var parseTableRowExpansion = exports.parseTableRowExpansion = function parseTabl
       var name = child.props.name;
       // Match names that start with "wm_table_row_" followed by a hash/id, but not "wm_table_row_action"
       if (name.startsWith("wm_table_row_") && !name.includes("_action")) {
-        var _props = (0, _lodashEs.get)(child, "props", {});
-        rowExpansionConfig = _props;
+        var _props2 = (0, _lodashEs.get)(child, "props", {});
+        rowExpansionConfig = _props2;
       }
     }
   });
@@ -360,10 +499,12 @@ var isAddNewAction = exports.isAddNewAction = function isAddNewAction(actionKey)
 var getActionButtonClass = exports.getActionButtonClass = function getActionButtonClass(action) {
   var actionKey = (0, _lodashEs.get)(action, "key") || (0, _lodashEs.get)(action, "name") || (0, _lodashEs.get)(action, "action");
   if (isEditAction(actionKey)) {
-    return "row-action row-action-button btn-transparent edit edit-row-button";
+    var updateRowClasses = (0, _lodashEs.get)(action, "className", "");
+    return "row-action row-action-button btn-transparent edit edit-row-button ".concat(updateRowClasses);
   }
   if (isDeleteAction(actionKey) || actionKey === "delete") {
-    return "row-action row-action-button btn-transparent delete delete-row-button ".concat(_constants.TABLE_CSS_CLASSES.deleteRow);
+    var deleteRowClasses = (0, _lodashEs.get)(action, "className", "");
+    return "row-action row-action-button btn-transparent delete delete-row-button ".concat(_constants.TABLE_CSS_CLASSES.deleteRow, " ").concat(deleteRowClasses);
   }
   return "row-action row-action-button ".concat((0, _lodashEs.get)(action, "className", "btn-transparent"));
 };
@@ -406,7 +547,7 @@ var validateEditingFields = exports.validateEditingFields = function validateEdi
     var inputs = fieldElement.querySelectorAll("input, select, textarea");
     (0, _lodashEs.forEach)(inputs, function (input) {
       // Check HTML5 validation
-      if (input && !input.validity.valid) {
+      if (input && !input.validity.valid && input.hasAttribute("required")) {
         invalidElements.push(input);
         isInvalid = true;
       }
@@ -515,9 +656,9 @@ var shouldShowPagination = exports.shouldShowPagination = function shouldShowPag
 
 // Panel structure utilities
 var shouldShowPanelHeading = exports.shouldShowPanelHeading = function shouldShowPanelHeading(title, subheading, iconclass) {
-  var exportOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var exportformat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   var headerActions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
-  return !(0, _lodashEs.isEmpty)(title) || !(0, _lodashEs.isEmpty)(subheading) || !(0, _lodashEs.isEmpty)(iconclass) || (0, _lodashEs.size)(exportOptions) > 0 || (0, _lodashEs.size)(headerActions) > 0;
+  return !(0, _lodashEs.isEmpty)(title) || !(0, _lodashEs.isEmpty)(subheading) || !(0, _lodashEs.isEmpty)(iconclass) || (0, _lodashEs.size)(exportformat) > 0 || (0, _lodashEs.size)(headerActions) > 0;
 };
 
 /**
@@ -554,9 +695,15 @@ var handleNewRowNavigation = exports.handleNewRowNavigation = function handleNew
 
 /**
  * List of internal properties that should be removed from row data
- * before passing to external handlers
+ * before passing to external handlers or form data
  */
-var INTERNAL_PROPERTIES = exports.INTERNAL_PROPERTIES = ["_wmTableRowId" // Internal row identifier
+var INTERNAL_PROPERTIES = exports.INTERNAL_PROPERTIES = ["_wmTableRowId",
+// Internal row identifier
+"getProperty",
+// Helper function to get property values
+"rowOperations",
+// Internal column for row action buttons
+"rowActions" // Internal row actions property
 ];
 
 /**
@@ -565,13 +712,13 @@ var INTERNAL_PROPERTIES = exports.INTERNAL_PROPERTIES = ["_wmTableRowId" // Inte
  * @param data The raw data - can be a single object, array of objects, or primitive
  * @returns The cleaned data without internal properties
  */
-var cleanRowData = exports.cleanRowData = function cleanRowData(data) {
+var _cleanRowData = exports.cleanRowData = function cleanRowData(data) {
   if (!data) return data;
 
   // For arrays, clean each item
   if ((0, _lodashEs.isArray)(data)) {
     return data.map(function (item) {
-      return cleanRowData(item);
+      return _cleanRowData(item);
     });
   }
 
@@ -603,5 +750,47 @@ var parseWidth = exports.parseWidth = function parseWidth(width) {
   }
   return columnSize;
 };
+var getColClass = exports.getColClass = function getColClass(colClass, rowData, columnName) {
+  // Return empty string if colClass is not provided or not a string
+  if (!colClass || typeof colClass !== "string") {
+    return "";
+  }
+
+  // Trim whitespace
+  var trimmedClass = (0, _lodashEs.trim)(colClass);
+  if (!trimmedClass) {
+    return "";
+  }
+  var hasExpressionOperators = /[?&|<>!=]/.test(trimmedClass) || trimmedClass.includes("(") || trimmedClass.includes("&&") || trimmedClass.includes("||") || trimmedClass.includes("===") || trimmedClass.includes("!==");
+  var hasRowDataReference = trimmedClass.includes("rowData");
+  var hasColumnNameReference = trimmedClass.includes("columnName");
+  var isExpression = hasExpressionOperators || hasRowDataReference || hasColumnNameReference;
+
+  // If it's not an expression, return as-is
+  if (!isExpression) {
+    return trimmedClass;
+  }
+
+  // Evaluate the expression using Function constructor
+  try {
+    var expressionToEvaluate = trimmedClass;
+    var evaluated = new Function("rowData", "columnName", "return ".concat(expressionToEvaluate))(rowData, columnName);
+
+    // Convert result to string (handles boolean, number, null, undefined)
+    if (evaluated === null || evaluated === undefined) {
+      return "";
+    }
+
+    // If it's a boolean, return empty string (falsy) or convert to string
+    if (typeof evaluated === "boolean") {
+      return evaluated ? String(evaluated) : "";
+    }
+    return String(evaluated);
+  } catch (error) {
+    console.warn("Failed to evaluate colClass expression:", trimmedClass, error);
+    // Return empty string on error to prevent breaking the UI
+    return "";
+  }
+};
 
 // Export utilities

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

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.renderDisplayCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _button = require("../../../form/button");
-var _index = require("../../../input/default/checkbox/index");
-var _label = require("../../../basic/label");
+var _button = require("@wavemaker/react-runtime/components/form/button");
+var _index = require("@wavemaker/react-runtime/components/input/default/checkbox/index");
+var _label = require("@wavemaker/react-runtime/components/basic/label");
 var _index2 = require("./index");
-var _anchor = require("../../../basic/anchor");
-var _icon = require("../../../basic/icon");
-var _picture = require("../../../basic/picture");
+var _anchor = require("@wavemaker/react-runtime/components/basic/anchor");
+var _icon = require("@wavemaker/react-runtime/components/basic/icon");
+var _picture = require("@wavemaker/react-runtime/components/basic/picture");
 var _lodashEs = require("lodash-es");
 var _hooks = require("../hooks");
 var __jsx = _react["default"].createElement;

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

@@ -111,56 +111,55 @@ var rowExistsInDataset = exports.rowExistsInDataset = function rowExistsInDatase
 };
 
 /**
- * Selection state management functions
+ * 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)
  */
 var selectionStateHelpers = exports.selectionStateHelpers = {
-  // Radio selection
-  setRadioSelection: function setRadioSelection(cellState, rowId) {
-    (0, _hooks.setSelectedRowId)(cellState, rowId);
+  // Get current selection (works for both modes)
+  getSelection: function getSelection(cellState) {
+    return (0, _hooks.getSelectedRowIds)(cellState);
   },
-  getRadioSelection: function getRadioSelection(cellState) {
-    return (0, _hooks.getSelectedRowId)(cellState);
+  // Set selection - replaces entire selection (for radio select)
+  setSelection: function setSelection(cellState, rowId) {
+    (0, _hooks.setSelectedRowIds)(cellState, [rowId]);
   },
-  // Multi selection
-  addToMultiSelection: function addToMultiSelection(cellState, rowId) {
+  // Add to selection (for multiselect)
+  addToSelection: function addToSelection(cellState, rowId) {
     var current = (0, _hooks.getSelectedRowIds)(cellState);
     if (!current.includes(rowId)) {
       (0, _hooks.setSelectedRowIds)(cellState, [].concat((0, _toConsumableArray2["default"])(current), [rowId]));
     }
   },
-  removeFromMultiSelection: function removeFromMultiSelection(cellState, rowId) {
+  // Remove from selection (for multiselect)
+  removeFromSelection: function removeFromSelection(cellState, rowId) {
     var current = (0, _hooks.getSelectedRowIds)(cellState);
     (0, _hooks.setSelectedRowIds)(cellState, current.filter(function (id) {
       return id !== rowId;
     }));
   },
-  toggleMultiSelection: function toggleMultiSelection(cellState, rowId) {
+  // Toggle selection (for multiselect - adds if not present, removes if present)
+  toggleSelection: function toggleSelection(cellState, rowId) {
     var current = (0, _hooks.getSelectedRowIds)(cellState);
     var isSelected = current.includes(rowId);
     if (isSelected) {
-      selectionStateHelpers.removeFromMultiSelection(cellState, rowId);
+      selectionStateHelpers.removeFromSelection(cellState, rowId);
     } else {
-      selectionStateHelpers.addToMultiSelection(cellState, rowId);
+      selectionStateHelpers.addToSelection(cellState, rowId);
     }
     return !isSelected;
   },
-  setAllMultiSelection: function setAllMultiSelection(cellState, rowIds) {
+  // Set all selections (for select all in multiselect)
+  setAllSelection: function setAllSelection(cellState, rowIds) {
     (0, _hooks.setSelectedRowIds)(cellState, rowIds);
   },
-  clearMultiSelection: function clearMultiSelection(cellState) {
+  // Clear all selections
+  clearSelection: function clearSelection(cellState) {
     (0, _hooks.setSelectedRowIds)(cellState, []);
   },
-  getMultiSelection: function getMultiSelection(cellState) {
-    return (0, _hooks.getSelectedRowIds)(cellState);
-  },
-  // Check selection
-  isRowSelected: function isRowSelected(cellState, rowId, useMultiSelect, useRadioSelect) {
-    if (useMultiSelect) {
-      return (0, _hooks.getSelectedRowIds)(cellState).includes(rowId);
-    } else {
-      // For radio select or default mode (when neither is explicitly enabled),
-      // check radio selection
-      return (0, _hooks.getSelectedRowId)(cellState) === rowId;
-    }
+  // Check if a row is selected
+  isRowSelected: function isRowSelected(cellState, rowId) {
+    return (0, _hooks.getSelectedRowIds)(cellState).includes(rowId);
   }
 };

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

@@ -16,6 +16,7 @@ var validateField = exports.validateField = function validateField(rowId, fieldN
   var fieldRefs = validationState.fieldRefs,
     fieldValidationErrors = validationState.fieldValidationErrors,
     cellUpdateCallbacks = validationState.cellUpdateCallbacks;
+  if (!(column !== null && column !== void 0 && column.required)) return true;
 
   // Check required validation
   if (column !== null && column !== void 0 && column.required && (value === undefined || value === null || value === "")) {

package/components/data/utils/filter-field-util.js

@@ -43,16 +43,16 @@ function interpolateBindExpressions(context, filterexpressions, callbackFn) {
   // No need for subscription since changes happen in-place
 }
 var processFilterExpBindNode = exports.processFilterExpBindNode = function processFilterExpBindNode(context, filterExpressions, variable) {
-  var traverseFilterExpressions = function traverseFilterExpressions(expressions) {
+  var _traverseFilterExpressions = function traverseFilterExpressions(expressions) {
     if (expressions.rules) {
       (0, _lodashEs.forEach)(expressions.rules, function (filExpObj, i) {
         if (filExpObj.rules) {
-          traverseFilterExpressions(filExpObj);
+          _traverseFilterExpressions(filExpObj);
         }
       });
     }
   };
-  traverseFilterExpressions(filterExpressions);
+  _traverseFilterExpressions(filterExpressions);
 
   // Return the mutated filterExpressions or nothing
   return filterExpressions;

package/components/dialogs/alert-dialog/index.js

@@ -18,7 +18,7 @@ var _dialogs = require("@wavemaker/react-runtime/components/dialogs");
 var _withDialogWrapper = _interopRequireDefault(require("../withDialogWrapper"));
 var _dialogBody = require("../dialog-body");
 var __jsx = _react["default"].createElement; // components
-var DEFAULT_CLASS = "";
+var DEFAULT_CLASS = "dialog-view";
 var WmConfirmDialog = function WmConfirmDialog(props) {
   var isopen = props.isopen,
     onClose = props.onClose,

package/components/dialogs/confirm-dialog/index.js

@@ -18,7 +18,7 @@ var _button = require("@wavemaker/react-runtime/components/form/button");
 var _dialogBody = require("@wavemaker/react-runtime/components/dialogs/dialog-body");
 var _withDialogWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/components/dialogs/withDialogWrapper"));
 var __jsx = _react["default"].createElement; // components
-var DEFAULT_CLASS = "app-dialog modal-dialog app-confirm-dialog";
+var DEFAULT_CLASS = "app-dialog modal-dialog app-confirm-dialog dialog-view";
 var WmConfirmDialog = function WmConfirmDialog(props) {
   var _props$oktext = props.oktext,
     oktext = _props$oktext === void 0 ? "OK" : _props$oktext,

package/components/dialogs/dialog/index.js

@@ -17,6 +17,8 @@ var _dialogContent = _interopRequireDefault(require("@wavemaker/react-runtime/co
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$modal = props.modal,
+    modal = _props$modal === void 0 ? true : _props$modal;
   var handleClose = function handleClose(event) {
     if (props.onClose) {
       props.onClose(event);
@@ -29,9 +31,10 @@ var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props)
     return null;
   }
   return __jsx(_dialogs["default"], (0, _extends2["default"])({}, props, {
+    modal: modal,
     open: props.isopen,
     onClose: handleClose,
-    className: (0, _clsx["default"])("app-dialog modal-dialog", props.className)
+    className: (0, _clsx["default"])("app-dialog modal-dialog  dialog-view", props.className)
   }), __jsx(_dialogContent["default"], props, props.dialogtype === "design-dialog" && props.showheader !== false && __jsx(_dialogHeader.WmDialogHeader, {
     name: "",
     listener: {},

package/components/dialogs/dialog-content/index.js

@@ -20,10 +20,12 @@ var WmDialogContent = exports.WmDialogContent = function WmDialogContent(_ref) {
     styles = _ref.styles;
   return __jsx(_DialogContent["default"], {
     className: DEFAULT_CLASS,
-    style: _objectSpread(_objectSpread(_objectSpread({}, styles), sheet && {
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), sheet && {
       borderRadius: 0
     }), (sheetposition === "top" || sheetposition === "bottom") && {
       width: "var(--wm-modal-full-screen-width)"
+    }), {}, {
+      flex: "none"
     })
   }, children);
 };

package/components/dialogs/dialog-header/index.js

@@ -83,9 +83,9 @@ var WmDialogHeader = exports.WmDialogHeader = function WmDialogHeader(props) {
     "aria-label": "Close ".concat(title ? title : "", " dialog"),
     onClick: onClose,
     title: dialogLocale.LABEL_CLOSE,
-    className: "app-dialog-close close"
+    className: "app-dialog-close close btn-text"
   }, isDialog ? __jsx(_material.Box, {
-    component: "i",
+    component: "span",
     className: "app-icon wi wi-clear",
     "aria-hidden": "true"
   }) : __jsx(_react["default"].Fragment, null)));

package/components/dialogs/iframe-dialog/index.js

@@ -20,7 +20,7 @@ var _withDialogWrapper = _interopRequireDefault(require("@wavemaker/react-runtim
 var _dialogBody = require("../dialog-body");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "app-dialog modal-dialog";
+var DEFAULT_CLASS = "app-dialog modal-dialog dialog-view";
 var WmIframeDialog = function WmIframeDialog(props) {
   var _props$closable = props.closable,
     closable = _props$closable === void 0 ? true : _props$closable,
@@ -45,6 +45,10 @@ var WmIframeDialog = function WmIframeDialog(props) {
     _props$encodeurl = props.encodeurl,
     encodeurl = _props$encodeurl === void 0 ? false : _props$encodeurl,
     hint = props.hint,
+    _props$width = props.width,
+    width = _props$width === void 0 ? "100%" : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? "400px" : _props$height,
     onClose = props.onClose,
     onOk = props.onOk;
   var handleClose = (0, _react.useCallback)(function (event) {
@@ -70,7 +74,9 @@ var WmIframeDialog = function WmIframeDialog(props) {
     "data-role": "iframe-dialog",
     "aria-labelledby": "iframe-dialog-".concat(title),
     "aria-describedby": "iframe-dialog-".concat(title, "-description")
-  }), __jsx(_dialogContent.WmDialogContent, {
+  }), __jsx("div", {
+    className: "app-alert-dialog app-dialog modal-dialog"
+  }, __jsx(_dialogContent.WmDialogContent, {
     name: "",
     listener: {}
   }, showheader && __jsx(_dialogHeader.WmDialogHeader, {
@@ -95,8 +101,8 @@ var WmIframeDialog = function WmIframeDialog(props) {
     listener: {},
     iframesrc: url,
     encodeurl: encodeurl,
-    width: props.width,
-    height: props.height,
+    width: width,
+    height: height,
     hint: hint
   })), showactions && __jsx(_dialogActions.WmDialogFooter, {
     name: "",
@@ -108,7 +114,7 @@ var WmIframeDialog = function WmIframeDialog(props) {
     className: "btn-primary ok-action",
     name: "",
     listener: {}
-  }))));
+  })))));
 };
 WmIframeDialog.displayName = "WmIframeDialog";
 var _default = exports["default"] = (0, _withDialogWrapper["default"])((0, _withBaseWrapper.withBaseWrapper)(WmIframeDialog));

package/components/dialogs/index.js

@@ -53,6 +53,7 @@ var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props)
     _props$modal = props.modal,
     modal = _props$modal === void 0 ? false : _props$modal,
     onTransitionEntered = props.onTransitionEntered;
+  useBodyScrollLock(open);
   var transitionType = FadeTransition;
   var pageRef = document.getElementsByClassName("app-page")[0] || null;
   var handleClose = function handleClose(event, reason) {
@@ -69,7 +70,6 @@ var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props)
   if (!open) {
     return null;
   }
-  useBodyScrollLock(open);
   var sheetPositionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.sheetposition === "top" && {
     position: "absolute",
     top: 0

package/components/dialogs/login-dialog/index.js

@@ -26,7 +26,7 @@ var __jsx = _react["default"].createElement;
 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; }
 // Constants
-var DEFAULT_CLASS = "app-dialog modal-dialog app-login-dialog";
+var DEFAULT_CLASS = "app-dialog modal-dialog app-login-dialog dialog-view";
 var FORM_SETUP_TIMEOUT = 100;
 var WmLoginDialog = function WmLoginDialog(props) {
   var _listener$Widgets;

package/components/dialogs/page-dialog/index.js

@@ -17,7 +17,7 @@ var _button = require("@wavemaker/react-runtime/components/form/button");
 var _dialogActions = require("@wavemaker/react-runtime/components/dialogs/dialog-actions");
 var _partialContainer = _interopRequireDefault(require("@wavemaker/react-runtime/components/page/partial-container"));
 var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "app-dialog modal-dialog app-page-dialog";
+var DEFAULT_CLASS = "app-dialog modal-dialog app-page-dialog dialog-view";
 var WmPageDialog = function WmPageDialog(props) {
   var _props$showactions = props.showactions,
     showactions = _props$showactions === void 0 ? true : _props$showactions,