@wavemaker-ai/react-runtime 1.0.0-rc.330 → 1.0.0-rc.334

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

@@ -48,6 +48,8 @@ import {
   useHTMLValidationProps,
   useExternalDataSync
 } from "./hooks";
+const ALWAYS_MULTI_VALUE_WIDGETS = ["WmChips", "WmCheckboxset"];
+const MULTI_SELECT_WIDGET = "WmSelect";
 const withFormController = (WrappedComponent) => {
   const WithFormControllerComponent = memo((props) => {
     const _a = props, {
@@ -121,6 +123,9 @@ const withFormController = (WrappedComponent) => {
     useDefaultValueSync(defaultvalue, datavalue, fieldRef);
     const widget = WrappedComponent == null ? void 0 : WrappedComponent.displayName;
     const ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget != null ? widget : "");
+    const isMultipleSelect = widget === MULTI_SELECT_WIDGET && props.multiple == true;
+    const isMultiValueWidget = ALWAYS_MULTI_VALUE_WIDGETS.includes(widget != null ? widget : "") || isMultipleSelect;
+    const fallbackDefaultValue = isMultiValueWidget && defaultvalue === void 0 ? [] : defaultvalue;
     const validationRules = useValidationRules(
       validationType,
       validators,
@@ -172,6 +177,10 @@ const withFormController = (WrappedComponent) => {
         trigger(effectiveFormKey);
       }
     }, [customValidationMsg]);
+    const onChangeRef = useRef(props.onChange);
+    useEffect(() => {
+      onChangeRef.current = props.onChange;
+    }, [props.onChange]);
     const createOnChangeHandler = useCallback(
       (field) => {
         return (e, componentProps, newValue, oldValue, isValid) => {
@@ -199,7 +208,7 @@ const withFormController = (WrappedComponent) => {
             setTouched(true);
             trigger(effectiveFormKey);
           }
-          (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e, componentProps, newValue, oldValue);
+          (_a2 = onChangeRef.current) == null ? void 0 : _a2.call(onChangeRef, e, componentProps, newValue, oldValue);
         };
       },
       [type, props.datafield, updateon, effectiveFormKey]
@@ -231,12 +240,13 @@ const withFormController = (WrappedComponent) => {
         control: formRef.control,
         name: effectiveFormKey,
         rules: validationRules,
-        defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
+        defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : fallbackDefaultValue,
         render: ({ field, fieldState }) => {
-          var _a2, _b;
+          var _a2, _b, _c;
           fieldRef.current = field;
           const processedValue = processFieldValue(field.value, type, props.datafield);
           const errorState = getErrorState(fieldState, validationType, touched);
+          const isExplicitFormField = props.formfield === true || props.formfield === "true";
           let valueToUse;
           if (processedValue !== void 0) {
             valueToUse = processedValue;
@@ -292,8 +302,8 @@ const withFormController = (WrappedComponent) => {
                   delete remapped.displayValue;
                 }
                 props.onChangeHandler(name2, remapped);
-              } : props.onChangeHandler,
-              Widgets: ((_a2 = props.listener) == null ? void 0 : _a2.Widgets) || {}
+              } : props.onChangeHandler || ((_a2 = props.listener) == null ? void 0 : _a2.onChange),
+              Widgets: ((_b = props.listener) == null ? void 0 : _b.Widgets) || {}
             }
           });
           return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -321,11 +331,14 @@ const withFormController = (WrappedComponent) => {
                       value = JSON.stringify(value);
                     }
                   }
+                  if (value && typeof value === "object") {
+                    value = JSON.stringify(value);
+                  }
                   return value;
                 })()
               }
             ),
-            shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
+            isExplicitFormField && shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
               "p",
               {
                 className: "help-block text-danger",
@@ -336,7 +349,7 @@ const withFormController = (WrappedComponent) => {
                   textAlign: "start",
                   width: "100%"
                 },
-                children: (_b = fieldState.error) == null ? void 0 : _b.message
+                children: (_c = fieldState.error) == null ? void 0 : _c.message
               }
             )
           ] });

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

