@wavemaker-ai/react-runtime 1.0.0-rc.324 → 1.0.0-rc.326

package/components/basic/anchor/index.js

@@ -48,6 +48,7 @@ const getCurrentPageName = (pathname) => {
 const WmAnchor = (props) => {
   var _b;
   const _a = props, {
+    ref,
     caption = "Link",
     iconclass,
     styles,
@@ -68,6 +69,7 @@ const WmAnchor = (props) => {
     itemLink,
     href: _ignoredHref
   } = _a, restProps = __objRest(_a, [
+    "ref",
     "caption",
     "iconclass",
     "styles",
@@ -211,6 +213,7 @@ const WmAnchor = (props) => {
       "data-identifier": "anchor"
     }), removeInvalidAttributes(restProps)), {
       name: props.name,
+      ref,
       children: [
         /* @__PURE__ */ jsx(
           WmAppIcon,

package/components/container/index.js

@@ -30,7 +30,12 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useMemo, useCallback } from "react";
+import {
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback
+} from "react";
 import { clsx } from "clsx";
 import { withBaseWrapper } from "../../higherOrder/withBaseWrapper";
 import { useLayoutSize } from "../../hooks/useLayoutSize";

package/components/container/layout-grid/grid-row/index.js

@@ -4,7 +4,7 @@ import { Container } from "@mui/material";
 import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
 const DEFAULT_CLASS = "app-grid-row clearfix";
 const WmGridrow = (props) => {
-  return /* @__PURE__ */ jsx(Container, { style: props.styles, className: clsx(DEFAULT_CLASS, props.className), children: props.children });
+  return /* @__PURE__ */ jsx(Container, { style: props.styles, className: clsx(DEFAULT_CLASS, props.className), hidden: props.hidden, children: props.children });
 };
 WmGridrow.displayName = "WmGridrow";
 var grid_row_default = withBaseWrapper(WmGridrow);

package/components/data/form/base-form/hooks/useFormSubmission.d.ts

@@ -8,4 +8,4 @@ import { UseFormSubmissionOptions, UseFormSubmissionReturn } from "../props";
  * - Success/error callbacks
  * - Data output notification
  */
-export declare function useFormSubmission({ formName, formfields, formDataref: externalFormDataref, getValues, formType, validateFieldsOnSubmit, resetFormData, toggleMessage, setShowViewMode, listener, datasource, formSubmit, widgettype, onBeforeSubmit, onSubmit, onResult, onSuccess, onError, insertmessage, updatemessage, deletemessage, postmessage, errormessage, messagelayout, standalone, }: UseFormSubmissionOptions): UseFormSubmissionReturn;
+export declare function useFormSubmission({ formName, formfields, formDataref: externalFormDataref, getValues, formType, validateFieldsOnSubmit, resetFormData, toggleMessage, setShowViewMode, listener, datasource, formSubmit, widgettype, onBeforeSubmit, onSubmit, onResult, onSuccess, formSuccess, onError, insertmessage, updatemessage, deletemessage, postmessage, errormessage, messagelayout, standalone, }: UseFormSubmissionOptions): UseFormSubmissionReturn;

package/components/data/form/base-form/hooks/useFormSubmission.js

@@ -43,6 +43,7 @@ function useFormSubmission({
   onSubmit,
   onResult,
   onSuccess,
+  formSuccess,
   onError,
   insertmessage,
   updatemessage,
@@ -102,6 +103,7 @@ function useFormSubmission({
       }
       if (status) {
         onSuccess == null ? void 0 : onSuccess(event, {}, data);
+        formSuccess == null ? void 0 : formSuccess(event, {}, data);
         if (messagelayout === "Inline") {
           toggleMessage(true, "Data saved successfully", "success");
         }
@@ -113,7 +115,7 @@ function useFormSubmission({
         }
       }
     },
-    [onResult, onSuccess, onError, messagelayout, errormessage, toggleMessage]
+    [onResult, onSuccess, formSuccess, onError, messagelayout, errormessage, toggleMessage]
   );
   const handleSubmitSuccess = useCallback(
     (data, resolve) => {

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

@@ -159,17 +159,7 @@ const BaseForm = (WrappedComponent) => {
     const formClassName = useMemo(() => {
       return isInsideWizard ? clsx(className) : clsx(DEFAULT_CLASS, className);
     }, [isInsideWizard, className]);
-    const fields = useMemo(() => {
-      const newFields = [];
-      if (!formName) return newFields;
-      const Widgets = (formProxy == null ? void 0 : formProxy.formfields) || {};
-      Object.keys(Widgets).forEach((key) => {
-        if (!key.includes("formWidget") && Widgets[key]) {
-          newFields.push(Widgets[key]);
-        }
-      });
-      return newFields;
-    }, [formName]);
+    const onDataSourceChangeFiredRef = useRef(false);
     const registerHeaderAction = useCallback((actionName, action) => {
       if (!action || !actionName) return;
       setHeaderActions((prev) => {
@@ -317,6 +307,7 @@ const BaseForm = (WrappedComponent) => {
       onSubmit: props.onSubmit,
       onResult: props.onResult,
       onSuccess: props.onSuccess,
+      formSuccess: props.formSuccess,
       onError: props.onError,
       insertmessage: props.insertmessage,
       updatemessage: props.updatemessage,
@@ -539,10 +530,15 @@ const BaseForm = (WrappedComponent) => {
       debouncedFilter
     ]);
     useEffect(() => {
-      if (props.onDataSourceChange && fields.length > 0) {
-        props.onDataSourceChange(fields);
+      if (!props.onDataSourceChange || !formName) return;
+      if (onDataSourceChangeFiredRef.current) return;
+      const Widgets = (formProxy == null ? void 0 : formProxy.formfields) || {};
+      const currentFields = Object.keys(Widgets).filter((key) => !key.includes("formWidget") && Widgets[key]).map((key) => Widgets[key]);
+      if (currentFields.length > 0) {
+        onDataSourceChangeFiredRef.current = true;
+        props.onDataSourceChange(currentFields);
       }
-    }, [fields, props.onDataSourceChange]);
+    }, [props.onDataSourceChange, formName]);
     useEffect(() => {
       if (formRef.current) {
         const formEl = formRef.current;
@@ -661,6 +657,7 @@ const BaseForm = (WrappedComponent) => {
         return {
           formdata: (_a2 = currentFormData != null ? currentFormData : widgetFormData) != null ? _a2 : formdata,
           formName: formName || "",
+          isValid,
           rootParentForm: isChildForm ? rootParentForm || "" : formName || "",
           parentDataPath: isChildForm ? fullDataPath : void 0,
           lastUpdateOrigin: isChildForm ? parentFormDataContext == null ? void 0 : parentFormDataContext.lastUpdateOrigin : lastUpdateOriginRef.current,

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

@@ -97,6 +97,8 @@ interface BaseFormProps extends BaseProps {
     onSubmit: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any) => void;
     onError: (event: React.FormEvent<HTMLFormElement>, widget: any, error: any) => void;
     onSuccess: (event: React.FormEvent<HTMLFormElement>, widget?: any, data?: any) => void;
+    /** @deprecated Use onSuccess instead. Fired with the same args as onSuccess for backward compatibility. */
+    formSuccess?: (event: React.FormEvent<HTMLFormElement>, widget?: any, data?: any) => void;
     formSubmit: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any, operation?: any) => void;
     onChange: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any) => void;
     onBeforeSubmit: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any) => boolean | string | object | Promise<boolean | string | object>;
@@ -280,6 +282,7 @@ export interface UseFormSubmissionOptions {
     onSubmit?: Function;
     onResult?: Function;
     onSuccess?: Function;
+    formSuccess?: Function;
     onError?: Function;
     insertmessage?: string;
     updatemessage?: string;

package/components/data/form/form-controller/withFormController.js

@@ -73,6 +73,7 @@ const withFormController = (WrappedComponent) => {
       observe,
       onBlur,
       fieldName,
+      updateon,
       standalone = false
     } = _a, wrappedComponentProps = __objRest(_a, [
       "formRef",
@@ -97,6 +98,7 @@ const withFormController = (WrappedComponent) => {
       "observe",
       "onBlur",
       "fieldName",
+      "updateon",
       "standalone"
     ]);
     const [touched, setTouched] = useState(false);
@@ -193,10 +195,14 @@ const withFormController = (WrappedComponent) => {
           if (isValid === false) {
             return;
           }
+          if (updateon === "keypress" && effectiveFormKey) {
+            setTouched(true);
+            trigger(effectiveFormKey);
+          }
           (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e, componentProps, newValue, oldValue);
         };
       },
-      [type, props.datafield]
+      [type, props.datafield, updateon, effectiveFormKey]
     );
     const createOnBlurHandler = useCallback(
       (field, fieldState) => {
@@ -275,7 +281,18 @@ const withFormController = (WrappedComponent) => {
             })
           }), {
             listener: {
-              onChange: props.onChangeHandler,
+              onChange: isMaxWidget && props.onChangeHandler ? (name2, data) => {
+                const remapped = __spreadValues({}, data);
+                if ("datavalue" in remapped) {
+                  remapped.maxDataValue = remapped.datavalue;
+                  delete remapped.datavalue;
+                }
+                if ("displayValue" in remapped) {
+                  remapped.maxDisplayValue = remapped.displayValue;
+                  delete remapped.displayValue;
+                }
+                props.onChangeHandler(name2, remapped);
+              } : props.onChangeHandler,
               Widgets: ((_a2 = props.listener) == null ? void 0 : _a2.Widgets) || {}
             }
           });

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

@@ -57,13 +57,15 @@ const BaseField = (WrappedComponent) => {
       }
     }
     function setFieldDataSet(dataset, options) {
-      setRelatedData({
-        displaylabel: props.displayfield = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE,
-        displayfield: props.displayfield = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE,
+      const aliasDisplayField = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE;
+      const newRelatedData = {
+        displaylabel: aliasDisplayField,
+        displayfield: aliasDisplayField,
         datafield: options.aliasColumn || LIVE_CONSTANTS.LABEL_KEY,
         searchkey: options.distinctField || LIVE_CONSTANTS.LABEL_KEY,
         dataset
-      });
+      };
+      setRelatedData(newRelatedData);
     }
     const hasRequiredValidator = () => {
       const checkRequiredValidator = (validator) => {
@@ -134,7 +136,8 @@ const BaseField = (WrappedComponent) => {
       relatedData,
       isRequired,
       transformedFormKey,
-      customValidationMsg
+      customValidationMsg,
+      formContext
     ]);
     return /* @__PURE__ */ createElement(
       WrappedComponent,

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

@@ -37,7 +37,7 @@ const DATASET_SYNC_KEYS = [
 ];
 const WmFormField = memo(
   (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { show = true, deferload } = props;
     const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
       show: show == null ? void 0 : show.toString(),
@@ -49,6 +49,7 @@ const WmFormField = memo(
     const overriddenItemsRef = useRef({});
     const fieldKey = props.formKey || props.name;
     const defaultValueRegisteredRef = useRef(false);
+    const showfield = (_b = (_a = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _a.show) != null ? _b : show;
     const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
     const reset = useCallback(
       (value) => {
@@ -69,7 +70,7 @@ const WmFormField = memo(
           fieldProxyRef.current[key] = key === "datavalue" && isNumber && !Array.isArray(data[key]) ? Number(data[key]) : data[key];
         });
         setProxyProps((prev) => {
-          return __spreadValues(__spreadValues({}, prev), isNumber && !Array.isArray(data.datavalue) ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
+          return __spreadValues(__spreadValues({}, prev), isNumber && data.datavalue !== void 0 && !Array.isArray(data.datavalue) ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
         });
       },
       [isNumber]
@@ -109,14 +110,17 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c2, _d2, _e, _f, _g;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
         const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
         const fieldError = formKey && errors ? get(errors, formKey) : void 0;
         const invalid = Boolean(fieldError);
         const invalidCls = invalid ? " text-danger " : "";
-        return /* @__PURE__ */ jsx(Fragment, { children: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_g = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _g.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+          show: showfield,
+          disabled: (_d2 = (_c2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _c2.disabled) != null ? _d2 : props == null ? void 0 : props.disabled,
+          readonly: (_f = (_e = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e.readonly) != null ? _f : props == null ? void 0 : props.readonly,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -131,13 +135,13 @@ const WmFormField = memo(
       }
     }
     const isDynamicFormField = typeof props.className === "string" && props.className.includes("app-dynamic-form-field");
-    const itemsPerRowClass = !isDynamicFormField && ((_a = props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
+    const itemsPerRowClass = !isDynamicFormField && ((_c = props.formRef) == null ? void 0 : _c.itemsPerRow) || "";
     if (!fieldProxyRef.current) {
       return null;
     }
     const isDeferLoad = deferload === true;
-    const showValue = ((_b = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _b.toString()) !== "false";
-    if (!showValue && isDeferLoad) {
+    const showValue = ((_d = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _d.toString()) !== "false";
+    if ((!showValue || showfield) && isDeferLoad) {
       return null;
     }
     const shouldHide = !showValue && !isDeferLoad;

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

@@ -205,6 +205,7 @@ export interface FormFieldProps {
     observeOn?: any[];
     reset?: () => void;
     setValidationMessage?: (message: string) => void;
+    disabled?: boolean;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

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

@@ -6,6 +6,7 @@ import { MediaWmListtemplate } from "../templates/media-template";
 import { resolveDisableItem } from "../utils/list-helpers";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
 import isPlainObject from "lodash-es/isPlainObject";
+import isEmpty from "lodash-es/isEmpty";
 const ListItemWithTemplate = ({
   item,
   index,
@@ -38,7 +39,7 @@ const ListItemWithTemplate = ({
   const getCurrentItemWidgets = useCallback(
     ($index) => {
       const cached = widgetCacheRef.current.get($index);
-      if (cached) {
+      if (cached && !isEmpty(cached)) {
         return cached;
       }
       const items = {};
@@ -52,7 +53,9 @@ const ListItemWithTemplate = ({
           }
         }
       }
-      widgetCacheRef.current.set($index, items);
+      if (!isEmpty(items)) {
+        widgetCacheRef.current.set($index, items);
+      }
       return items;
     },
     [WidgetProxy, name]

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

@@ -112,7 +112,7 @@ const useListEffects = (props) => {
         selectPageSize: (size) => widgetMethodsRef.current.selectPageSize(size)
       });
     }
-  }, [name, showNavigation, items]);
+  }, [name, showNavigation, items == null ? void 0 : items.length]);
   useEffect(() => {
     if ((listener == null ? void 0 : listener.onChange) && props.navigation !== LIST_NAVIGATION_TYPES.NONE) {
       listener.onChange(name, {

package/components/data/list/index.js

@@ -56,8 +56,7 @@ import {
   LIST_DEFAULTS,
   LIST_MESSAGES,
   LIST_ALIGN,
-  LIST_DIRECTION,
-  INSETION_POSITION
+  LIST_DIRECTION
 } from "./utils/constants";
 import {
   getItemsPerRowClass,
@@ -469,7 +468,16 @@ 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 hostAutoLayoutPrefixes = [
+    "wm-pos-",
+    "wm-top",
+    "wm-bottom",
+    "wm-left",
+    "wm-right",
+    "wm-zi-",
+    "wm-w-",
+    "wm-h-"
+  ];
   const wrapper_autoLayout_Classes = useMemo(
     () => filterAutoLayoutClasses(layoutClassName, hostAutoLayoutPrefixes),
     [layoutClassName]

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

@@ -49,4 +49,3 @@ export declare const LIST_ALIGN: {
     readonly RIGHT: "right";
 };
 export declare const DEFAULT_PAGINATION_META: IPaginationMeta;
-export declare const INSETION_POSITION: readonly ["top", "bottom", "left", "right"];

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

@@ -56,12 +56,10 @@ const DEFAULT_PAGINATION_META = {
   number: 0,
   empty: true
 };
-const INSETION_POSITION = ["top", "bottom", "left", "right"];
 export {
   APP_LOCALE,
   DEFAULT_CLS,
   DEFAULT_PAGINATION_META,
-  INSETION_POSITION,
   LIST_ALIGN,
   LIST_DEFAULTS,
   LIST_DIRECTION,

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

@@ -33,7 +33,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, Fragment as Fragment2 } from "react";
 import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
-import { getColClass, TABLE_CSS_CLASSES } from "../utils";
+import { getColClass, TABLE_CSS_CLASSES, getDomHiddenCellStyle } from "../utils";
 const CustomExpressionRenderBody = memo(
   function CustomExpressionRenderBody2({ rowData, render }) {
     return /* @__PURE__ */ jsx(Fragment, { children: render(rowData) });
@@ -71,14 +71,28 @@ const RowCells = memo(
             tabIndex: 0,
             "data-col-id": cellIndex,
             className: `${TABLE_CSS_CLASSES.tableCell} ${colClass || ""}  ${((_e = cell.column.columnDef.meta) == null ? void 0 : _e.className) || ""}`.trim(),
-            style: __spreadProps(__spreadValues({
+            style: __spreadProps(__spreadValues(__spreadValues({
               width: cell.column.getSize(),
               textAlign: (_f = cell.column.columnDef.meta) == null ? void 0 : _f.textAlign,
               backgroundColor: (_g = cell.column.columnDef.meta) == null ? void 0 : _g.backgroundColor
             }, (() => {
-              const _a2 = cell.column.columnDef.meta || {}, { className, textAlign, backgroundColor, _cell } = _a2, otherMeta = __objRest(_a2, ["className", "textAlign", "backgroundColor", "_cell"]);
+              const _a2 = cell.column.columnDef.meta || {}, {
+                className,
+                textAlign,
+                backgroundColor,
+                _cell,
+                _actions,
+                domHidden
+              } = _a2, otherMeta = __objRest(_a2, [
+                "className",
+                "textAlign",
+                "backgroundColor",
+                "_cell",
+                "_actions",
+                "domHidden"
+              ]);
               return otherMeta;
-            })()), {
+            })()), getDomHiddenCellStyle(cell.column.columnDef.meta)), {
               fontSize: "inherit",
               color: "inherit"
             }),

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

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo, useCallback } from "react";
 import { TableBody, TableRow, TableCell, Box } from "@mui/material";
-import { TABLE_CSS_CLASSES, TABLE_MESSAGES } from "../utils";
+import { TABLE_CSS_CLASSES, TABLE_MESSAGES, getRowExpansionConfig } from "../utils";
 import { RowExpansionButton } from "./RowExpansionButton";
 import isEqual from "lodash-es/isEqual";
 import { TableDataRow } from "./TableDataRow";
@@ -180,7 +180,7 @@ const TableBodyComponentBase = ({
   customColumnsRevision = 0,
   columnsVersion = 0
 }) => {
-  const hasExpansion = !!((rowExpansionConfig == null ? void 0 : rowExpansionConfig.show) && toggleRowExpansion && isRowExpanded);
+  const hasExpansion = rowExpansionConfig ? true : false;
   const expansionInsertIndex = useExpansionPosition(
     hasExpansion,
     rowExpansionConfig || null,
@@ -190,6 +190,8 @@ const TableBodyComponentBase = ({
   const renderExpansionCell = useCallback(
     (rowId, rowData) => {
       if (!hasExpansion || !rowExpansionConfig) return null;
+      const rowConfig = getRowExpansionConfig(rowExpansionConfig, rowId, rowData);
+      if (!rowConfig) return null;
       return /* @__PURE__ */ jsx(
         ExpansionCell,
         {
@@ -197,7 +199,7 @@ const TableBodyComponentBase = ({
           rowData,
           isExpanded: isRowExpanded(rowId),
           onToggle: toggleRowExpansion,
-          config: rowExpansionConfig
+          config: rowConfig
         },
         `expansion-${rowId}`
       );

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

@@ -33,7 +33,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { memo, useMemo } from "react";
 import { TableHead, TableRow, TableCell, Box } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
-import { TABLE_CSS_CLASSES } from "../utils";
+import { TABLE_CSS_CLASSES, getDomHiddenCellStyle } from "../utils";
 import { TableFilterRow } from "./TableFilters";
 import { calculateMaxDepth, generateHeaderRows, hasTableGroups } from "../utils/groupHeaderUtils";
 const StandardHeaderCell = memo(
@@ -57,18 +57,19 @@ const StandardHeaderCell = memo(
       "title",
       "onClick"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c;
     const canSort = enablesort && header.column.getCanSort();
     const isSorted = header.column.getIsSorted();
     const metaClassName = ((_b2 = (_a2 = header.column.columnDef) == null ? void 0 : _a2.meta) == null ? void 0 : _b2.className) || "";
     const resizableClass = header.column.getCanResize() ? " ui-resizable" : "";
     const mergedClassName = `${TABLE_CSS_CLASSES.headerCell} ${metaClassName} ${className || ""} ${resizableClass}`.trim();
-    const mergedStyle = __spreadValues({
+    const headerMeta = (_c = header.column.columnDef) == null ? void 0 : _c.meta;
+    const mergedStyle = __spreadValues(__spreadValues({
       cursor: canSort ? "pointer" : "default",
       userSelect: "none",
       width: header.getSize(),
       position: "relative"
-    }, style);
+    }, getDomHiddenCellStyle(headerMeta)), style);
     const headerTitle = header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "";
     return /* @__PURE__ */ jsx(
       TableCell,
@@ -172,7 +173,7 @@ const TableHeaderComponent = memo(
     onHeaderclick,
     tableName
   }) => {
-    const hasExpansion = rowExpansionConfig && rowExpansionConfig.show;
+    const hasExpansion = rowExpansionConfig ? true : false;
     const hasGroups = useMemo(() => {
       return tableStructure && hasTableGroups(tableStructure);
     }, [tableStructure]);
@@ -378,12 +379,13 @@ const TableHeaderComponent = memo(
             };
             const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
             const headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+            const headerMeta = header.column.columnDef.meta;
             cells.push(
               /* @__PURE__ */ jsxs(
                 TableCell,
                 {
                   className: `${TABLE_CSS_CLASSES.headerCell} ${((_b = (_a = header.column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.className) || ""} ${headerCellResizableClass}`.trim(),
-                  style: {
+                  style: __spreadValues({
                     cursor: isClickable ? "pointer" : "default",
                     userSelect: "none",
                     width: header.getSize(),
@@ -392,7 +394,7 @@ const TableHeaderComponent = memo(
                     color: "inherit",
                     fontWeight: "bold",
                     lineHeight: "inherit"
-                  },
+                  }, getDomHiddenCellStyle(headerMeta)),
                   title: header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "",
                   onClick: handleHeaderClick,
                   role: "columnheader",

package/components/data/table/components/TablePanelHeading.js

@@ -121,7 +121,7 @@ const TablePanelHeadingComponent = ({
         }
       }
     },
-    [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport, listener]
+    [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport]
   );
   return /* @__PURE__ */ jsx(Box, { className: "panel-heading", children: /* @__PURE__ */ jsxs(Box, { component: "h3", className: "panel-title", children: [
     /* @__PURE__ */ jsx(Box, { className: "pull-left", children: /* @__PURE__ */ jsx(

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

@@ -64,7 +64,7 @@ const useDynamicColumns = ({
       dynamicColumns: columnsWithListener,
       isDynamicTable: true
     };
-  }, [dataset, children, listener]);
+  }, [dataset, children]);
   return { dynamicColumns, isDynamicTable };
 };
 var useDynamicColumns_default = useDynamicColumns;