@wavemaker-ai/react-runtime 1.0.0-rc.647469 → 1.0.0-rc.647499

package/components/data/card/card-content/index.js

@@ -5,34 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmCardContent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
 var _material = require("@mui/material");
 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; }
 var WmCardContent = exports.WmCardContent = function WmCardContent(props) {
   var content = props.content,
     children = props.children,
     className = props.className,
     styles = props.styles;
   return __jsx(_material.CardContent, {
-    className: "app-card-content card-body card-block ".concat(className || ""),
-    sx: {
-      padding: "0",
-      margin: "0",
-      backgroundColor: "transparent",
-      "&:last-child": {
-        paddingBottom: "0"
-      }
-    }
+    className: (0, _clsx["default"])("app-card-content", "card-body", "card-block", "wm-card-content-root", className)
   }, content && __jsx("div", {
     dangerouslySetInnerHTML: {
       __html: content
     }
   }), __jsx(_material.Box, {
-    style: _objectSpread({}, styles)
+    style: styles
   }, props.renderPartial ? props.renderPartial(props, props.onLoad) : children));
 };
 

package/components/data/card/card-footer/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/card/card-footer/index.js

@@ -5,20 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmCardFooter = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
 var _material = require("@mui/material");
 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; }
 var WmCardFooter = exports.WmCardFooter = function WmCardFooter(props) {
   var children = props.children,
     className = props.className,
     styles = props.styles;
   return __jsx(_material.Box, {
-    className: "app-card-footer text-muted card-footer ".concat(className || ""),
-    style: _objectSpread({}, styles)
+    className: (0, _clsx["default"])("app-card-footer", "text-muted", "card-footer", className),
+    style: styles
   }, children);
 };
 

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

@@ -62,6 +62,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/card/index.js

@@ -160,9 +160,7 @@ var WmCard = exports.WmCard = function WmCard(props) {
         alt: "",
         width: 40,
         height: 40,
-        style: {
-          borderRadius: "50%"
-        }
+        className: "wm-card-avatar-img"
       }));
     }
     return null;
@@ -207,14 +205,9 @@ var WmCard = exports.WmCard = function WmCard(props) {
   });
   return __jsx(_material.Card, cardProps, showHeader && __jsx(_material.CardHeader, cardHeaderProps), picturesource && __jsx(_material.CardMedia, {
     component: "div",
-    className: "app-card-image",
+    className: (0, _clsx["default"])("app-card-image", "wm-card-media-root"),
     style: {
       maxHeight: imageheight
-    },
-    sx: {
-      padding: "0",
-      margin: "0",
-      backgroundColor: "transparent"
     }
   }, __jsx(_image["default"], {
     src: picturesource,
@@ -222,11 +215,7 @@ var WmCard = exports.WmCard = function WmCard(props) {
     width: 0,
     height: 0,
     sizes: "100vw",
-    className: "card-image",
-    style: {
-      width: "100%",
-      height: "100%"
-    }
+    className: (0, _clsx["default"])("card-image", "wm-card-media-img")
   })), _react["default"].Children.map(children, function (child) {
     if (isComponentType(child, _cardContent.WmCardContent) || isComponentType(child, _cardContent["default"])) {
       return child;

package/components/data/form/dynamic-fields/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = DynamicForm;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
@@ -20,6 +21,7 @@ var _label = _interopRequireDefault(require("../../../basic/label"));
 var _formField = _interopRequireDefault(require("../form-field"));
 var _utils = require("./utils");
 var _constant = require("./constant");
+var _excluded = ["class"];
 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;
 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; }
@@ -83,7 +85,11 @@ function DynamicForm(props) {
       formContext: formContext,
       onChangeHandler: formContext.onChangeHandler
     });
-    return __jsx(ComponentToRender, fieldProps);
+    var className = fieldProps["class"],
+      restProps = (0, _objectWithoutProperties2["default"])(fieldProps, _excluded);
+    return __jsx(ComponentToRender, (0, _extends2["default"])({}, restProps, {
+      className: className || fieldProps.className
+    }));
   };
 
   // Render form field with label using FormField wrapper

package/components/data/form/dynamic-fields/props.d.ts

@@ -30,6 +30,7 @@ export interface FormFieldMetadata {
     onBlur?: () => void;
     onFocus?: () => void;
     [key: string]: any;
+    class?: string;
 }
 export interface DynamicFormProps {
     metadata: FormFieldMetadata[];

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

@@ -38,6 +38,7 @@ declare const WmFormActionsStandalone: import("react").ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -110,6 +111,7 @@ declare const _default: import("react").ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/form/form-body/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["children", "className", "styles"];
 var __jsx = _react["default"].createElement;
 var DEFAULT_CLASS = "panel-body form-body";
@@ -21,7 +22,7 @@ function FormBody(props) {
   return __jsx("div", (0, _extends2["default"])({
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
     style: styles
-  }, rest), children);
+  }, (0, _attr.removeInvalidAttributes)(rest)), children);
 }
 var FormBodyStandalone = exports.WmFormBody = FormBody;
 var _default = exports["default"] = FormBody;