@@ -37,7 +37,7 @@ const DATASET_SYNC_KEYS = [
 ];
 const WmFormField = memo(
   (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const { show = true, deferload } = props;
     const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
       show: show == null ? void 0 : show.toString(),
@@ -48,7 +48,7 @@ const WmFormField = memo(
     const formProxy = useWidgetProxy(`${props.formName}`);
     const overriddenItemsRef = useRef({});
     const fieldKey = props.formKey || props.name;
-    const defaultValueRegisteredRef = useRef(false);
+    const prevDefaultValueRef = useRef(props.defaultvalue);
     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 || ((_c = props.formRef) == null ? void 0 : _c.name) === props.formName;
     const reset = useCallback(
@@ -81,27 +81,43 @@ const WmFormField = memo(
         formProxy.formWidgets = {};
         formProxy.formfields = {};
       }
-      const mutableTarget = __spreadProps(__spreadValues({}, props), { reset, show, deferload });
+      const mutableTarget = __spreadProps(__spreadValues({}, props), {
+        reset,
+        show,
+        deferload,
+        fieldValidations: {
+          validate: () => {
+            var _a2;
+            if (fieldKey && typeof ((_a2 = props.formRef) == null ? void 0 : _a2.trigger) === "function") {
+              props.formRef.trigger(fieldKey);
+            }
+          }
+        }
+      });
       const fieldProxy = createFormFieldProxy(
         mutableTarget,
         setProxyProps,
         overriddenItemsRef,
-        formProxy
+        formProxy,
+        props.formRef
       );
       fieldProxyRef.current = fieldProxy;
     }, [formReady]);
     useEffect(() => {
       if (!formReady || !fieldProxyRef.current) return;
-      if (defaultValueRegisteredRef.current) return;
-      defaultValueRegisteredRef.current = true;
+      if (prevDefaultValueRef.current === props.defaultvalue) return;
+      const valueUnset = fieldProxyRef.current.datavalue === void 0 || fieldProxyRef.current.datavalue === prevDefaultValueRef.current;
+      prevDefaultValueRef.current = props.defaultvalue;
+      if (!valueUnset) return;
       fieldProxyRef.current.datavalue = props.defaultvalue;
       fieldProxyRef.current.value = props.defaultvalue;
       fieldProxyRef.current.defaultvalue = props.defaultvalue;
-    }, [props.defaultvalue]);
+    }, [props.defaultvalue, formReady]);
     useEffect(() => {
-      var _a2;
       const fieldProxy = fieldProxyRef.current;
-      if (!fieldProxy || !((_a2 = props.dataset) == null ? void 0 : _a2.length)) return;
+      if (!fieldProxy) return;
+      const hasDataset = typeof props.dataset === "function" || props.dataset && props.dataset.length > 0;
+      if (!hasDataset) return;
       DATASET_SYNC_KEYS.forEach((key) => {
         const value = props[key];
         if (value != null && fieldProxy[key] !== value) {
@@ -110,20 +126,25 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c2, _d2, _e2, _f, _g, _h;
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       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: (_h = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _h.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_m = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _m.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+          // proxyProps snapshots onChange once at mount; nothing resyncs it, so a
+          // handler assigned after mount (e.g. from a page's onReady) is never seen
+          // unless we read the live prop here, same as onTrailingiconclick below.
+          onChange: props.onChange,
           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 = (_e2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e2.readonly) != null ? _f : props == null ? void 0 : props.readonly,
+          readonly: (_f = (_e = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e.readonly) != null ? _f : props == null ? void 0 : props.readonly,
           // BaseField derives this from live validators. A direct field-proxy write wins,
           // but never fall back to the initial proxyProps.required snapshot.
           required: (_g = overriddenItemsRef.current.required) != null ? _g : props.required,
+          displayname: (_h = overriddenItemsRef.current.displayname) != null ? _h : props.displayname,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -131,7 +152,11 @@ const WmFormField = memo(
           invalid,
           invalidCls,
           iswidget: "false",
-          onChangeHandler
+          onChangeHandler,
+          onTrailingiconclick: (_i = overriddenItemsRef.current.onTrailingiconclick) != null ? _i : props.onTrailingiconclick,
+          trailingiconurl: (_j = overriddenItemsRef.current.trailingiconurl) != null ? _j : props.trailingiconurl,
+          onLeadingiconclick: (_k = overriddenItemsRef.current.onLeadingiconclick) != null ? _k : props.onLeadingiconclick,
+          leadingiconurl: (_l = overriddenItemsRef.current.leadingiconurl) != null ? _l : props.leadingiconurl
         })) });
       } else {
         return null;
@@ -143,8 +168,8 @@ const WmFormField = memo(
       return null;
     }
     const isDeferLoad = deferload === true;
-    const showValue = ((_e = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _e.toString()) !== "false";
-    if ((!showValue || showfield) && isDeferLoad) {
+    const showValue = (showfield == null ? void 0 : showfield.toString()) !== "false";
+    if (!showValue && isDeferLoad) {
       return null;
     }
     const shouldHide = !showValue && !isDeferLoad;

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

@@ -146,9 +146,9 @@ export interface FormFieldProps {
      */
     displaylabel?: string;
     /**
-     * The collection of data items for the field.
+     * The collection of data items for the field, or a thunk returning them.
      */
-    dataset?: any[];
+    dataset?: any[] | (() => any[]);
     /**
      * Key to use for searching.
      */
@@ -206,6 +206,11 @@ export interface FormFieldProps {
     reset?: () => void;
     setValidationMessage?: (message: string) => void;
     disabled?: boolean;
+    trailingiconurl?: string;
+    onTrailingiconclick?: (...args: any[]) => void;
+    leadingiconurl?: string;
+    onLeadingiconclick?: (...args: any[]) => void;
+    onChange?: (...args: any[]) => void;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

package/components/data/list/components/ListItems.js

@@ -98,8 +98,6 @@ const ListItems = ({
     if (onBeforedatarender && widgetInstance) {
       onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
     }
-  }, [rawCurrentItemsKey, groupby]);
-  useEffect(() => {
     if (onRender) {
       if (groupby) {
         const currentPageGroupedItems = paginatedGroupedData.reduce((acc, group) => {
@@ -110,7 +108,7 @@ const ListItems = ({
         onRender(widgetInstance, currentPageItems.currentItems);
       }
     }
-  }, []);
+  }, [rawCurrentItemsKey, groupby, currentPage]);
   const totalGroupedItems = useMemo(() => {
     if (!groupedData || !Array.isArray(groupedData)) return 0;
     return groupedData.reduce((total, group) => {

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

@@ -84,6 +84,7 @@ declare const WmListStandalone: React.ComponentType<{
     datavalue?: any;
     width?: number | string;
     height?: number | string;
+    class?: string;
     animation?: string;
     show?: boolean | string;
     padding?: string;
@@ -139,6 +140,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/data/list/index.js

@@ -182,7 +182,7 @@ const WmList = (props) => {
   }
   const safeDataset = useMemo(() => {
     return addUniqueRowIds(resolvedDataset, { type: "list" });
-  }, [currentDataset]);
+  }, [currentDataset, dataset]);
   const [initialRender, setinitialRender] = useState(true);
   const userInitiatedSelectionRef = React.useRef(false);
   const listScrollContainerRef = useRef(null);
@@ -393,7 +393,7 @@ const WmList = (props) => {
     } else {
       widgetMethods.selectItem(selecteditem);
     }
-  }, [selecteditem, widgetMethods, listState]);
+  }, [selecteditem]);
   useListEffects({
     name,
     navigation,
@@ -512,18 +512,13 @@ const WmList = (props) => {
   return /* @__PURE__ */ jsxs(
     Box,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      className: clsx(
-        DEFAULT_CLS,
-        "wm-position-relative",
-        className,
-        hidden && "wm-hidden",
-        wrapper_autoLayout_Classes
-      ),
+      className: clsx(DEFAULT_CLS, "wm-position-relative", className, wrapper_autoLayout_Classes),
       component: "div",
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
-      ref: ListWrapperRef
+      ref: ListWrapperRef,
+      hidden
     }), direction ? { direction } : {}), {
       children: [
         /* @__PURE__ */ jsx(
@@ -649,7 +644,7 @@ const WmList = (props) => {
                   listDirection: direction,
                   scrollContainerRef: listScrollContainerRef,
                   sentinelRef: scrollSentinelRef,
-                  orderedDataset: groupby ? Array(paginationState.totalItems).fill(null) : items,
+                  orderedDataset: groupby && navigation !== LIST_NAVIGATION_TYPES.SCROLL ? Array(paginationState.totalItems).fill(null) : items,
                   pagesize: paginationState.currentPageSize,
                   navigationalign,
                   showrecordcount,

package/components/data/pagination/hooks/usePagination.js

@@ -381,7 +381,7 @@ const usePagination = ({
           const updatedMaxResults = newMaxResults || prev.currentMaxResults;
           const updatedDataSize = newDataSize !== void 0 ? newDataSize : prev.dataSize;
           const updatedCurrentPage = currentPage !== void 0 ? currentPage : prev.currentPage;
-          const newPageCount = (paginationMeta == null ? void 0 : paginationMeta.totalPages) !== void 0 && (paginationMeta == null ? void 0 : paginationMeta.totalPages) > 1 ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
+          const newPageCount = (paginationMeta == null ? void 0 : paginationMeta.totalPages) !== void 0 && (isServerSidePagination || paginationMeta.totalPages > 1) ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
           return __spreadProps(__spreadValues({}, prev), {
             currentPage: updatedCurrentPage,
             dataSize: updatedDataSize,
@@ -390,7 +390,7 @@ const usePagination = ({
         }
       });
     },
-    [paginationMeta]
+    [isServerSidePagination, paginationMeta]
   );
   const disableNavigation = useCallback(() => {
     setDisableStates({
@@ -530,7 +530,7 @@ const usePagination = ({
       }
       setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: newPage }));
       if (isServerSidePagination) {
-        datasourceInvoke(newPage).then(() => {
+        datasourceInvoke(newPage).then((response) => {
           if (onPaginationChange) {
             onPaginationChange(
               event || createDummyEvent("paginationchange"),
@@ -541,7 +541,7 @@ const usePagination = ({
           if (onSetRecord) {
             const firstRow = (newPage - 1) * paginationState.currentMaxResults;
             const startIndex = firstRow;
-            const data = isArray(dataState.fullData) ? dataState.fullData.slice(
+            const data = response && isArray(response.data) ? addUniqueRowIds(response.data) : isArray(dataState.fullData) ? dataState.fullData.slice(
               startIndex,
               startIndex + paginationState.currentMaxResults
             ) : dataState.fullData;
@@ -551,7 +551,7 @@ const usePagination = ({
               totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
               totalPages: paginationState.pageCount
             };
-            onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+            onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
           }
           if (setIsLoadingMore) {
             setIsLoadingMore(false);
@@ -582,7 +582,7 @@ const usePagination = ({
             totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
             totalPages: paginationState.pageCount
           };
-          onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+          onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
         }
         if (setIsLoadingMore) {
           setIsLoadingMore(false);
@@ -679,7 +679,7 @@ const usePagination = ({
           totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || fullData.length,
           totalPages: pageCount
         };
-        onSetRecord(event, widgetInstance, data, pageInfo);
+        onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
       }
       goToPage();
     },
@@ -737,7 +737,7 @@ const usePagination = ({
               totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
               totalPages: newPageCount
             };
-            onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+            onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
           }
           if (setIsLoadingMore) {
             setIsLoadingMore(false);

package/components/data/table/components/RowExpansionButton.js

@@ -49,7 +49,11 @@ const RowExpansionButton = ({
     "aria-label": ariaLabel,
     "aria-expanded": isExpanded,
     "aria-live": "polite",
-    tabIndex: 0
+    tabIndex: 0,
+    styles: __spreadValues({
+      minWidth: 0,
+      padding: 0
+    }, config.styles)
   };
   if (config.listener) {
     commonProps.listener = config.listener;

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

@@ -69,6 +69,8 @@ const ExpansionCell = memo(({ rowId, rowData, isExpanded, onToggle, config }) =>
       textAlign: "center",
       position: "relative",
       width: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
+      minWidth: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
+      maxWidth: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
       padding: "4px"
     },
     children: /* @__PURE__ */ jsx(Box, { component: "span", className: "row-expansion-column", "data-identifier": "rowExpansionButtons", children: /* @__PURE__ */ jsx(
@@ -109,7 +111,7 @@ const ExpandedContent = memo(({ rowId, rowData, config, colSpan, onInstanceLoad
   return /* @__PURE__ */ jsx(
     TableRow,
     {
-      className: "expanded-row-content",
+      className: "expanded-row-content app-datagrid-detail-row",
       "data-row-id": rowId,
       role: "row",
       tabIndex: 0,
@@ -121,6 +123,7 @@ const ExpandedContent = memo(({ rowId, rowData, config, colSpan, onInstanceLoad
           role: "cell",
           "data-col-id": "expanded-content",
           tabIndex: 0,
+          className: "app-datagrid-row-details-cell",
           style: {
             padding: "16px",
             borderBottom: "1px solid #e0e0e0"

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

@@ -68,7 +68,7 @@ const TableDataRowComponent = ({
     /* @__PURE__ */ jsx(
       TableRow,
       {
-        className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${rowClass}`,
+        className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${hasExpansion && rowIsExpanded ? "expanded" : ""} ${rowClass}`,
         onClick: handleClick,
         "data-row-id": row.index,
         role: "row",

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

@@ -147,6 +147,8 @@ const ExpansionHeaderCell = memo(
         rowSpan,
         style: __spreadValues({
           width: columnwidth || "50px",
+          minWidth: columnwidth || "50px",
+          maxWidth: columnwidth || "50px",
           padding: "8px",
           userSelect: "none"
         }, rest.style)
@@ -330,7 +332,7 @@ const TableHeaderComponent = memo(
                     role: "columnheader",
                     "data-col-id": headerIndex,
                     tabIndex: 0,
-                    "data-col-field": header.column.id,
+                    "data-col-field": "row-expansion",
                     columnwidth: rowExpansionConfig == null ? void 0 : rowExpansionConfig.columnwidth
                   },
                   `expansion-header-${headerIndex}`

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

@@ -62,7 +62,7 @@ const useFormWidget = ({ listener }) => {
       const sessionSuffix = (widgetProps == null ? void 0 : widgetProps.sessionKey) ? `_${widgetProps.sessionKey}` : "";
       const uniqueName = `edit_${fieldName}${sessionSuffix}`;
       const disabled = getDisabledValue(widgetProps == null ? void 0 : widgetProps.disabled, widgetProps == null ? void 0 : widgetProps.rowData);
-      const commonProps = __spreadValues({
+      const commonProps = __spreadProps(__spreadValues({}, widgetProps == null ? void 0 : widgetProps.column), {
         key: uniqueName,
         // Add key to force component recreation
         name: uniqueName,
@@ -84,7 +84,7 @@ const useFormWidget = ({ listener }) => {
         column: widgetProps == null ? void 0 : widgetProps.column,
         updateon: "blur",
         regexp: ((_a = widgetProps == null ? void 0 : widgetProps.column) == null ? void 0 : _a.regexp) || ".*"
-      }, widgetProps == null ? void 0 : widgetProps.column);
+      });
       const wrapEventHandler = (handler) => {
         return (event) => {
           handler(event, {}, widgetProps == null ? void 0 : widgetProps.rowData);

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

@@ -39,9 +39,14 @@ const usePanelStructure = ({
       showrecordcount
     ]
   );
+  const showFooter = useMemo(
+    () => showPagination || footerActions.length > 0,
+    [showPagination, footerActions]
+  );
   return {
     showPanelHeading,
-    showPagination
+    showPagination,
+    showFooter
   };
 };
 export {

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

@@ -52,6 +52,7 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     padding?: string;
     margin?: string;
     height?: number | string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { cleanRowData } from "../utils";
-import { getWidgetForCallback } from "../utils/selectionUtils";
+import { getWidgetForCallback, toNativeEvent } from "../utils/selectionUtils";
 const useRowHandlers = ({
   editingRowId,
   isAddingNewRow,
@@ -28,13 +28,14 @@ const useRowHandlers = ({
       if (widget) {
         widget.nativeElement = event.target;
       }
-      onRowclick(event, widget, cleanRowData(rowData));
+      onRowclick(toNativeEvent(event), widget, cleanRowData(rowData));
     },
     [onRowclick, getWidgetRef]
   );
   const handleRowClick = useCallback(
     (event, rowData, rowId) => {
       const hasSelectionMode = useRadioSelect || useMultiSelect;
+      invokeRowClick(event, rowData);
       let isSelectionHandled = false;
       if (hasSelectionMode && isrowselectable) {
         isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
@@ -47,7 +48,6 @@ const useRowHandlers = ({
         return;
       }
       handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
-      invokeRowClick(event, rowData);
     },
     [
       editingRowId,

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

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   isInteractiveElement,
+  isSelectionCheckboxRenamed,
   getRowIdsFromDataset,
   rowExistsInDataset,
   selectionStateHelpers,
-  getWidgetForCallback
+  getWidgetForCallback,
+  toNativeEvent,
+  createSelectionEventStub
 } from "../utils/selectionUtils";
 import { saveTableState, getTableState } from "../utils/table-helpers";
 import { cleanRowData, UNSUPPORTED_STATE_PERSISTENCE_TYPES } from "../utils";
@@ -138,16 +141,17 @@ const useRowSelection = ({
   );
   const triggerSelectionCallback = useCallback(
     (event, rowData, callback) => {
+      var _a;
       if (callback && rowData) {
         const widget = getWidgetRef();
         const cleanedRow = cleanRowData([rowData])[0];
-        callback(event, widget, cleanedRow);
+        callback((_a = toNativeEvent(event)) != null ? _a : createSelectionEventStub(), widget, cleanedRow);
       }
     },
     [getWidgetRef]
   );
   const handleRadioSelection = useCallback(
-    (rowId, rowData) => {
+    (rowId, rowData, event) => {
       const previousSelection = selectionStateHelpers.getSelection(cellState);
       const previousRowId = previousSelection.length > 0 ? previousSelection[0] : null;
       let previousRowData = null;
@@ -159,9 +163,9 @@ const useRowSelection = ({
       selectionStateHelpers.setSelection(cellState, rowId);
       commitSelectionChange();
       if (previousRowData) {
-        triggerSelectionCallback(null, previousRowData, onRowdeselect);
+        triggerSelectionCallback(event, previousRowData, onRowdeselect);
       }
-      triggerSelectionCallback(null, rowData, onRowselect);
+      triggerSelectionCallback(event, rowData, onRowselect);
     },
     [
       cellState,
@@ -173,19 +177,20 @@ const useRowSelection = ({
     ]
   );
   const handleMultiSelection = useCallback(
-    (rowId, rowData, isSelected) => {
+    (rowId, rowData, isSelected, event) => {
       if (isSelected) {
         selectionStateHelpers.addToSelection(cellState, rowId);
       } else {
         selectionStateHelpers.removeFromSelection(cellState, rowId);
       }
       commitSelectionChange();
-      triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
+      triggerSelectionCallback(event, rowData, isSelected ? onRowselect : onRowdeselect);
     },
     [cellState, commitSelectionChange, onRowselect, onRowdeselect, triggerSelectionCallback]
   );
   const handleSelectAll = useCallback(
-    (isSelected) => {
+    (isSelected, event) => {
+      var _a;
       let newIds = [];
       if (isSelected) {
         newIds = getRowIdsFromDataset(datasetRef.current);
@@ -197,9 +202,10 @@ const useRowSelection = ({
       const rows = datasetRef.current;
       const callback = isSelected ? onRowselect : onRowdeselect;
       if (callback && rows.length > 0) {
+        const sharedEvent = (_a = toNativeEvent(event)) != null ? _a : createSelectionEventStub();
         rows.forEach((row) => {
           const cleanedRow = cleanRowData([row])[0];
-          callback(null, getWidgetRef(), cleanedRow);
+          callback(sharedEvent, getWidgetRef(), cleanedRow);
         });
       }
     },
@@ -212,10 +218,13 @@ const useRowSelection = ({
       }
       if (useMultiSelect) {
         const isCurrentlySelected = selectionStateHelpers.isRowSelected(cellState, rowId);
-        const willBeSelected = !isCurrentlySelected;
-        selectionStateHelpers.toggleSelection(cellState, rowId);
+        const isToggled = !isSelectionCheckboxRenamed(event);
+        if (isToggled) {
+          selectionStateHelpers.toggleSelection(cellState, rowId);
+        }
+        const isSelected = isToggled ? !isCurrentlySelected : isCurrentlySelected;
         commitSelectionChange();
-        triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
+        triggerSelectionCallback(event, rowData, isSelected ? onRowselect : onRowdeselect);
         return true;
       }
       handleRadioSelection(rowId, rowData);
@@ -274,7 +283,7 @@ const useRowSelection = ({
       applySelectionForMode([firstRowId]);
       forceUpdate({});
       if (onRowselect) {
-        triggerSelectionCallback(null, firstRowData, onRowselect);
+        triggerSelectionCallback(void 0, firstRowData, onRowselect);
       }
     }
   }, [