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

package/actions/notification-action.js

@@ -44,12 +44,12 @@ class NotificationAction extends BaseAction {
     return this.invoke(arg1, arg2, arg3);
   }
   prepareToastOptions(params = {}) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const configParams = this.config.paramProvider();
     const mergedParams = __spreadValues(__spreadValues({}, configParams), params);
     const alertClass = (_b = (_a = String(mergedParams.class)) == null ? void 0 : _a.toLowerCase()) != null ? _b : "info";
     const type = NOTIFICATION_TYPE[alertClass] || "info";
-    const position = (_c = mergedParams.toasterPosition) != null ? _c : "bottom right";
+    const position = (_d = (_c = mergedParams.position) != null ? _c : mergedParams.toasterPosition) != null ? _d : "bottom right";
     let duration = parseInt(String(mergedParams.duration));
     if (isNaN(duration)) {
       duration = type === "success" ? DEFAULT_DURATION : null;
@@ -63,7 +63,7 @@ class NotificationAction extends BaseAction {
       name: this.name,
       styles: mergedParams.styles || {},
       hideOnClick: mergedParams.hideOnClick !== false,
-      showTypeLabel: (_d = mergedParams.showTypeLabel) != null ? _d : false,
+      showTypeLabel: (_e = mergedParams.showTypeLabel) != null ? _e : false,
       onClose: () => {
         if (this.config.onClose) {
           this.config.onClose(this, null);

package/actions/toast.js

@@ -90,7 +90,8 @@ const CustomToast = ({ toast, onClose }) => {
       onClick: handleClick,
       sx: {
         "& .MuiSnackbarContent-root": {
-          alignItems: "unset !important"
+          alignItems: "unset !important",
+          minWidth: "unset"
         },
         "& .MuiSnackbar-root": {
           all: "unset !important"

package/components/basic/message/index.js

@@ -80,6 +80,7 @@ const WmMessage = memo(
           className
         ),
         title: caption,
+        name,
         children: [
           /* @__PURE__ */ jsx(
             Box,

package/components/basic/search/index.js

@@ -729,18 +729,16 @@ const Search = React.forwardRef((props, ref) => {
     }
   };
   const handleFocus = (event) => {
-    if (type === "autocomplete") {
-      if (formattedDataset.length > 0 && !selectedItem) {
-        setIsOpen(true);
-        setMenuOpen(true);
-      } else if (normalizedData && normalizedData.length > 0) {
-        setFormattedDataset(normalizedData);
-        if (props == null ? void 0 : props.groupby) {
-          setGroupedData(getGroupedData(normalizedData));
-        }
-        setIsOpen(true);
-        setMenuOpen(true);
+    if (formattedDataset.length > 0 && !selectedItem) {
+      setIsOpen(true);
+      setMenuOpen(true);
+    } else if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
+      setFormattedDataset(normalizedData);
+      if (props == null ? void 0 : props.groupby) {
+        setGroupedData(getGroupedData(normalizedData));
       }
+      setIsOpen(true);
+      setMenuOpen(true);
     }
     if (onFocus && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
       onFocus(

package/components/basic/search/providers.d.ts

@@ -43,7 +43,7 @@ export declare class LocalDataProvider implements IDataProvider {
 }
 export declare class DataProvider {
     private localDataProvider;
-    init(component: any): any;
+    init(component: any): boolean;
     invokeVariable(component: any, query: string): Promise<any>;
     filter(config: DataProviderConfig): Promise<{
         data: any[];

package/components/basic/search/providers.js

@@ -194,10 +194,13 @@ class DataProvider {
   }
   // Check if the variable is of type service variable and whether update is required
   init(component) {
-    var _a, _b, _c;
-    let datasource = component == null ? void 0 : component.datasource;
+    const datasource = component == null ? void 0 : component.datasource;
     if (datasource && datasource.execute) {
-      return datasource.execute(DataSource.Operation.IS_PAGEABLE) || ((_c = (_b = (_a = datasource == null ? void 0 : datasource.serviceInfo) == null ? void 0 : _a.parameters) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
+      if (!datasource.execute(DataSource.Operation.IS_API_AWARE)) {
+        return false;
+      }
+      const hasData = !!((component == null ? void 0 : component.dataset) && component.dataset.length);
+      return !!datasource.execute(DataSource.Operation.IS_UPDATE_REQUIRED, hasData);
     }
     return false;
   }

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

@@ -43,6 +43,7 @@ const WmLayoutgrid = (props) => {
       style: styles,
       className: clsx(DEFAULT_CLASS, "wm-layout-grid-root", className)
     }, removeInvalidAttributes(restProps)), {
+      maxWidth: false,
       children
     })
   );

package/components/container/linear-layout/index.js

@@ -46,7 +46,6 @@ function WmLinearLayout(props) {
   } = props;
   const computedStyles = useMemo(() => {
     const flexStyles = __spreadProps(__spreadValues({}, styles), {
-      display: "flex",
       flexDirection: direction
     });
     if (direction === "row" || direction === "row-reverse") {

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

@@ -1,4 +1,5 @@
 import { useState, useCallback } from "react";
+import { getFormFieldEntries } from "../../../../../core/proxy-service";
 import { cleanNullValues } from "../utils";
 import { usesPrefixedFields } from "../props";
 function useFormOperations({
@@ -22,25 +23,18 @@ function useFormOperations({
   const formreset = useCallback(async () => {
     const cleanedData = {};
     const formNamePrefix = `${formName}.`;
-    Object.keys(formfields).forEach((key) => {
-      var _a, _b;
-      if (formfields[key].formName !== formName) return;
+    getFormFieldEntries(formfields).forEach(({ key, field }) => {
+      if (field.formName !== formName) return;
       if (key.endsWith("_formWidget")) return;
-      let fieldKey = key;
-      if (hasPrefixedFields) {
-        if (key.startsWith(formNamePrefix)) {
-          fieldKey = key.substring(formNamePrefix.length);
-        } else {
-          return;
-        }
-      }
-      if (formfields[key].readonly || formfields[key].readOnly || formfields[key].disabled) {
-        cleanedData[fieldKey] = formfields[key].defaultvalue || formfields[key].value;
+      if (hasPrefixedFields && !key.startsWith(formNamePrefix)) return;
+      const fieldKey = hasPrefixedFields ? key.slice(formNamePrefix.length) : key;
+      if (field.readonly || field.readOnly || field.disabled) {
+        cleanedData[fieldKey] = field.defaultvalue || field.value;
       } else {
         cleanedData[fieldKey] = "";
+        field.datavalue = "";
       }
-      const isRange = ((_a = formfields[key]) == null ? void 0 : _a.isRange) === true || ((_b = formfields[key]) == null ? void 0 : _b.isRange) === "true";
-      if (widgetFormType === "live-filter" && isRange) {
+      if (widgetFormType === "live-filter" && (field.isRange === true || field.isRange === "true")) {
         cleanedData[`${fieldKey}_maxWidget`] = "";
       }
     });

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

@@ -50,6 +50,7 @@ import {
   usesPrefixedFields
 } from "./hooks";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import { getFormFieldList } from "../../../../core/proxy-service";
 import {
   useAppNotificationAction,
   useNotifyApp
@@ -357,6 +358,11 @@ const BaseForm = (WrappedComponent) => {
       widgetFormType: props["form-type"],
       debouncedFilter
     });
+    const formreset = useCallback(async () => {
+      var _a2;
+      await formresetFn();
+      (_a2 = props.onReset) == null ? void 0 : _a2.call(props);
+    }, [formresetFn, props.onReset]);
     const clearFilter = useMemo(
       () => handleSubmit((data, e) => {
         e == null ? void 0 : e.preventDefault();
@@ -380,7 +386,6 @@ const BaseForm = (WrappedComponent) => {
       setShowViewMode(true);
       formresetFn();
     }, [setShowViewMode, props.cancel, formresetFn]);
-    const getFieldValue = useCallback((fieldName) => watch(fieldName), [watch]);
     const highlightInvalidFields = useCallback(async () => {
       await validateFieldsOnSubmit();
     }, [validateFieldsOnSubmit]);
@@ -454,16 +459,13 @@ const BaseForm = (WrappedComponent) => {
       const registerFn = parentFormDataContext == null ? void 0 : parentFormDataContext.registerChildField;
       if (!registerFn || !formName) return;
       const widgetFormFields = getWidgetFormFields(listener, formName);
-      const formFieldsToRegister = widgetFormFields || formfields;
-      Object.entries(formFieldsToRegister).forEach(([key, widget]) => {
-        if (key.includes("formWidget")) return;
-        const typedWidget = widget;
-        const formKey = (typedWidget == null ? void 0 : typedWidget.formKey) || (typedWidget == null ? void 0 : typedWidget.fieldName) || key;
-        const fieldName = (typedWidget == null ? void 0 : typedWidget.fieldName) || key;
+      getFormFieldList(widgetFormFields || formfields).forEach((field) => {
+        const fieldName = (field == null ? void 0 : field.fieldName) || (field == null ? void 0 : field.name);
+        if (!fieldName) return;
         registerFn({
           childFormName: formName,
-          widget,
-          formKey,
+          widget: field,
+          formKey: (field == null ? void 0 : field.formKey) || fieldName,
           fieldName
         });
       });
@@ -532,8 +534,7 @@ const BaseForm = (WrappedComponent) => {
     useEffect(() => {
       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]);
+      const currentFields = getFormFieldList(formProxy == null ? void 0 : formProxy.formfields);
       if (currentFields.length > 0) {
         onDataSourceChangeFiredRef.current = true;
         props.onDataSourceChange(currentFields);
@@ -588,7 +589,8 @@ const BaseForm = (WrappedComponent) => {
         showViewMode,
         formdata: computedFormdata,
         submit,
-        formreset: formresetFn
+        formreset,
+        setValue
       }),
       [
         updateFormData,
@@ -608,13 +610,14 @@ const BaseForm = (WrappedComponent) => {
         showViewMode,
         computedFormdata,
         submit,
-        formresetFn
+        formreset,
+        setValue
       ]
     );
     const conditionalProps = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props.target && { target: props.target }), props.method && { method: props.method }), props.encType && { encType: props.encType }), props.action && { action: props.action });
     const formProps = __spreadProps(__spreadValues(__spreadValues({}, props), conditionalProps), {
       submit,
-      formreset: formresetFn,
+      formreset,
       formfields,
       formWidgets: formfields,
       headerActions,

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

@@ -29,6 +29,7 @@ import {
   some
 } from "lodash-es";
 import { REGEX } from "./constant";
+import { defineFieldAlias } from "../../../../core/proxy-service";
 let userAgent = "";
 if (typeof window !== "undefined") {
   userAgent = window.navigator.userAgent;
@@ -272,10 +273,10 @@ const registerChildFieldInWidget = (listener, formName, data) => {
   const parentFormContext = listener.Widgets[formName];
   parentFormContext.formfields = parentFormContext.formfields || {};
   parentFormContext.formWidgets = parentFormContext.formWidgets || {};
-  parentFormContext.formfields[formKey] = widget;
-  parentFormContext.formWidgets[fieldName] = widget;
-  parentFormContext.formfields[`${fieldName}_formWidget`] = widget;
-  parentFormContext.formWidgets[`${fieldName}_formWidget`] = widget;
+  const { formfields, formWidgets } = parentFormContext;
+  formfields[formKey] = widget;
+  formWidgets[fieldName] = widget;
+  defineFieldAlias(`${fieldName}_formWidget`, widget, formfields, formWidgets);
 };
 export {
   cleanNullValues,

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

@@ -1,5 +1,5 @@
 declare const WmFormActionsStandalone: import("react").ComponentType<{
-    onClick: ((event: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onClick: ((event: any, widget?: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
     formKey: string;
     name: string;
     displayName: string;
@@ -75,7 +75,7 @@ export { WmFormActionsStandalone as WmFormAction };
  * @param props - {@link WmFormActionsProps}
  */
 declare const _default: import("react").ComponentType<{
-    onClick: ((event: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onClick: ((event: any, widget?: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
     formKey: string;
     name: string;
     displayName: string;

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

@@ -59,7 +59,7 @@ const WmFormActions = memo((props) => {
   const isheaderaction = position === "header" && !headeraction;
   const formRef = useFormContext();
   const handleClick = useCallback(
-    (event) => {
+    (event, widget) => {
       var _a2, _b2, _c;
       if (props.standalone) {
         if (type === "submit") {
@@ -68,7 +68,7 @@ const WmFormActions = memo((props) => {
           (_b2 = formRef == null ? void 0 : formRef.formreset) == null ? void 0 : _b2.call(formRef);
         }
       }
-      (_c = props.onClick) == null ? void 0 : _c.call(props, event);
+      (_c = props.onClick) == null ? void 0 : _c.call(props, event, widget);
     },
     [formRef, props.onClick, type]
   );

package/components/data/form/form-context.d.ts

@@ -1,27 +1,26 @@
 import React from "react";
+import type { UseFormSetValue } from "react-hook-form";
 export interface FormContextValue {
-    updateFormData?: (data: any) => void;
     control?: any;
     watch?: any;
-    registerFormField?: (formKey: string, fieldName: string, fieldInstance: any) => void;
-    registerFormWidget?: (widgetName: string, widgetInstance: any) => void;
-    registerHeaderAction?: (actionName: string, action: any) => void;
-    onChangeHandler?: (fieldName: string, value: any) => void;
-    getFieldValue?: (fieldName: string) => any;
     trigger?: any;
     errors?: any;
-    name?: string;
+    setValue?: UseFormSetValue<any>;
+    submitCount?: number;
+    submit?: (e?: any) => Promise<boolean | undefined>;
+    formreset?: () => Promise<void>;
+    updateFormData?: (data: any) => void;
+    onChangeHandler?: (fieldName: string, value: any) => void;
+    registerFormWidget?: (widgetName: string, widgetInstance: any) => void;
+    registerHeaderAction?: (actionName: string, action: any) => void;
     captionposition?: string;
     captionCls?: string;
     widgetCls?: string;
-    validationtype?: string;
+    itemsPerRow?: string;
     isViewMode?: boolean;
-    resetField?: (fieldName: string) => void;
-    submitCount?: number;
+    name?: string;
+    validationtype?: string;
     ref?: any;
-    itemsPerRow?: string;
-    submit?: (e?: any) => Promise<boolean | undefined>;
-    formreset?: () => Promise<void>;
 }
 declare const FormContext: React.Context<FormContextValue>;
 /**

package/components/data/form/form-context.js

@@ -18,17 +18,15 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 const FormContext = createContext(null);
 const ParentFormDataContext = createContext(null);
 const useParentFormData = () => useContext(ParentFormDataContext);
 const FormProvider = ({ value, isViewMode, children }) => {
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: __spreadProps(__spreadValues({}, value), { isViewMode }), children });
-};
-const useFormContext = () => {
-  const context = useContext(FormContext);
-  return context;
+  const contextValue = useMemo(() => __spreadProps(__spreadValues({}, value), { isViewMode }), [value, isViewMode]);
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children });
 };
+const useFormContext = () => useContext(FormContext);
 const useIsViewMode = () => {
   const context = useFormContext();
   return context == null ? void 0 : context.isViewMode;

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

@@ -233,7 +233,7 @@ const withFormController = (WrappedComponent) => {
         rules: validationRules,
         defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
         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);
@@ -292,8 +292,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: [
@@ -336,7 +336,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(),
@@ -86,7 +86,8 @@ const WmFormField = memo(
         mutableTarget,
         setProxyProps,
         overriddenItemsRef,
-        formProxy
+        formProxy,
+        props.formRef
       );
       fieldProxyRef.current = fieldProxy;
     }, [formReady]);
@@ -110,7 +111,7 @@ 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;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
         const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
@@ -120,7 +121,7 @@ const WmFormField = memo(
         return /* @__PURE__ */ jsx(Fragment, { children: (_h = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _h.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 = (_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,
@@ -143,7 +144,7 @@ const WmFormField = memo(
       return null;
     }
     const isDeferLoad = deferload === true;
-    const showValue = ((_e = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _e.toString()) !== "false";
+    const showValue = (showfield == null ? void 0 : showfield.toString()) !== "false";
     if ((!showValue || showfield) && isDeferLoad) {
       return null;
     }

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.js

@@ -393,7 +393,7 @@ const WmList = (props) => {
     } else {
       widgetMethods.selectItem(selecteditem);
     }
-  }, [selecteditem, widgetMethods, listState]);
+  }, [selecteditem]);
   useListEffects({
     name,
     navigation,
@@ -649,7 +649,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

@@ -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;

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

@@ -109,7 +109,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 +121,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/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,7 +28,7 @@ const useRowHandlers = ({
       if (widget) {
         widget.nativeElement = event.target;
       }
-      onRowclick(event, widget, cleanRowData(rowData));
+      onRowclick(toNativeEvent(event), widget, cleanRowData(rowData));
     },
     [onRowclick, getWidgetRef]
   );

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

@@ -4,7 +4,9 @@ import {
   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 +140,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 +162,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 +176,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 +201,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);
         });
       }
     },
@@ -274,7 +279,7 @@ const useRowSelection = ({
       applySelectionForMode([firstRowId]);
       forceUpdate({});
       if (onRowselect) {
-        triggerSelectionCallback(null, firstRowData, onRowselect);
+        triggerSelectionCallback(void 0, firstRowData, onRowselect);
       }
     }
   }, [