package/components/data/form/form-field/base-field.js

@@ -113,9 +113,10 @@ var BaseField = function BaseField(WrappedComponent) {
         }
       }
 
-      // For any field where searchkey exists and differs from formKey, use searchkey
-      // This handles cases where searchkey contains the actual data key
-      if (props.searchkey && props.searchkey !== props.formKey) {
+      // Prefer searchkey over formKey only for dotted form paths (related / nested binding).
+      // Chips and other widgets set searchkey for dataset lookup (e.g. "name"); that must not
+      // become the react-hook-form field id or every such field collides on the same key.
+      if (props.formKey && props.searchkey && props.searchkey !== props.formKey) {
         return props.searchkey;
       }
 

package/components/data/form/form-footer/index.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["className", "children"];
 var __jsx = _react["default"].createElement;
 var DEFAULT_CLASS = "basic-btn-grp form-action panel-footer clearfix";
@@ -20,7 +21,7 @@ var WmFormFooter = exports.WmFormFooter = function WmFormFooter(props) {
   return __jsx(_Box["default"], (0, _extends2["default"])({
     component: "div",
     className: (0, _clsx["default"])(DEFAULT_CLASS, className)
-  }, rest), children);
+  }, (0, _attr.removeInvalidAttributes)(rest)), children);
 };
 WmFormFooter.displayName = "WmFormFooter";
 var _default = exports["default"] = WmFormFooter;

package/components/data/list/components/ListItemWithTemplate.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ListItemWithTemplate = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ListItem = require("./ListItem");
 var _mediaTemplate = require("../templates/media-template");
@@ -83,7 +83,9 @@ var ListItemWithTemplate = exports.ListItemWithTemplate = function ListItemWithT
   var templateContent = renderItem ? renderItem(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index, WidgetProxy[name], getCurrentItemWidgets) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
 
   // Resolve item class: support string or function callback
-  var resolvedItemClass = typeof itemclass === "function" ? itemclass(item) : itemclass;
+  var resolvedItemClass = (0, _react.useMemo)(function () {
+    return typeof itemclass === "function" ? itemclass(item) : itemclass;
+  }, [itemclass, item]);
 
   // Apply list template attrs to li (itemAttrs → layoutClassName on li)
   var itemLayoutAttrs = itemAttrs ? itemAttrs(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index) : undefined;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { DefaultEventHandler, IPaginationMeta } from "../components/props";
-import { WmListProps, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler } from "../props";
+import { WmListProps, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler, ListSelectHandler } from "../props";
 export interface GroupedDataItem<T = ListItemData> {
     key: string;
     data: T[];
@@ -32,7 +32,7 @@ export interface UseListEventHandlersProps<T extends ListItemData = ListItemData
     onDblclick?: ListItemEventHandler;
     onMouseEnter?: ListItemEventHandler;
     onMouseLeave?: ListItemEventHandler;
-    onSelect?: (widget: unknown, selectedItem: T | null) => void;
+    onSelect?: ListSelectHandler<T>;
     onSelectionlimitexceed?: (event: React.MouseEvent | null, widget: unknown) => void;
     onPaginationchange?: (event: React.MouseEvent | null, widget: unknown, index: number) => void;
     onPageChange?: (event: React.MouseEvent | null, page: number) => void;

package/components/data/list/hooks/useListEventHandlers.js

@@ -65,14 +65,14 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
   }, [selectedItems]);
 
   // Helper function to call onSelect and mark as user-initiated
