@wavemaker-ai/react-runtime 1.0.0-rc.317 → 1.0.0-rc.322

package/components/data/form/form-field/props.d.ts

@@ -1,5 +1,6 @@
 import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
 export interface FormFieldProps {
+    name: string;
     /**
      * Whether the field is read-only.
      */
@@ -197,6 +198,13 @@ export interface FormFieldProps {
     formName: string;
     parentForm?: string;
     destroy?: (names: string[]) => void;
+    asyncValidators?: any[];
+    setValidators?: (validators: any[]) => void;
+    setAsyncValidators?: (asyncValidators: any[]) => void;
+    observe?: any[];
+    observeOn?: any[];
+    reset?: () => void;
+    setValidationMessage?: (message: string) => void;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

package/components/data/form/index.js

@@ -25,8 +25,21 @@ import WmFormHeader from "./form-header";
 import FormDynamicFieldsSection from "./form-dynamic-section";
 import { removeInvalidAttributes } from "../../../utils/attr";
 import withStandalone from "../../../higherOrder/withStandalone";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 const WmForm = (props) => {
   var _a, _b, _c, _d;
+  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmForm"]), {
+        className: props.className,
+        styles: props.styles
+      })
+    );
   const shouldHideHeader = props.isLayoutDialog || props.isInsideWizard;
   const shouldInjectDynamicFields = Array.isArray(props.metadata) && props.metadata.length > 0;
   return /* @__PURE__ */ jsxs(

package/components/data/list/index.d.ts

@@ -19,6 +19,7 @@ declare const WmListStandalone: React.ComponentType<{
     columnalign?: import("./props").IColumnAlignment;
     multiselect?: boolean;
     loadingdatamsg?: string;
+    skeletonRows?: number;
     loadingicon?: string;
     maxsize?: number;
     statehandler?: StorageType;
@@ -67,9 +68,12 @@ declare const WmListStandalone: React.ComponentType<{
     gap?: string;
     columngap?: string;
     standalone?: boolean;
+    layoutWidth?: string;
+    layoutHeight?: string;
     hidden?: boolean;
     prefabName?: string;
     key?: string;
+    loading?: boolean;
     name?: string;
     id?: string;
     children?: React.ReactNode;
@@ -110,6 +114,7 @@ declare const WmListStandalone: React.ComponentType<{
     outbound?: Record<string, any>;
     formfield?: boolean;
     updateon?: string;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmListStandalone as WmList };
 /**
@@ -171,5 +176,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/list/index.js

@@ -34,6 +34,11 @@ import { useWidgetProxy } from "../../../context/WidgetProvider";
 import { InlineNavigation } from "../pagination/components";
 import { NoDataMessage, useDragAndDrop } from "./components";
 import { AppSpinner } from "../../common";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import {
   useListData,
   useListState,
@@ -68,6 +73,7 @@ import { DataSource } from "../types";
 import isEqual from "lodash-es/isEqual";
 import { filterAutoLayoutClasses } from "../../../utils/style-utils";
 import withStandalone from "../../../higherOrder/withStandalone";
+import { useLayoutSize } from "../../../hooks/useLayoutSize";
 const WmList = (props) => {
   var _a, _b, _c, _d, _e;
   const {
@@ -155,6 +161,7 @@ const WmList = (props) => {
   } = props;
   const datasetHashRef = useRef([]);
   const [currentDataset, setCurrentDataset] = useState(null);
+  const ListWrapperRef = useRef(null);
   const Widgets = useWidgetProxy(void 0, standalone);
   const widgetInstance = Widgets[name];
   const effectiveStateHandlerForSubscription = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
@@ -458,6 +465,7 @@ const WmList = (props) => {
       }
     })();
   }, [datasource]);
+  useLayoutSize(ListWrapperRef, props.layoutWidth, props.layoutHeight);
   const showHorizontalScrollSentinel = showNavigation && navigation === LIST_NAVIGATION_TYPES.SCROLL && (direction === LIST_DIRECTION.HORIZONTAL || direction === "row");
   const hostAutoLayoutPrefixes = ["pos-", ...INSETION_POSITION, "zi-", "w-", "h-"];
   const wrapper_autoLayout_Classes = useMemo(
@@ -482,6 +490,15 @@ const WmList = (props) => {
     }),
     [direction, wrap, alignment, gap, columngap]
   );
+  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmList"]), {
+        rows: props.skeletonRows,
+        className,
+        styles
+      })
+    );
   return /* @__PURE__ */ jsxs(
     Box,
     __spreadProps(__spreadValues({
@@ -496,6 +513,7 @@ const WmList = (props) => {
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
+      ref: ListWrapperRef,
       children: [
         /* @__PURE__ */ jsx(ListHeader, { title, subheading, iconclass }),
         /* @__PURE__ */ jsx(AppSpinner, { show: (_e = datasource == null ? void 0 : datasource.loading) != null ? _e : false, spinnermessages: [loadingdatamsg] }),

package/components/data/list/props.d.ts

@@ -107,6 +107,11 @@ export interface ListProps<T = ListItemData> {
      * Message to display while loading data.
      */
     loadingdatamsg?: string;
+    /**
+     * Number of skeleton list items shown while loading.
+     * @default 5
+     */
+    skeletonRows?: number;
     /**
      * CSS class for the loading icon.
      */
@@ -285,6 +290,8 @@ export interface ListProps<T = ListItemData> {
      * Whether this is a standalone list.
      */
     standalone?: boolean;
+    layoutWidth?: string;
+    layoutHeight?: string;
 }
 /**
  * Props specific to the WmListItem component.

package/components/data/table/components/RowCells.js

@@ -58,12 +58,15 @@ const RowCells = memo(
       const columnId = ((_b = cell == null ? void 0 : cell.column) == null ? void 0 : _b.id) || ((_c = cell == null ? void 0 : cell.column.columnDef) == null ? void 0 : _c.accessorKey) || "";
       const colClass = getColClass(colClassExpression, rowData, columnId);
       const customRender = customExpressionColumns == null ? void 0 : customExpressionColumns[columnId];
+      const hasCustomCellContent = !!customRender;
+      const cellValue = cell.getValue();
+      const cellTitle = hasCustomCellContent ? void 0 : cellValue != null && cellValue !== "" ? String(cellValue) : "";
       return /* @__PURE__ */ jsxs(Fragment2, { children: [
         hasExpansion && cellIndex === expansionInsertIndex && renderExpansionCell(rowId, rowData),
         /* @__PURE__ */ jsx(
           TableCell,
           {
-            title: cell.getValue() ? String(cell.getValue()) : "",
+            title: cellTitle,
             role: "cell",
             tabIndex: 0,
             "data-col-id": cellIndex,

package/components/data/table/hooks/useDynamicColumns.js

@@ -19,12 +19,14 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useMemo } from "react";
 import { generateColumnsFromData, isValidDataForColumns } from "../utils/dynamic-columns";
+import { getChildComponentDisplayName } from "../utils";
 const hasTableColumnsInChildren = (children) => {
   let found = false;
   React.Children.forEach(children, (child) => {
     if (!(child == null ? void 0 : child.props)) return;
     const name = child.props.name || "";
-    if (name.includes("wm_table_column") || name.includes("col_")) {
+    const displayName = getChildComponentDisplayName(child);
+    if (name.includes("wm_table_column") || name.includes("col_") || displayName.includes("WmTableColumn")) {
       found = true;
     } else if (name.includes("group")) {
       if (hasTableColumnsInChildren(child.props.children)) {

package/components/data/table/hooks/useResponsiveColumns.d.ts

@@ -81,4 +81,6 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }[];

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

@@ -53,6 +53,8 @@ declare const WmTableStandalone: React.ComponentType<{
     errormessage?: string;
     nodatamessage?: string;
     loadingdatamsg?: string;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     insertmessage?: string;
     updatemessage?: string;
     deletemessage?: string;
@@ -137,6 +139,8 @@ declare const WmTableStandalone: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmTableStandalone as WmTable };
 declare const WmTable: React.ComponentType<{
@@ -190,6 +194,8 @@ declare const WmTable: React.ComponentType<{
     errormessage?: string;
     nodatamessage?: string;
     loadingdatamsg?: string;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     insertmessage?: string;
     updatemessage?: string;
     deletemessage?: string;
@@ -274,6 +280,8 @@ declare const WmTable: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 /**
  * The WmTable component is used to display data in a tabular format.

package/components/data/table/index.js

@@ -39,6 +39,11 @@ import React, {
   useState,
   useRef
 } from "react";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import {
   useReactTable,
   getCoreRowModel,
@@ -1659,6 +1664,16 @@ const WmTableComponent = memo(
 );
 WmTableComponent.displayName = "WmTableComponent";
 const WmTableWithProvider = (props) => {
+  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTable"]), {
+        rows: props.skeletonRows,
+        columns: props.skeletonColumns,
+        className: props.className,
+        styles: props.styles
+      })
+    );
   return /* @__PURE__ */ jsx(EditedRowsProvider, { children: /* @__PURE__ */ jsx(WmTableComponent, __spreadValues({}, props)) });
 };
 WmTableWithProvider.displayName = "WmTable";

package/components/data/table/live-table/index.d.ts

@@ -71,5 +71,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/table/props.d.ts

@@ -230,6 +230,16 @@ export interface TableProps {
      * Message to display while loading data.
      */
     loadingdatamsg?: string;
+    /**
+     * Number of skeleton body rows shown while loading.
+     * @default 5
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton columns shown while loading.
+     * @default 4
+     */
+    skeletonColumns?: number;
     /**
      * Message to display after successful record insertion.
      */

package/components/data/table/table-action/index.d.ts

@@ -61,5 +61,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/table/table-column/index.d.ts

@@ -61,5 +61,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/table/table-row/index.d.ts

@@ -61,5 +61,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/table/table-row-action/index.d.ts

@@ -65,5 +65,7 @@ export declare const WmTableRowAction: React.FC<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default WmTableRowAction;

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

@@ -38,6 +38,8 @@ export interface TableGroup {
     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[];

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

@@ -186,6 +186,16 @@ function transformExpression(exp) {
   }
   return exp;
 }
+function getChildComponentDisplayName(child) {
+  if (!(child == null ? void 0 : child.type)) return "";
+  const type = child.type;
+  const name = type.displayName || type.name || "";
+  const inner = type.type || type.render;
+  if (inner) {
+    return inner.displayName || inner.name || name;
+  }
+  return name;
+}
 const parseTableColumns = (children, dataset) => {
   const columns = [];
   React.Children.forEach(children, (child) => {
@@ -249,6 +259,7 @@ const parseTableStructureWithGroups = (children) => {
   React.Children.forEach(children, (child) => {
     if (!child || !child.props) return;
     const childName = get(child, "props.name", "");
+    const displayName = getChildComponentDisplayName(child);
     if (childName.includes("group")) {
       const props = get(child, "props", {});
       const group = {
@@ -264,7 +275,7 @@ const parseTableStructureWithGroups = (children) => {
         // Recursive for nested groups
       };
       structure.push(group);
-    } else if (childName.includes("wm_table_column") || childName.includes("col_")) {
+    } else if (childName.includes("wm_table_column") || childName.includes("col_") || (displayName == null ? void 0 : displayName.includes("WmTableColumn"))) {
       const props = get(child, "props", {});
       const column = __spreadValues({
         field: get(props, "binding"),
@@ -303,7 +314,8 @@ const flattenTableStructure = (structure) => {
 const parseTableRowActions = (children) => {
   const actions = [];
   React.Children.forEach(children, (child) => {
-    if (child && child.props && child.props.name && child.props.name.includes("wm_table_row_action")) {
+    var _a;
+    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_row_action") || ((_a = child.type) == null ? void 0 : _a.displayName) === "WmTableRowAction")) {
       const props = get(child, "props", {});
       const actionProps = assign({}, props);
       if (child.key) {
@@ -317,7 +329,8 @@ const parseTableRowActions = (children) => {
 const parseTableActions = (children) => {
   const actions = [];
   React.Children.forEach(children, (child) => {
-    if (child && child.props && child.props.name && child.props.name.includes("wm_table_action")) {
+    var _a;
+    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_action") || ((_a = child.type) == null ? void 0 : _a.displayName) === "WmTableAction")) {
       const props = get(child, "props", {});
       const actionProps = assign({}, props);
       if (child.key) {
@@ -658,6 +671,7 @@ export {
   getAggregateFunctions,
   getBooleanDataset,
   getButtonClasses,
+  getChildComponentDisplayName,
   getColClass,
   getRowIdsFromDataset,
   getSpacingClasses,

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

@@ -69,6 +69,8 @@ declare const WmAlertDialogStandalone: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("../withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -152,6 +154,8 @@ declare const _default: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("../withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -70,6 +70,8 @@ declare const WmConfirmDialogStandalone: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -154,6 +156,8 @@ declare const _default: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -74,6 +74,8 @@ declare const WmDialogStandalone: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -164,6 +166,8 @@ declare const _default: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -63,5 +63,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -62,5 +62,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -65,5 +65,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -80,5 +80,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -79,6 +79,8 @@ declare const WmIframeDialogStandalone: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -172,6 +174,8 @@ declare const _default: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -76,6 +76,8 @@ declare const WmLoginDialogStandalone: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("../withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -157,6 +159,8 @@ declare const _default: {
         updateon?: string;
         dataset?: any;
         prefabName?: string;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("../withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -71,6 +71,8 @@ declare const WmPageDialogStandalone: {
         formfield?: boolean;
         updateon?: string;
         dataset?: any;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -156,6 +158,8 @@ declare const _default: {
         formfield?: boolean;
         updateon?: string;
         dataset?: any;
+        loading?: boolean;
+        showSkeleton?: boolean;
     } & import("@wavemaker-ai/react-runtime/components/dialogs/withDialogWrapper").BaseDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -73,5 +73,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/form/button/index.js

@@ -37,6 +37,11 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Badge from "@mui/material/Badge";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import { prefixPrefabResourceUrl } from "../../../utils/resource-url";
 import { removeInvalidAttributes } from "../../../utils/attr";
 const DEFAULT_CLASS = "btn app-button";
@@ -174,6 +179,8 @@ const WmButton = memo(
       }
     };
     const EVENTS = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, onBlur && { onBlur: handleOnBlur }), onFocus && { onFocus: handleOnFocus }), onMouseEnter && { onMouseEnter: handleMouseEnter }), onMouseLeave && { onMouseLeave: handleMouseLeave }), onDoubleClick && { onDoubleClick: handleDoubleClick }), onKeydown && { onKeyDown: handleKeyDown }), onKeyup && { onKeyUp: handleKeyUp }), onClick && { onClick: handleClick }), onKeypress && { onKeyPress: handleKeyPress }), { onMouseDown: handleMouseDown });
+    if (shouldShowSkeleton(props.loading, props.showSkeleton))
+      return /* @__PURE__ */ jsx(WmSkeleton, __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmButton"]), { className, styles }));
     return /* @__PURE__ */ jsxs(
       Button,
       __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
@@ -293,7 +300,9 @@ const WmButton = memo(
       "onClick",
       "show",
       "styles",
-      "className"
+      "className",
+      "loading",
+      "showSkeleton"
     ];
     return keys.every((key) => prev[key] === current[key]);
   }

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

@@ -65,5 +65,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/input/calendar/index.d.ts

@@ -66,6 +66,8 @@ export declare const WmCalendar: React.ForwardRefExoticComponent<Omit<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * The WmCalendar component provides an interactive calendar with event support, day/week/month views.
@@ -126,5 +128,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/input/calendar/index.js

@@ -137,13 +137,14 @@ const WmCalendar = forwardRef((props, ref) => {
   }, [calendartype, controls]);
   const invokeCallback = useCallback(
     (eventName, eventData) => {
+      var _a2;
       const { $start, $end, $view, $data, $event, $newData, $oldData, $delta, $revertFunc, $ui } = eventData;
       switch (eventName) {
         case "select":
           onSelect == null ? void 0 : onSelect($start, $end, $view, $data);
           break;
         case "beforerender":
-          onBeforerender == null ? void 0 : onBeforerender(eventData, listener == null ? void 0 : listener.Widgets[name]);
+          onBeforerender == null ? void 0 : onBeforerender(eventData, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
           break;
         case "eventdrop":
           onEventdrop == null ? void 0 : onEventdrop($event, $newData, $oldData, $delta, $revertFunc, $ui, $view);

package/components/input/chips/index.d.ts

@@ -99,6 +99,8 @@ declare const WmChipsStandalone: React.ComponentType<import("../../data/form/for
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmChipsStandalone as WmChips };
 /**
@@ -220,5 +222,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;