@wavemaker-ai/react-runtime 1.0.0-rc.647684 → 12.0.0-rc.335

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

@@ -0,0 +1,76 @@
+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 { cloneDeep } from "lodash-es";
+const isColumnValidatable = (column) => {
+  if (!column || !column.field) return false;
+  if (column.readonly) return false;
+  if (column.show === false) return false;
+  return true;
+};
+const cloneValidators = (validators) => Array.isArray(validators) ? cloneDeep(validators) : [];
+const storeColumnValidators = (registry, field, kind, validators) => {
+  const current = registry[field] || { validators: [], asyncValidators: [] };
+  registry[field] = __spreadProps(__spreadValues({}, current), { [kind]: cloneValidators(validators) });
+};
+const NATIVE_VALIDITY_FLAGS = [
+  "badInput",
+  "typeMismatch",
+  "stepMismatch",
+  "rangeOverflow",
+  "rangeUnderflow",
+  "tooLong",
+  "tooShort"
+];
+const hasNativeError = (input) => !input.validity.valid && NATIVE_VALIDITY_FLAGS.some((flag) => input.validity[flag]);
+const collectNativeValidityErrors = (cellElements, rowId) => {
+  const errors = [];
+  const prefix = `${rowId}_`;
+  for (const [fieldKey, element] of Object.entries(cellElements)) {
+    if (!element || !fieldKey.startsWith(prefix)) continue;
+    const fieldName = element.getAttribute("data-field-name") || fieldKey.slice(prefix.length);
+    const inputs = Array.from(element.querySelectorAll("input, select, textarea"));
+    const invalid = inputs.find(
+      (input) => !input.disabled && !("readOnly" in input && input.readOnly) && hasNativeError(input)
+    );
+    if (invalid) {
+      errors.push({ fieldName, message: invalid.validationMessage || "Value is not valid" });
+    }
+  }
+  return errors;
+};
+const focusFirstInvalidCell = (cellElements, rowId, invalidFieldNames) => {
+  var _a;
+  for (const fieldName of invalidFieldNames) {
+    const target = (_a = cellElements[`${rowId}_${fieldName}`]) == null ? void 0 : _a.querySelector(
+      "[focus-target], input, textarea, select"
+    );
+    if (target) {
+      target.focus();
+      return;
+    }
+  }
+};
+export {
+  cloneValidators,
+  collectNativeValidityErrors,
+  focusFirstInvalidCell,
+  isColumnValidatable,
+  storeColumnValidators
+};

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