-  var callOnSelect = (0, _react.useCallback)(function (selectedItem) {
+  var callOnSelect = (0, _react.useCallback)(function (selectedItem, event) {
     if (onSelect && widgetInstance && selectedItem) {
       if (userInitiatedSelectionRef) {
         userInitiatedSelectionRef.current = true;
       }
       // Set $index on widget instance
       (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, selectedItem);
-      onSelect(widgetInstance, selectedItem);
+      onSelect(widgetInstance, selectedItem, event !== null && event !== void 0 ? event : undefined);
     }
   }, [onSelect, userInitiatedSelectionRef, items]);
   var handleListItemClick = (0, _react.useCallback)(function (event, item) {
@@ -104,7 +104,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
           setActiveItems(new Set(rangeItems));
           // Only call onSelect if this is a new selection (not already active)
           if (!isItemActive) {
-            callOnSelect(item); // Pass the current item that triggered the range selection
+            callOnSelect(item, event); // Pass the current item that triggered the range selection
           }
           (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
           onClick === null || onClick === void 0 || onClick(event, widgetInstance); // Use widgetInstance instead of item
@@ -137,7 +137,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
           setActiveItems(_newActiveItems);
           // Only call onSelect if this is a new selection (not already active)
           if (!isItemActive) {
-            callOnSelect(item); // Pass the current item being selected
+            callOnSelect(item, event); // Pass the current item being selected
           }
         }
         setFirstSelectedItem(item);
@@ -152,7 +152,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
           setFirstSelectedItem(item);
           // Only call onSelect if this is a new selection (not already active)
           if (!isItemActive) {
-            callOnSelect(item); // Pass the current item being selected
+            callOnSelect(item, event); // Pass the current item being selected
           }
         }
         // If item is already selected, do nothing (don't deselect)
@@ -168,7 +168,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
         setFirstSelectedItem(item);
         // Only call onSelect if this is a new selection (not already active)
         if (!isItemActive) {
-          callOnSelect(item); // Pass the current item being selected
+          callOnSelect(item, event); // Pass the current item being selected
         }
       }
       // If item is already selected, do nothing (don't deselect)

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

@@ -95,6 +95,7 @@ declare const WmListStandalone: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -146,6 +147,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/list/index.js

@@ -535,13 +535,12 @@ var WmList = function WmList(props) {
     }))();
   }, [datasource]);
   var showHorizontalScrollSentinel = showNavigation && navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL && (direction === _constants.LIST_DIRECTION.HORIZONTAL || direction === "row");
-  //position and width/height tailwind classNames are applying to the wrapper div
+  var hostAutoLayoutPrefixes = ["pos-"].concat((0, _toConsumableArray2["default"])(_constants.INSETION_POSITION), ["zi-", "w-", "h-"]);
   var wrapper_autoLayout_Classes = (0, _react.useMemo)(function () {
-    return (0, _styleUtils.filterAutoLayoutClasses)(layoutClassName, ["pos-"].concat((0, _toConsumableArray2["default"])(_constants.INSETION_POSITION), ["zi-"]));
+    return (0, _styleUtils.filterAutoLayoutClasses)(layoutClassName, hostAutoLayoutPrefixes);
   }, [layoutClassName]);
-  // excluding the AutoLayout position properties tailwind classNames which are applied to the ul tag
   var ul_autoLayout_Classes = (0, _react.useMemo)(function () {
-    return (0, _styleUtils.filterAutoLayoutClasses)(layoutClassName, ["pos-"].concat((0, _toConsumableArray2["default"])(_constants.INSETION_POSITION), ["zi-"]), "exclude");
+    return (0, _styleUtils.filterAutoLayoutClasses)(layoutClassName, hostAutoLayoutPrefixes, "exclude");
   }, [layoutClassName]);
   var hasListGroupAutoLayout = (0, _react.useMemo)(function () {
     return (0, _listHelpers.hasListGroupAutoLayoutClass)({

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

@@ -1,3 +1,4 @@
+import type { SyntheticEvent } from "react";
 import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
 import { DefaultEventHandler } from "./components/props";
 import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
@@ -29,7 +30,7 @@ export type ListPageEventHandler = (event: React.MouseEvent | null, page: number
 export type ListReorderEventHandler<T = ListItemData> = (event: React.MouseEvent | null, data: T[], changedItem: T) => void;
 export type ListSelectionLimitExceededHandler = (event: React.MouseEvent | null, widget: unknown) => void;
 export type ListBeforeDataRenderHandler<T = ListItemData> = (widget: unknown, data: T[]) => void;
-export type ListSelectHandler<T = ListItemData> = (widget: unknown, selectedItem: T | null) => void;
+export type ListSelectHandler<T = ListItemData> = (widget: unknown, selectedItem: T | null, event?: SyntheticEvent | null) => void;
 export type ListPaginationChangeHandler = (event: React.MouseEvent | null, widget: unknown, index: number) => void;
 export type ListSetRecordHandler<T = ListItemData> = (event: React.MouseEvent | null, widget: unknown, index: number, data: T) => void;
 export type ListRenderItemHandler<T = ListItemData> = (item: T, index: number) => React.ReactNode;

package/components/data/list/utils/list-widget-methods.d.ts

@@ -1,3 +1,4 @@
+import type { SyntheticEvent } from "react";
 import { ListItemData } from "../props";
 import { ListState, ListWidgetMethods } from "../props";
-export declare const useListWidgetMethods: (items: ListItemData[], listState: ListState, multiselect: boolean, onSelect?: (widgetInstance: any, item: ListItemData) => void, widgetInstance?: any, listener?: any, userInitiatedSelectionRef?: React.MutableRefObject<boolean>, name?: string, Widgets?: any, size?: number, setIsListCleared?: (isListCleared: boolean) => void, handlePageSizeChange?: (newPageSize: number) => void) => ListWidgetMethods;
+export declare const useListWidgetMethods: (items: ListItemData[], listState: ListState, multiselect: boolean, onSelect?: (widgetInstance: any, item: ListItemData, event?: SyntheticEvent | null) => void, widgetInstance?: any, listener?: any, userInitiatedSelectionRef?: React.MutableRefObject<boolean>, name?: string, Widgets?: any, size?: number, setIsListCleared?: (isListCleared: boolean) => void, handlePageSizeChange?: (newPageSize: number) => void) => ListWidgetMethods;

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

@@ -1,4 +1,14 @@
-import React, { ReactNode } from "react";
+import { type ReactNode } from "react";
+export type CustomExpressionRenderBodyProps = {
+    rowData: unknown;
+    render: (rowData: any) => ReactNode;
+};
+/**
+ * Memoized wrapper for WaveMaker custom column markup (`(row) => <WmLabel … />`).
+ * Only re-renders when `rowData` or the parsed `render` function reference changes — safe to use
+ * outside WmTable (lists, cards, etc.).
+ */
+export declare const CustomExpressionRenderBody: import("react").NamedExoticComponent<CustomExpressionRenderBodyProps>;
 export interface MemoizedRowCellsProps {
     cells: any[];
     hasExpansion: boolean;
@@ -11,5 +21,9 @@ export interface MemoizedRowCellsProps {
     tableData?: any[];
     isEditingRow?: boolean;
     isSelected?: boolean;
+    customExpressionColumns?: Record<string, (rowData: any) => ReactNode>;
+    /** Incremented when custom-expression JSX is re-parsed into new components. */
+    customColumnsRevision?: number;
+    columnsVersion?: number;
 }
-export declare const RowCells: React.NamedExoticComponent<MemoizedRowCellsProps>;
+export declare const RowCells: import("react").NamedExoticComponent<MemoizedRowCellsProps>;

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

@@ -5,10 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RowCells = void 0;
+exports.RowCells = exports.CustomExpressionRenderBody = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _reactTable = require("@tanstack/react-table");
 var _utils = require("../utils");
@@ -17,23 +17,36 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; }
-// Memoized cell content component to prevent re-renders when activeRowIds changes
-
-var RowCells = exports.RowCells = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var cells = _ref.cells,
-    hasExpansion = _ref.hasExpansion,
-    expansionInsertIndex = _ref.expansionInsertIndex,
-    renderExpansionCell = _ref.renderExpansionCell,
-    rowId = _ref.rowId,
-    rowData = _ref.rowData,
-    isEditingRow = _ref.isEditingRow;
+/**
+ * Memoized wrapper for WaveMaker custom column markup (`(row) => <WmLabel … />`).
+ * Only re-renders when `rowData` or the parsed `render` function reference changes — safe to use
+ * outside WmTable (lists, cards, etc.).
+ */
+var CustomExpressionRenderBody = exports.CustomExpressionRenderBody = /*#__PURE__*/(0, _react.memo)(function CustomExpressionRenderBody(_ref) {
+  var rowData = _ref.rowData,
+    render = _ref.render;
+  return __jsx(_react["default"].Fragment, null, render(rowData));
+}, function (prev, next) {
+  return prev.rowData === next.rowData && prev.render === next.render;
+});
+CustomExpressionRenderBody.displayName = "CustomExpressionRenderBody";
+var RowCells = exports.RowCells = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var cells = _ref2.cells,
+    hasExpansion = _ref2.hasExpansion,
+    expansionInsertIndex = _ref2.expansionInsertIndex,
+    renderExpansionCell = _ref2.renderExpansionCell,
+    rowId = _ref2.rowId,
+    rowData = _ref2.rowData,
+    isEditingRow = _ref2.isEditingRow,
+    customExpressionColumns = _ref2.customExpressionColumns;
   return __jsx(_react["default"].Fragment, null, cells.map(function (cell, cellIndex) {
-    var _cell$column$columnDe, _cell$column, _cell$column$columnDe2, _cell$column$columnDe3, _cell$column$columnDe4, _cell$column$columnDe5, _cell$column$columnDe6, _cell$column$columnDe7;
+    var _cell$column$columnDe, _cell$column, _cell$column$columnDe2, _cell$id, _cell$column$columnDe3, _cell$column$columnDe4, _cell$column$columnDe5, _cell$column$columnDe6, _cell$column$columnDe7;
     var colClassExpression = (cell === null || cell === void 0 || (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.colClass) || "";
     var columnId = (cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) || (cell === null || cell === void 0 || (_cell$column$columnDe2 = cell.column.columnDef) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.accessorKey) || "";
     var colClass = (0, _utils.getColClass)(colClassExpression, rowData, columnId);
+    var customRender = customExpressionColumns === null || customExpressionColumns === void 0 ? void 0 : customExpressionColumns[columnId];
     return __jsx(_react.Fragment, {
-      key: "cell-".concat(cellIndex)
+      key: (_cell$id = cell === null || cell === void 0 ? void 0 : cell.id) !== null && _cell$id !== void 0 ? _cell$id : "cell-".concat(columnId, "-").concat(cellIndex)
     }, hasExpansion && cellIndex === expansionInsertIndex && renderExpansionCell(rowId, rowData), __jsx(_material.TableCell, {
       key: cell.id,
       title: cell.getValue() ? String(cell.getValue()) : "",
@@ -46,22 +59,23 @@ var RowCells = exports.RowCells = /*#__PURE__*/(0, _react.memo)(function (_ref)
         textAlign: (_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.textAlign,
         backgroundColor: (_cell$column$columnDe5 = cell.column.columnDef.meta) === null || _cell$column$columnDe5 === void 0 ? void 0 : _cell$column$columnDe5.backgroundColor
       }, function () {
-        var _ref2 = cell.column.columnDef.meta || {},
-          className = _ref2.className,
-          textAlign = _ref2.textAlign,
-          backgroundColor = _ref2.backgroundColor,
-          otherMeta = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+        var _ref3 = cell.column.columnDef.meta || {},
+          className = _ref3.className,
+          textAlign = _ref3.textAlign,
+          backgroundColor = _ref3.backgroundColor,
+          otherMeta = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
         return otherMeta;
       }()), {}, {
         fontSize: "inherit",
         color: "inherit"
       })
-    }, (_cell$column$columnDe6 = cell.column.columnDef.meta) !== null && _cell$column$columnDe6 !== void 0 && _cell$column$columnDe6.renderCellContent && !isEditingRow ? (_cell$column$columnDe7 = cell.column.columnDef.meta) === null || _cell$column$columnDe7 === void 0 ? void 0 : _cell$column$columnDe7.renderCellContent(rowData, cell.column.columnDef) : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+    }, customRender ? __jsx(CustomExpressionRenderBody, {
+      rowData: rowData,
+      render: customRender
+    }) : (_cell$column$columnDe6 = cell.column.columnDef.meta) !== null && _cell$column$columnDe6 !== void 0 && _cell$column$columnDe6.renderCellContent && !isEditingRow ? (_cell$column$columnDe7 = cell.column.columnDef.meta) === null || _cell$column$columnDe7 === void 0 ? void 0 : _cell$column$columnDe7.renderCellContent(rowData, cell.column.columnDef) : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
   }));
 }, function (prevProps, nextProps) {
-  // Compare rowData, isEditingRow, ColClassSignature, and isSelected for rendering updates
-  // Note: cells comparison removed to avoid conflicts with external DOM manipulation
-  // isSelected is compared to trigger re-renders when selection state changes
-  return prevProps.rowData === nextProps.rowData && prevProps.isEditingRow === nextProps.isEditingRow && prevProps.isSelected === nextProps.isSelected && prevProps.ColClassSignature === nextProps.ColClassSignature;
+  var skipRender = prevProps.rowData === nextProps.rowData && prevProps.isEditingRow === nextProps.isEditingRow && prevProps.isSelected === nextProps.isSelected && prevProps.ColClassSignature === nextProps.ColClassSignature && prevProps.customExpressionColumns === nextProps.customExpressionColumns && prevProps.customColumnsRevision === nextProps.customColumnsRevision && prevProps.columnsVersion === nextProps.columnsVersion && prevProps.cells === nextProps.cells && prevProps.rowsVersion === nextProps.rowsVersion;
+  return skipRender;
 });
 RowCells.displayName = "RowCells";

package/components/data/table/components/TableBody.js

@@ -198,7 +198,12 @@ var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
     editingRowId = _ref4$editingRowId === void 0 ? null : _ref4$editingRowId,
     _ref4$isAddingNewRow = _ref4.isAddingNewRow,
     isAddingNewRow = _ref4$isAddingNewRow === void 0 ? false : _ref4$isAddingNewRow,
-    registerRowDefInstance = _ref4.registerRowDefInstance;
+    registerRowDefInstance = _ref4.registerRowDefInstance,
+    customExpressionColumns = _ref4.customExpressionColumns,
+    _ref4$customColumnsRe = _ref4.customColumnsRevision,
+    customColumnsRevision = _ref4$customColumnsRe === void 0 ? 0 : _ref4$customColumnsRe,
+    _ref4$columnsVersion = _ref4.columnsVersion,
+    columnsVersion = _ref4$columnsVersion === void 0 ? 0 : _ref4$columnsVersion;
   var hasExpansion = !!(rowExpansionConfig !== null && rowExpansionConfig !== void 0 && rowExpansionConfig.show && toggleRowExpansion && isRowExpanded);
   var expansionInsertIndex = useExpansionPosition(hasExpansion, rowExpansionConfig || null, columns);
   var totalColumns = columns.length + (hasExpansion ? 1 : 0);
@@ -250,7 +255,10 @@ var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
         ExpandedContent: ExpandedContent,
         rowExpansionConfig: rowExpansionConfig,
         totalColumns: totalColumns,
-        onInstanceLoad: registerRowDefInstance
+        onInstanceLoad: registerRowDefInstance,
+        customExpressionColumns: customExpressionColumns,
+        customColumnsRevision: customColumnsRevision,
+        columnsVersion: columnsVersion
       });
     });
   };