@@ -44,5 +44,7 @@ export declare const TABLE_MESSAGES: {
 export declare const INTERACTIVE_CLASSES: readonly ["MuiInputBase", "MuiSelect", "MuiButton", "MuiCheckbox", "MuiRadio", "MuiSlider", "MuiSwitch", "MuiTextField", "MuiAutocomplete", "MuiChip", "MuiRating", "MuiToggleButton", "MuiPickersDay", "MuiDatePicker", "MuiTimePicker", "MuiDateTimePicker", "MuiCalendarPicker", "MuiClockPicker", "MuiColorPicker", "MuiFormControl", "MuiFormGroup", "MuiFormControlLabel", "app-text", "app-textarea", "app-checkbox", "app-slider", "app-currency", "app-switch", "app-select", "app-checkboxset", "app-radioset", "app-date", "app-time", "app-timestamp", "app-rating", "app-datetime", "app-search", "app-chips", "app-colorpicker", "app-calendar", "app-editor"];
 export declare const INTERACTIVE_ROLES: readonly ["button", "textbox", "combobox", "listbox"];
 export declare const INTERACTIVE_DATA_ROLES: readonly ["input", "select", "date", "time", "color", "editor", "checkbox", "radio", "slider", "chips", "rating"];
+/** data-role values on the table selection column. Clicks here must not count as interactive widgets. */
+export declare const SELECTION_COLUMN_DATA_ROLES: readonly ["select-all", "select-row"];
 export declare const INTERACTIVE_TAG_NAMES: readonly ["INPUT", "BUTTON", "SELECT", "TEXTAREA", "A", "LABEL"];
 export declare const UNSUPPORTED_STATE_PERSISTENCE_TYPES: readonly string[];

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

@@ -104,6 +104,7 @@ const INTERACTIVE_DATA_ROLES = [
   "chips",
   "rating"
 ];
+const SELECTION_COLUMN_DATA_ROLES = ["select-all", "select-row"];
 const INTERACTIVE_TAG_NAMES = [
   "INPUT",
   "BUTTON",
@@ -122,6 +123,7 @@ export {
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_ROLES,
   INTERACTIVE_TAG_NAMES,
+  SELECTION_COLUMN_DATA_ROLES,
   TABLE_CSS_CLASSES,
   TABLE_DATA_STATES,
   TABLE_MESSAGES,

package/components/data/table/utils/crud-handlers.js

@@ -23,6 +23,7 @@ import findIndex from "lodash-es/findIndex";
 import slice from "lodash-es/slice";
 import forEach from "lodash-es/forEach";
 import some from "lodash-es/some";
+import { addUniqueRowIds } from "./index";
 import { DataSource } from "../../types";
 const getDatasourceInfo = async (datasource) => {
   var _a, _b;
@@ -56,7 +57,8 @@ const createCompleteRecord = (editingData, wmTableColumns, serverResponse) => {
       completeRecord[column.field] = (_b = (_a = editingData[column.field]) != null ? _a : column.defaultvalue) != null ? _b : "";
     }
   });
-  return __spreadProps(__spreadValues(__spreadValues({}, completeRecord), serverResponse), { _wmTableRowId: uniqueId("new_row_") });
+  const record = __spreadProps(__spreadValues(__spreadValues({}, completeRecord), serverResponse), { _wmTableRowId: uniqueId("new_row_") });
+  return addUniqueRowIds([record])[0];
 };
 const hasValidData = (record) => some(record, (value) => value !== void 0 && value !== null && value !== "");
 const updateDataset = (isNewRow, rowId, editingData, wmTableColumns, serverResponse, options) => {

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

@@ -47,7 +47,7 @@ function buildExpansionColSpec(columnwidth) {
   return {
     key: "row-expansion",
     width: w,
-    style: { width: w }
+    style: { width: w, minWidth: w, maxWidth: w }
   };
 }
 export {

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

@@ -1,5 +1,5 @@
 import React, { type CSSProperties } from "react";
-import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps, ValidationResult } from "../props";
+import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps } 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;
@@ -51,9 +51,16 @@ export declare const parseTableActions: (children: React.ReactNode) => WmTableAc
 export declare const getRowExpansionConfig: (config: WmTableRowProps | null, rowId: string, rowData?: any) => WmTableRowProps | null;
 /**
  * Whether the expansion column should be reserved in the table layout.
- * When tableRowProps gates show per row (e.g. hierarchy children.length), hide the
- * column entirely if no current row would show an expand control — avoids empty
- * row-expansion-cell spacers for leaf-only datasets.
+ *
+ * This is a STRUCTURAL check, matching Angular's datatable: the row-expansion
+ * column is part of the table layout whenever a row-expansion config exists and
+ * is not statically disabled. Per-row `show` (e.g. a hierarchy `children.length`
+ * gate via `tableRowProps`) only controls whether the toggle *button* renders
+ * inside the cell — see RowExpansionButton — never whether the column exists.
+ *
+ * Collapsing the column when no current row happens to be expandable would
+ * desynchronise header/body/colgroup cell counts and shift every data column by
+ * one for leaf-only datasets (e.g. nested child tables in a hierarchy).
  */
 export declare const isRowExpansionVisible: (config: WmTableRowProps | null | undefined, dataset: any[] | undefined) => boolean;
 export declare const parseTableRowExpansion: (children: React.ReactNode) => WmTableRowProps | null;
@@ -62,15 +69,6 @@ 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, }: {
@@ -116,10 +114,11 @@ export declare function getDomHiddenColStyle(meta?: Record<string, unknown>): CS
 /** 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 { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, SELECTION_COLUMN_DATA_ROLES, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
 export { renderDisplayCell } from "./renderDisplayCell";
 export { buildSelectionColumns } from "./buildSelectionColumns";
-export { validateField, resetValidationState, updateValidationErrors } from "./validation";
+export { cloneValidators, collectNativeValidityErrors, focusFirstInvalidCell, isColumnValidatable, } from "./columnValidation";
+export type { ColumnValidatorRegistry, NativeValidityError } from "./columnValidation";
 export { hasInteractiveClass, hasInteractiveAttributes, isInteractiveElement, getRowIdsFromDataset, rowExistsInDataset, selectionStateHelpers, } from "./selectionUtils";
 export { createRowIndexColumn, createDataColumn, createDataColumns, createEditingActionButtons, createDefaultColumnProps, getActionColumnSize, } from "./columnBuilder";
 export { isDataColumn, hasExplicitWidth, distributeColumnWidths } from "./columnWidthDistribution";

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

@@ -18,15 +18,12 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
-  forEach,
-  entries,
   size,
   isEmpty,
   isArray,
   map,
   get,
   trim,
-  startsWith,
   findIndex,
   assign,
   floor,
@@ -369,12 +366,7 @@ const isRowExpansionVisible = (config, dataset) => {
   if (!config) return false;
   if (typeof config.tableRowProps === "function") {
     if (!Array.isArray(dataset) || dataset.length === 0) return false;
-    return dataset.some((row) => {
-      var _a;
-      const overrides = ((_a = config.tableRowProps) == null ? void 0 : _a.call(config, row)) || {};
-      const show = overrides.show !== void 0 ? overrides.show : config.show;
-      return show !== false;
-    });
+    return true;
   }
   return config.show !== false;
 };
@@ -414,74 +406,6 @@ const getActionButtonClass = (action) => {
 const getTableActionButtonClass = (action) => {
   return `btn ${get(action, "className", "btn-primary")} ${isAddNewAction(get(action, "key")) ? "add-action" : ""}`;
 };
-const validateEditingFields = (fieldRefs, editingRowId) => {
-  const invalidElements = [];
-  const invalidFieldKeys = [];
-  const shouldValidateField = (fieldKey) => {
-    if (!editingRowId) return true;
-    return startsWith(fieldKey, `${editingRowId}_`);
-  };
-  forEach(entries(fieldRefs), ([fieldKey, fieldElement]) => {
-    if (!shouldValidateField(fieldKey) || !fieldElement) {
-      return;
-    }
-    let isInvalid = false;
-    const inputs = fieldElement.querySelectorAll("input, select, textarea");
-    forEach(inputs, (input) => {
-      if (input && !input.validity.valid && input.hasAttribute("required")) {
-        invalidElements.push(input);
-        isInvalid = true;
-      }
-      if (input && input.classList.contains("ng-invalid")) {
-        invalidElements.push(input);
-        isInvalid = true;
-      }
-      if (input && input.hasAttribute("required") && !trim(input.value)) {
-        invalidElements.push(input);
-        isInvalid = true;
-      }
-    });
-    if (fieldElement.hasAttribute("required")) {
-      const inputEl = fieldElement.querySelector("input, textarea, select");
-      if (inputEl && !trim(inputEl.value)) {
-        invalidElements.push(inputEl);
-        isInvalid = true;
-      }
-    }
-    if (isInvalid) {
-      invalidFieldKeys.push(fieldKey);
-    }
-  });
-  if (size(invalidElements) > 0) {
-    const logPrefix = editingRowId ? `[${editingRowId}]` : "[Validation]";
-    console.log(`${logPrefix} Validation failed: Found ${size(invalidElements)} invalid elements`);
-    const firstInvalidElement = get(invalidElements, "[0]");
-    if (firstInvalidElement) {
-      const cell = firstInvalidElement.closest("td, .app-datagrid-cell, .form-field");
-      if (cell) {
-        const focusTarget = cell.querySelector(
-          "[focus-target], input, textarea, select"
-        );
-        if (focusTarget) {
-          setTimeout(() => {
-            focusTarget.focus();
-            console.log(`${logPrefix} Focused first invalid field:`, focusTarget);
-          }, 0);
-        }
-      } else {
-        setTimeout(() => {
-          firstInvalidElement.focus();
-        }, 0);
-      }
-    }
-  }
-  return {
-    isValid: isEmpty(invalidElements),
-    invalidElements,
-    invalidFieldKeys,
-    firstInvalidElement: size(invalidElements) > 0 ? get(invalidElements, "[0]") : void 0
-  };
-};
 const getButtonClasses = (action, spacing = "normal", isGridEditMode = false, isLoading = false) => {
   const baseClass = `btn ${get(action, "className", "btn-primary")} ${isAddNewAction(get(action, "key")) ? "add-action" : ""}`;
   const spacingClass = spacing === "condensed" ? "btn-sm" : "";
@@ -504,9 +428,11 @@ const shouldShowPagination = ({
   datasource,
   showrecordcount = false
 }) => {
-  var _a;
+  var _a, _b, _c;
   if (!shownavigation) return false;
-  if (((_a = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _a.totalElements) > 0) return true;
+  const hasRecords = size(internalDataset) > 0 || ((_a = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _a.totalElements) > 0 || Boolean((_b = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _b.next);
+  if (!hasRecords) return false;
+  if (((_c = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _c.totalElements) > pagesize) return true;
   if (allowpagesizechange) return true;
   if (showrecordcount) return true;
   return onDemandLoad || size(internalDataset) > pagesize;
@@ -662,11 +588,17 @@ import {
   INTERACTIVE_ROLES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_TAG_NAMES,
+  SELECTION_COLUMN_DATA_ROLES,
   UNSUPPORTED_STATE_PERSISTENCE_TYPES
 } from "./constants";
 import { renderDisplayCell } from "./renderDisplayCell";
 import { buildSelectionColumns } from "./buildSelectionColumns";
-import { validateField, resetValidationState, updateValidationErrors } from "./validation";
+import {
+  cloneValidators,
+  collectNativeValidityErrors,
+  focusFirstInvalidCell,
+  isColumnValidatable
+} from "./columnValidation";
 import {
   hasInteractiveClass,
   hasInteractiveAttributes,
@@ -697,6 +629,7 @@ export {
   INTERACTIVE_ROLES,
   INTERACTIVE_TAG_NAMES,
   INTERNAL_PROPERTIES,
+  SELECTION_COLUMN_DATA_ROLES,
   TABLE_CSS_CLASSES2 as TABLE_CSS_CLASSES,
   TABLE_DATA_STATES,
   TABLE_MESSAGES,
@@ -705,6 +638,8 @@ export {
   buildSelectionColumns,
   cleanRowData,
   clearTableState,
+  cloneValidators,
+  collectNativeValidityErrors,
   convertFilterArrayToObject,
   convertFilterObjectToArray,
   createDataColumn,
@@ -715,6 +650,7 @@ export {
   distributeColumnWidths,
   extractDataArray,
   flattenTableStructure,
+  focusFirstInvalidCell,
   getActionButtonClass,
   getActionColumnSize,
   getAggregateFunctions,
@@ -736,6 +672,7 @@ export {
   hasInteractiveClass,
   isAddNewAction,
   isColumnDomHidden,
+  isColumnValidatable,
   isColumnVisibleForViewport,
   isDataColumn,
   isDeleteAction,
@@ -749,13 +686,9 @@ export {
   parseTableStructureWithGroups,
   parseWidth,
   renderDisplayCell,
-  resetValidationState,
   rowExistsInDataset,
   saveTableState,
   selectionStateHelpers,
   shouldShowPagination,
-  shouldShowPanelHeading,
-  updateValidationErrors,
-  validateEditingFields,
-  validateField
+  shouldShowPanelHeading
 };

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

@@ -7,6 +7,18 @@ export declare const hasInteractiveClass: (element: HTMLElement) => boolean;
  * Check if an element has interactive attributes
  */
 export declare const hasInteractiveAttributes: (element: HTMLElement) => boolean;
+/** The name datatable.js and the React table use for a row's multiselect checkbox. */
+export declare const MULTI_SELECT_INPUT_NAME = "gridMultiSelect";
+/**
+ * True when the clicked row's selection checkbox has been renamed away from
+ * `gridMultiSelect`.
+ *
+ * Mirrors the Angular datatable, whose toggleRowSelection only ever acts on
+ * `input[name="gridMultiSelect"]`, so application code that renames the input
+ * (e.g. to "gridMultiSelectDisable") opts that row out of click selection.
+ * Rows without a selection checkbox are never treated as renamed.
+ */
+export declare const isSelectionCheckboxRenamed: (event: React.MouseEvent) => boolean;
 /**
  * Check if element or its ancestors are interactive
  */

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

@@ -3,7 +3,8 @@ import {
   INTERACTIVE_CLASSES,
   INTERACTIVE_ROLES,
   INTERACTIVE_DATA_ROLES,
-  INTERACTIVE_TAG_NAMES
+  INTERACTIVE_TAG_NAMES,
+  SELECTION_COLUMN_DATA_ROLES
 } from "./constants";
 const hasInteractiveClass = (element) => {
   if (!element.className || typeof element.className !== "string") return false;
@@ -24,23 +25,38 @@ const hasInteractiveAttributes = (element) => {
     return true;
   }
   const dataRole = element.getAttribute("data-role");
+  if (dataRole && SELECTION_COLUMN_DATA_ROLES.includes(dataRole)) {
+    return false;
+  }
   if (dataRole) {
     for (const interactiveRole of INTERACTIVE_DATA_ROLES) {
-      if (dataRole.includes(interactiveRole)) {
+      if (dataRole === interactiveRole) {
         return true;
       }
     }
   }
   return false;
 };
+const MULTI_SELECT_INPUT_NAME = "gridMultiSelect";
+const isSelectionCheckboxRenamed = (event) => {
+  var _a, _b;
+  const target = event == null ? void 0 : event.target;
+  const row = (_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, "tr");
+  const checkbox = (_b = row == null ? void 0 : row.querySelector) == null ? void 0 : _b.call(row, 'input[type="checkbox"]');
+  return !!checkbox && checkbox.getAttribute("name") !== MULTI_SELECT_INPUT_NAME;
+};
+const isSelectionColumnTarget = (target) => {
+  if (!(target == null ? void 0 : target.closest)) return false;
+  return SELECTION_COLUMN_DATA_ROLES.some((role) => target.closest(`[data-role="${role}"]`));
+};
 const isInteractiveElement = (event) => {
   const target = event.target;
-  if (INTERACTIVE_TAG_NAMES.includes(target.tagName)) {
-    return true;
+  if (isSelectionColumnTarget(target)) {
+    return false;
   }
   let element = target;
   while (element) {
-    if (hasInteractiveClass(element) || hasInteractiveAttributes(element)) {
+    if (INTERACTIVE_TAG_NAMES.includes(element.tagName) || hasInteractiveClass(element) || hasInteractiveAttributes(element)) {
       return true;
     }
     element = element.parentElement;
@@ -126,12 +142,14 @@ const selectionStateHelpers = {
   }
 };
 export {
+  MULTI_SELECT_INPUT_NAME,
   createSelectionEventStub,
   getRowIdsFromDataset,
   getWidgetForCallback,
   hasInteractiveAttributes,
   hasInteractiveClass,
   isInteractiveElement,
+  isSelectionCheckboxRenamed,
   rowExistsInDataset,
   selectionStateHelpers,
   toNativeEvent

package/components/dialogs/alert-dialog/index.d.ts

@@ -29,6 +29,7 @@ declare const WmAlertDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -115,6 +116,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/confirm-dialog/index.d.ts

@@ -30,6 +30,7 @@ declare const WmConfirmDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -117,6 +118,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog/index.d.ts

@@ -34,6 +34,7 @@ declare const WmDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: import("react").CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -127,6 +128,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: import("react").CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog-actions/index.d.ts

@@ -24,6 +24,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog-body/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog-content/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog-header/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/iframe-dialog/index.d.ts

@@ -39,6 +39,7 @@ declare const WmIframeDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -135,6 +136,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/login-dialog/index.d.ts

@@ -38,6 +38,7 @@ declare const WmLoginDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -123,6 +124,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/page-dialog/index.d.ts

@@ -33,6 +33,7 @@ declare const WmPageDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -122,6 +123,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/withDialogWrapper.js

@@ -30,8 +30,9 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useMemo, useRef } from "react";
+import { useCallback, useState, useEffect, useMemo, useRef, useContext } from "react";
 import DialogService from "../../core/dialog.service";
+import { PopoverContext } from "../../context/PopoverContext";
 const BaseDialog = (Component) => {
   const WrappedComponent = (props) => {
     const _a = props, {
@@ -52,6 +53,8 @@ const BaseDialog = (Component) => {
       "appLocale"
     ]);
     const [dialogOpen, setDialogOpen] = useState(!!isopen);
+    const popoverContext = useContext(PopoverContext);
+    const wasDialogOpenRef = useRef(!!isopen);
     const appLocaleMessages = useMemo(
       () => {
         var _a2;
@@ -65,15 +68,22 @@ const BaseDialog = (Component) => {
       setDialogOpen(!!isopen);
       isDialogOpenRef.current = !!isopen;
     }, [isopen]);
+    useEffect(() => {
+      if (wasDialogOpenRef.current && !dialogOpen) {
+        popoverContext == null ? void 0 : popoverContext.onDialogClose();
+      }
+      wasDialogOpenRef.current = dialogOpen;
+    }, [dialogOpen, popoverContext]);
     const handleTransitionEntered = useCallback(() => {
       if (onOpened) {
         onOpened();
       }
     }, [onOpened]);
     const handleOpen = useCallback(() => {
+      popoverContext == null ? void 0 : popoverContext.closeForDialog();
       setDialogOpen(true);
       isDialogOpenRef.current = true;
-    }, []);
+    }, [popoverContext]);
     const handleClose = useCallback(
       (event) => {
         if (isDialogOpenRef.current) {

package/components/form/button/index.d.ts

@@ -34,6 +34,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/form/button-group/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];