@@ -259,7 +267,7 @@ var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
   }, formposition === "top" && renderAddNewRow(), renderTableContent(), formposition === "bottom" && renderAddNewRow());
 };
 var TableBodyComponent = exports.TableBodyComponent = /*#__PURE__*/(0, _react.memo)(TableBodyComponentBase, function (prev, current) {
-  var keys = ["rowClass", "formposition", "nodatamessage", "rowsVersion", "tableData", "ColClassSignature", "activeRowIds", "selectedRowIds", "editingRowId", "table", "renderAddNewRow", "isAddingNewRow"];
+  var keys = ["rowClass", "formposition", "nodatamessage", "rowsVersion", "tableData", "ColClassSignature", "activeRowIds", "selectedRowIds", "editingRowId", "table", "renderAddNewRow", "isAddingNewRow", "customExpressionColumns", "customColumnsRevision", "columnsVersion"];
   return keys.every(function (key) {
     if (key === "activeRowIds" || key === "selectedRowIds") {
       return (0, _isEqual["default"])(prev[key], current[key]);

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

@@ -19,6 +19,9 @@ interface DataRowProps {
     totalColumns: number;
     index: number;
     onInstanceLoad?: (rowId: string, instance: any, rowData: any) => void;
+    customExpressionColumns?: Record<string, (rowData: any) => React.ReactNode>;
+    customColumnsRevision?: number;
+    columnsVersion?: number;
 }
 export declare const TableDataRow: React.NamedExoticComponent<DataRowProps>;
 export {};

package/components/data/table/components/TableDataRow.js

@@ -35,7 +35,12 @@ var TableDataRowComponent = function TableDataRowComponent(_ref) {
     rowExpansionConfig = _ref.rowExpansionConfig,
     totalColumns = _ref.totalColumns,
     index = _ref.index,
-    onInstanceLoad = _ref.onInstanceLoad;
+    onInstanceLoad = _ref.onInstanceLoad,
+    customExpressionColumns = _ref.customExpressionColumns,
+    _ref$customColumnsRev = _ref.customColumnsRevision,
+    customColumnsRevision = _ref$customColumnsRev === void 0 ? 0 : _ref$customColumnsRev,
+    _ref$columnsVersion = _ref.columnsVersion,
+    columnsVersion = _ref$columnsVersion === void 0 ? 0 : _ref$columnsVersion;
   // Subscribe to edits for this specific row.
   // This hook will only trigger a re-render for THIS component if the data for this row changes.
   var editedTableData = (0, _useEditedRows.useEditedRow)(rowId);
@@ -94,7 +99,10 @@ var TableDataRowComponent = function TableDataRowComponent(_ref) {
     rowsVersion: rowsVersion,
     tableData: tableData,
     isEditingRow: isEditingRow,
-    isSelected: isSelected
+    isSelected: isSelected,
+    customExpressionColumns: customExpressionColumns,
+    customColumnsRevision: customColumnsRevision,
+    columnsVersion: columnsVersion
   })), hasExpansion && rowIsExpanded && rowExpansionConfig && __jsx(ExpandedContent, {
     rowId: rowId,
     rowData: row.original,
@@ -104,7 +112,7 @@ var TableDataRowComponent = function TableDataRowComponent(_ref) {
   }));
 };
 var TableDataRow = exports.TableDataRow = /*#__PURE__*/(0, _react.memo)(TableDataRowComponent, function (prev, next) {
-  var keys = ["isSelected", "isActive", "rowIsExpanded", "isEditingRow", "rowClass", "ColClassSignature", "rowsVersion", "row", "index"];
+  var keys = ["isSelected", "isActive", "rowIsExpanded", "isEditingRow", "rowClass", "ColClassSignature", "rowsVersion", "row", "index", "customExpressionColumns", "customColumnsRevision", "columnsVersion"];
   return keys.every(function (key) {
     return prev[key] === next[key];
   });

package/components/data/table/components/TableHeader.js

@@ -388,10 +388,7 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
         "data-col-id": headerIndex,
         tabIndex: 0,
         "data-col-field": header.column.id
-      }, __jsx(_material.Box, {
-        component: "span",
-        className: "header-data"
-      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())), enablesort && !enablecolumnselection && header.column.getCanSort() && __jsx(_material.Box, {
+      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), enablesort && !enablecolumnselection && header.column.getCanSort() && __jsx(_material.Box, {
         style: {
           zIndex: 90
         },

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

@@ -16,3 +16,4 @@ export * from "./useTableEffects";
 export * from "./useTableStateManager";
 export * from "./useTableFilter";
 export * from "./useDynamicColumns";
+export * from "./useCustomExpressionColumns";