@wavemaker/react-runtime 11.15.3-rc.647481 → 11.15.4-rc.250

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

@@ -1,9 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractDynamicValidationProps = extractDynamicValidationProps;
+exports.shouldShowErrorMessage = exports.processFieldValue = exports.getErrorState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+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; }
 function resolveValue(value) {
   if (value === null || value === undefined) return undefined;
   if (typeof value === "function") {
@@ -81,4 +87,49 @@ function extractDynamicValidationProps(validators, rules) {
     result.excludedays = result.excludedays.join(",");
   }
   return result;
-}
+}
+
+// Utility functions
+var processFieldValue = exports.processFieldValue = function processFieldValue(fieldValue, type, datafield) {
+  // If fieldValue is an object and datafield is specified, extract the value
+  if (fieldValue && (0, _typeof2["default"])(fieldValue) === "object" && !Array.isArray(fieldValue) && datafield) {
+    fieldValue = datafield === "All Fields" ? fieldValue : fieldValue[datafield];
+  }
+  if (type === "number") {
+    return fieldValue === "" || fieldValue === null || fieldValue === undefined ? "" : fieldValue;
+  }
+  return fieldValue;
+};
+var getErrorState = exports.getErrorState = function getErrorState(fieldState, validationType, touched) {
+  switch (validationType) {
+    case "default":
+      return {
+        error: touched && !!fieldState.error,
+        errorMessage: touched && fieldState.error ? fieldState.error.message : undefined,
+        fieldState: fieldState
+      };
+    case "html":
+      return {
+        error: touched && !!fieldState.error,
+        errorMessage: touched && fieldState.error ? fieldState.error.message : undefined,
+        fieldState: fieldState
+      };
+    case "none":
+      return {
+        error: false,
+        errorMessage: undefined,
+        fieldState: _objectSpread(_objectSpread({}, fieldState), {}, {
+          error: undefined
+        })
+      };
+    default:
+      return {
+        error: false,
+        errorMessage: undefined,
+        fieldState: undefined
+      };
+  }
+};
+var shouldShowErrorMessage = exports.shouldShowErrorMessage = function shouldShowErrorMessage(validationType, fieldState, touched) {
+  return validationType !== "none" && (validationType === "default" && fieldState.error || validationType === "html" && fieldState.error);
+};

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

@@ -8,171 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactHookForm = require("react-hook-form");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _validationContrustor = require("@wavemaker/react-runtime/components/data/form/form-controller/validation-contrustor");
 var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 var _formContext = require("@wavemaker/react-runtime/components/data/form/form-context");
 var _utils = require("./utils");
+var _hooks = require("./hooks");
 var _excluded = ["formRef", "formKey", "name", "datavalue", "maxDataValue", "isMaxWidget", "defaultvalue", "validators", "asyncValidators", "required", "maxchars", "minvalue", "maxvalue", "regexp", "validationmessage", "hint", "type", "observe", "onBlur", "fieldName"];
 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" != _typeof3(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; }
 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; }
-// Custom hooks for better separation of concerns
-var useFormRegistration = function useFormRegistration(name, fieldProxy, contextFormRef) {
-  var hasRegisteredRef = (0, _react.useRef)(false);
-  (0, _react.useEffect)(function () {
-    if (contextFormRef !== null && contextFormRef !== void 0 && contextFormRef.registerFormWidget && fieldProxy && !hasRegisteredRef.current) {
-      contextFormRef.registerFormWidget(name, fieldProxy);
-      hasRegisteredRef.current = true;
-    }
-  }, [fieldProxy, name, contextFormRef]);
-};
-var useExternalDataSync = function useExternalDataSync(datavalue, fieldRef) {
-  (0, _react.useEffect)(function () {
-    if (fieldRef.current && datavalue !== undefined) {
-      var currentValue = fieldRef.current.value;
-      if (currentValue !== datavalue) {
-        fieldRef.current.onChange(datavalue);
-      }
-    }
-  }, [datavalue]);
-};
-var useDefaultValueSync = function useDefaultValueSync(defaultvalue, datavalue, fieldRef) {
-  var hasInitializedRef = (0, _react.useRef)(false);
-  (0, _react.useEffect)(function () {
-    // Only sync defaultvalue if:
-    // 1. We haven't initialized yet
-    // 2. There's a defaultvalue provided
-    // 3. There's no datavalue (datavalue takes precedence)
-    // 4. The field is registered
-    if (!hasInitializedRef.current && defaultvalue !== undefined && datavalue === undefined && fieldRef.current) {
-      var currentValue = fieldRef.current.value;
-      if (currentValue === undefined || currentValue === null || currentValue === "") {
-        fieldRef.current.onChange(defaultvalue);
-        hasInitializedRef.current = true;
-      }
-    }
-  }, [defaultvalue, datavalue]);
-};
-var useValidationRules = function useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, minvalue, maxvalue, form) {
-  if (validationType === "none") {
-    return {};
-  }
-  var combinedValidators = [].concat((0, _toConsumableArray2["default"])(validators || []), (0, _toConsumableArray2["default"])(asyncValidators || []));
-  var hasValidatorType = function hasValidatorType(type) {
-    return validators === null || validators === void 0 ? void 0 : validators.some(function (v) {
-      return typeof v !== "function" && v.type === type;
-    });
-  };
-  if (required && !hasValidatorType("required")) {
-    combinedValidators.push({
-      type: "required",
-      validator: true,
-      errorMessage: validationmessage || "This field is required"
-    });
-  }
-  if (maxchars !== undefined) {
-    combinedValidators.push({
-      type: "maxchars",
-      validator: maxchars,
-      errorMessage: validationmessage || "Maximum length is ".concat(maxchars, " characters.")
-    });
-  }
-  var normalizedMin = minvalue !== undefined && minvalue !== null && minvalue !== "" ? Number(minvalue) : undefined;
-  var normalizedMax = maxvalue !== undefined && maxvalue !== null && maxvalue !== "" ? Number(maxvalue) : undefined;
-  if (normalizedMin !== undefined && !Number.isNaN(normalizedMin)) {
-    combinedValidators.push({
-      type: "minvalue",
-      validator: normalizedMin,
-      errorMessage: validationmessage || "Value must be greater than or equal to ".concat(normalizedMin, ".")
-    });
-  }
-  if (normalizedMax !== undefined && !Number.isNaN(normalizedMax)) {
-    combinedValidators.push({
-      type: "maxvalue",
-      validator: normalizedMax,
-      errorMessage: validationmessage || "Value must be less than or equal to ".concat(normalizedMax, ".")
-    });
-  }
-  if (regexp) {
-    combinedValidators.push({
-      type: "regexp",
-      validator: regexp,
-      errorMessage: validationmessage || "Invalid format."
-    });
-  }
-  return (0, _validationContrustor.createValidationRules)(combinedValidators, form);
-};
-var useHTMLValidationProps = function useHTMLValidationProps(validationType, required, maxchars, regexp) {
-  return (0, _react.useMemo)(function () {
-    if (validationType !== "html") {
-      return {};
-    }
-    var htmlProps = {};
-    if (required) {
-      htmlProps.required = true;
-    }
-    if (maxchars) {
-      htmlProps.maxLength = maxchars;
-    }
-    if (regexp) {
-      htmlProps.pattern = typeof regexp === "string" ? regexp : regexp.source;
-    }
-    return htmlProps;
-  }, [validationType, required, maxchars, regexp]);
-};
-
-// Utility functions
-var processFieldValue = function processFieldValue(fieldValue, type, datafield) {
-  // If fieldValue is an object and datafield is specified, extract the value
-  if (fieldValue && (0, _typeof2["default"])(fieldValue) === "object" && !Array.isArray(fieldValue) && datafield) {
-    fieldValue = datafield === "All Fields" ? fieldValue : fieldValue[datafield];
-  }
-  if (type === "number") {
-    return fieldValue === "" || fieldValue === null || fieldValue === undefined ? "" : fieldValue;
-  }
-  return fieldValue;
-};
-var getErrorState = function getErrorState(fieldState, validationType, touched) {
-  switch (validationType) {
-    case "default":
-      return {
-        error: touched && !!fieldState.error,
-        errorMessage: touched && fieldState.error ? fieldState.error.message : undefined,
-        fieldState: fieldState
-      };
-    case "html":
-      return {
-        error: touched && !!fieldState.error,
-        errorMessage: touched && fieldState.error ? fieldState.error.message : undefined,
-        fieldState: fieldState
-      };
-    case "none":
-      return {
-        error: false,
-        errorMessage: undefined,
-        fieldState: _objectSpread(_objectSpread({}, fieldState), {}, {
-          error: undefined
-        })
-      };
-    default:
-      return {
-        error: false,
-        errorMessage: undefined,
-        fieldState: undefined
-      };
-  }
-};
-var shouldShowErrorMessage = function shouldShowErrorMessage(validationType, fieldState, touched) {
-  return validationType !== "none" && (validationType === "default" && fieldState.error || validationType === "html" && fieldState.error);
-};
-
 // HOC function
 var withFormController = function withFormController(WrappedComponent) {
   var WithFormControllerComponent = /*#__PURE__*/(0, _react.memo)(function (props) {
@@ -230,17 +79,16 @@ var withFormController = function withFormController(WrappedComponent) {
     var validationType = (form === null || form === void 0 ? void 0 : form.validationtype) || (formRef === null || formRef === void 0 ? void 0 : formRef.validationtype) || "default";
 
     // Custom hooks
-    useFormRegistration(name, fieldProxy, contextFormRef);
+    (0, _hooks.useFormRegistration)(name, fieldProxy, contextFormRef);
     // For max widgets: only sync maxdatavalue (don't sync datavalue as it shouldn't change)
     // For regular widgets: sync datavalue
     var syncValue = isMaxWidget ? maxDataValue !== undefined ? maxDataValue : undefined // Only sync maxDataValue for max widgets
     : datavalue !== undefined ? datavalue : undefined; // Sync datavalue for regular widgets
-    useExternalDataSync(syncValue, fieldRef);
-    useDefaultValueSync(defaultvalue, datavalue, fieldRef);
+    (0, _hooks.useDefaultValueSync)(defaultvalue, datavalue, fieldRef);
     // ignoring min/max range validation for Radioset and Checkboxset widgets
     var widget = WrappedComponent === null || WrappedComponent === void 0 ? void 0 : WrappedComponent.displayName;
     var ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget !== null && widget !== void 0 ? widget : "");
-    var validationRules = useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, ignoreRange ? undefined : minvalue, ignoreRange ? undefined : maxvalue, form);
+    var validationRules = (0, _hooks.useValidationRules)(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, ignoreRange ? undefined : minvalue, ignoreRange ? undefined : maxvalue, form);
     var rules = {
       required: required,
       maxchars: maxchars,
@@ -255,7 +103,7 @@ var withFormController = function withFormController(WrappedComponent) {
       maxdate: props.maxdate
     };
     var extractedValidatorProps = (0, _utils.extractDynamicValidationProps)(validators || [], rules);
-    var htmlValidationProps = useHTMLValidationProps(validationType, required, maxchars, regexp);
+    var htmlValidationProps = (0, _hooks.useHTMLValidationProps)(validationType, required, maxchars, regexp);
 
     // Update observeRef when observe changes
     (0, _react.useEffect)(function () {
@@ -348,8 +196,8 @@ var withFormController = function withFormController(WrappedComponent) {
         fieldRef.current = field;
 
         // Process field value and get error state
-        var processedValue = processFieldValue(field.value, type, props.datafield);
-        var errorState = getErrorState(fieldState, validationType, touched);
+        var processedValue = (0, _utils.processFieldValue)(field.value, type, props.datafield);
+        var errorState = (0, _utils.getErrorState)(fieldState, validationType, touched);
 
         // Determine the value to use with proper fallback chain
         // Priority: field.value (if not undefined) -> datavalue (if not undefined) -> defaultvalue
@@ -428,7 +276,7 @@ var withFormController = function withFormController(WrappedComponent) {
             }
           }
           return value;
-        }()), hint && !shouldShowErrorMessage(validationType, fieldState, touched) && __jsx("p", {
+        }()), hint && !(0, _utils.shouldShowErrorMessage)(validationType, fieldState, touched) && __jsx("p", {
           className: "help-block",
           "aria-hidden": "true",
           role: "alert",
@@ -437,7 +285,7 @@ var withFormController = function withFormController(WrappedComponent) {
             textAlign: "start",
             width: "100%"
           }
-        }, hint), shouldShowErrorMessage(validationType, fieldState, touched) && __jsx("p", {
+        }, hint), (0, _utils.shouldShowErrorMessage)(validationType, fieldState, touched) && __jsx("p", {
           className: "help-block text-danger",
           "aria-hidden": "false",
           role: "alert",

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _formBody = _interopRequireDefault(require("../form-body"));
+var _container = _interopRequireDefault(require("@wavemaker/react-runtime/components/container"));
+var _dynamicFields = _interopRequireDefault(require("../dynamic-fields"));
+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;
+var DYNAMIC_FORM_BODY_SUFFIX = "_dynamic_form_body";
+var DYNAMIC_FORM_CONTAINER_SUFFIX = "_dynamic_form_container";
+var DYNAMIC_FIELDS_SUFFIX = "_dynamic_fields";
+function FormDynamicFieldsSectionComponent(_ref) {
+  var formName = _ref.formName,
+    metadata = _ref.metadata,
+    listener = _ref.listener;
+  var formBodyName = formName + DYNAMIC_FORM_BODY_SUFFIX;
+  var containerName = formName + DYNAMIC_FORM_CONTAINER_SUFFIX;
+  var dynamicFieldsName = formName + DYNAMIC_FIELDS_SUFFIX;
+  return __jsx(_formBody["default"], {
+    name: formBodyName,
+    listener: listener,
+    "data-widget-id": "widget-".concat(formName, "-dynamic-body")
+  }, __jsx(_container["default"], {
+    name: containerName,
+    listener: listener,
+    "data-widget-id": "widget-".concat(formName, "-dynamic-container"),
+    className: "dynamic-form-container"
+  }, __jsx(_dynamicFields["default"], {
+    name: dynamicFieldsName,
+    metadata: metadata,
+    listener: listener,
+    "data-widget-id": "widget-".concat(formName, "-dynamic-fields")
+  })));
+}
+function propsAreEqual(prev, next) {
+  return prev.formName === next.formName && prev.metadata === next.metadata;
+}
+var FormDynamicFieldsSection = /*#__PURE__*/(0, _react.memo)(FormDynamicFieldsSectionComponent, propsAreEqual);
+FormDynamicFieldsSection.displayName = "FormDynamicFieldsSection";
+var _default = exports["default"] = FormDynamicFieldsSection;

package/components/data/form/form-dynamic-section/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/data/form/index.js

@@ -12,6 +12,7 @@ var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/
 var _message = require("@wavemaker/react-runtime/components/basic/message");
 var _baseForm = _interopRequireDefault(require("./base-form"));
 var _formHeader = _interopRequireDefault(require("./form-header"));
+var _formDynamicSection = _interopRequireDefault(require("./form-dynamic-section"));
 var _attr = require("@wavemaker/react-runtime/utils/attr");
 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; }
@@ -19,6 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var WmForm = function WmForm(props) {
   var _props$headerActions, _props$statusMessage, _props$statusMessage2, _props$statusMessage3, _props$statusMessage4;
   var shouldHideHeader = props.isLayoutDialog || props.isInsideWizard;
+  var shouldInjectDynamicFields = Array.isArray(props.metadata) && props.metadata.length > 0;
   return __jsx("form", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(props), {
     hidden: props.hidden || false,
     name: props.name,
@@ -51,6 +53,9 @@ var WmForm = function WmForm(props) {
     close: props === null || props === void 0 ? void 0 : props.clearMessage,
     name: "",
     listener: {}
+  }), shouldInjectDynamicFields && __jsx(_formDynamicSection["default"], {
+    formName: props.name,
+    metadata: props.metadata
   }), props.children);
 };
 WmForm.displayName = "WmForm";

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

@@ -10,6 +10,7 @@ var _react = require("react");
 var _constants = require("../utils/constants");
 var _listHelpers = require("../utils/list-helpers");
 var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
+var _widgetInstanceUtils = require("../utils/widget-instance-utils");
 var useListEffects = exports.useListEffects = function useListEffects(props) {
   var name = props.name,
     navigation = props.navigation,
@@ -185,7 +186,13 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
           // Delay onSelect to ensure it fires after onRender
           // onRender is called synchronously in the ListItems component
           var timer = setTimeout(function () {
-            onSelect(widgetInstance, listState.selectedItems[0]);
+            var selectedItem = listState.selectedItems[0];
+
+            // Attach context information to widget instance
+            if (selectedItem) {
+              (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, items, selectedItem);
+            }
+            onSelect(widgetInstance, selectedItem);
           }, 0);
           return function () {
             return clearTimeout(timer);
@@ -193,8 +200,7 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
         }
       }
     }
-  }, [selectfirstitem, listState.selectedItems]);
-
+  }, [selectfirstitem, listState.selectedItems, items]);
   // Effect 6: Handle selectfirstitem for grouped data
   (0, _react.useEffect)(function () {
     if (selectfirstitem && groupby && groupedData && groupedData.length > 0) {
@@ -210,6 +216,7 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
             // Delay onSelect to ensure it fires after onRender
             // onRender is called synchronously in the ListItems component
             var timer = setTimeout(function () {
+              (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, items, firstItemInGroup);
               onSelect(widgetInstance, firstItemInGroup);
             }, 0);
             return function () {

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _lodashEs = require("lodash-es");
 var _listHelpers = require("../utils/list-helpers");
 var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
+var _widgetInstanceUtils = require("../utils/widget-instance-utils");
 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; }
 /**
@@ -63,18 +64,15 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
 
   // Helper function to call onSelect and mark as user-initiated
   var callOnSelect = (0, _react.useCallback)(function (selectedItem) {
-    if (onSelect && widgetInstance) {
+    if (onSelect && widgetInstance && selectedItem) {
       if (userInitiatedSelectionRef) {
         userInitiatedSelectionRef.current = true;
       }
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(name, {
-          selecteditem: multiselect ? selectedItemsRef.current : selectedItem
-        });
-      }
+      // Set $index on widget instance
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, selectedItem);
       onSelect(widgetInstance, selectedItem);
     }
-  }, [onSelect, widgetInstance, userInitiatedSelectionRef]);
+  }, [onSelect, userInitiatedSelectionRef, items]);
   var handleListItemClick = (0, _react.useCallback)(function (event, item) {
     if (disableitem) return;
     var selectCount = selectedItems.length;
@@ -94,6 +92,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
           var end = (0, _lodashEs.max)([firstIndex, lastIndex]);
           var rangeCount = end - start + 1;
           if (selectionlimit > 0 && rangeCount > selectionlimit) {
+            (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
             onSelectionlimitexceed === null || onSelectionlimitexceed === void 0 || onSelectionlimitexceed(event, widgetInstance);
             return;
           }
@@ -105,6 +104,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
           if (!isItemActive) {
             callOnSelect(item); // 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
           return;
         }
@@ -113,6 +113,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       // Handle Ctrl+Click for individual item selection toggle
       if (event.ctrlKey) {
         if (selectionlimit > 0 && selectCount >= selectionlimit && !isItemSelected) {
+          (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
           onSelectionlimitexceed === null || onSelectionlimitexceed === void 0 || onSelectionlimitexceed(event, widgetInstance);
           return;
         }
@@ -171,21 +172,21 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       // If item is already selected, do nothing (don't deselect)
     }
     (0, _listHelpers.getSelectedItemWidgets)(event, listener, name || "", item || null, Widgets);
-    if (widgetInstance) {
-      delete widgetInstance._wmListItemId;
-      widgetInstance.item = item;
-    }
+    (0, _widgetInstanceUtils.setWidgetItem)(widgetInstance, items, item);
     onClick === null || onClick === void 0 || onClick(event, widgetInstance); // Use widgetInstance instead of item
   }, [disableitem, selectedItems, multiselect, firstSelectedItem, items, selectionlimit, activeItems, setSelectedItems, setActiveItems, setFirstSelectedItem, onSelectionlimitexceed, onClick, callOnSelect]);
   var handleListItemDoubleClick = (0, _react.useCallback)(function (event, item) {
+    (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
     onDblclick === null || onDblclick === void 0 || onDblclick(event, widgetInstance); // Use widgetInstance instead of item
-  }, [onDblclick]);
+  }, [onDblclick, items]);
   var handleListItemMouseEnter = (0, _react.useCallback)(function (event, item) {
+    (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
     onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, widgetInstance); // Use widgetInstance instead of item
-  }, [onMouseEnter]);
+  }, [onMouseEnter, items]);
   var handleListItemMouseLeave = (0, _react.useCallback)(function (event, item) {
+    (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
     onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, widgetInstance); // Use widgetInstance instead of item
-  }, [onMouseLeave]);
+  }, [onMouseLeave, items]);
   var handleHeaderClick = (0, _react.useCallback)(function (groupKey) {
     if (collapsible) {
       setGroupCollapsed(_objectSpread(_objectSpread({}, groupCollapsed), {}, (0, _defineProperty2["default"])({}, groupKey, !groupCollapsed[groupKey])));
@@ -197,6 +198,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       setCurrentPage(index);
 
       // Trigger the callbacks - datasource handling is now done in usePagination hook
+      (0, _widgetInstanceUtils.setWidgetPageIndex)(widgetInstance, index);
       onPaginationchange === null || onPaginationchange === void 0 || onPaginationchange(event, widgetInstance, index);
       onPageChange === null || onPageChange === void 0 || onPageChange(event, index);
     }
@@ -204,9 +206,10 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
   var handleSetRecord = (0, _react.useCallback)(function (event, widget, index, data) {
     if (index) {
       setCurrentPage(index);
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, data);
       onSetrecord === null || onSetrecord === void 0 || onSetrecord(event, widgetInstance, index, data);
     }
-  }, [setCurrentPage, onSetrecord]);
+  }, [setCurrentPage, onSetrecord, items]);
   var handlePageChange = (0, _react.useCallback)(function (page) {
     // Update the current page
     setCurrentPage(page);
@@ -222,6 +225,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       });
       Promise.resolve(invokeResult).then(function () {
         // Trigger the callbacks after successful data fetch
+        (0, _widgetInstanceUtils.setWidgetPageIndex)(widgetInstance, page);
         onPaginationchange === null || onPaginationchange === void 0 || onPaginationchange(null, widgetInstance, page);
         onPageChange === null || onPageChange === void 0 || onPageChange(null, page);
         setIsLoadingMore(false);
@@ -233,6 +237,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       });
     } else {
       // For client-side pagination, just trigger callbacks
+      (0, _widgetInstanceUtils.setWidgetPageIndex)(widgetInstance, page);
       onPaginationchange === null || onPaginationchange === void 0 || onPaginationchange(null, widgetInstance, page);
       onPageChange === null || onPageChange === void 0 || onPageChange(null, page);
     }

package/components/data/list/index.js

@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Import components
 // Import utilities
 var WmList = function WmList(props) {
-  var _listener$Widgets, _paginationState$pagi5, _paginationState$pagi6;
+  var _listener$Widgets, _paginationState$pagi5, _paginationState$pagi6, _datasource$loading;
   // ==================== PROPS DESTRUCTURING ====================
   var className = props.className,
     styles = props.styles,
@@ -161,10 +161,11 @@ var WmList = function WmList(props) {
   var _useState = (0, _react.useState)(false),
     isDatasetFromModalVariable = _useState[0],
     setIsDatasetFromModalVariable = _useState[1];
+  var resolvedDataset = (0, _listHelpers.getSafeDataset)(dataset);
 
   // Calculate hash of dataset content to detect mutations
   // This runs every render but is lightweight compared to recalculating safeDataset
-  var datasetHash = Array.isArray(dataset) && (dataset !== null && dataset !== void 0 ? dataset : []).map(function (item, idx) {
+  var datasetHash = Array.isArray(resolvedDataset) && (resolvedDataset !== null && resolvedDataset !== void 0 ? resolvedDataset : []).map(function (item, idx) {
     if (!item || (0, _typeof2["default"])(item) !== "object") {
       return "".concat(idx, ":").concat(item);
     }
@@ -172,8 +173,7 @@ var WmList = function WmList(props) {
     return "".concat(idx, ":").concat(Object.values(item).join("-"));
   }).join("|");
   var safeDataset = (0, _react.useMemo)(function () {
-    var data = (0, _listHelpers.getSafeDataset)(dataset);
-    return (0, _utils.addUniqueRowIds)(data, {
+    return (0, _utils.addUniqueRowIds)(resolvedDataset, {
       type: "list"
     });
   }, [datasetHash]);
@@ -520,11 +520,10 @@ var WmList = function WmList(props) {
     title: title,
     subheading: subheading,
     iconclass: iconclass
-  }), datasource !== null && datasource !== void 0 && datasource.loading ? __jsx(_common.AppSpinner, {
-    show: true,
+  }), __jsx(_common.AppSpinner, {
+    show: (_datasource$loading = datasource === null || datasource === void 0 ? void 0 : datasource.loading) !== null && _datasource$loading !== void 0 ? _datasource$loading : false,
     spinnermessages: [loadingdatamsg]
-  }) : /* Main Content */
-  __jsx(_components.InlineNavigation, {
+  }), __jsx(_components.InlineNavigation, {
     navigation: navigation,
     currentPage: paginationState.currentPage,
     totalPages: paginationState.effectiveTotalPages,

package/components/data/list/utils/list-helpers.js

@@ -55,13 +55,33 @@ var getTextAlignClass = exports.getTextAlignClass = function getTextAlignClass(a
       return "text-left";
   }
 };
+var flattenIfArrayOfArrays = function flattenIfArrayOfArrays(arr) {
+  if (arr.length === 0) return arr;
+  var first = arr[0];
+  if (Array.isArray(first) && arr.every(function (x) {
+    return Array.isArray(x);
+  })) {
+    return arr.flat();
+  }
+  return Array.isArray(arr) ? arr : [];
+};
 
 /**
  * Get safe dataset ensuring it's always an array
  * @param dataset - Input dataset of any type
  * @returns Array dataset with proper typing
  */
-var getSafeDataset = exports.getSafeDataset = function getSafeDataset(dataset) {
+var _getSafeDataset = exports.getSafeDataset = function getSafeDataset(dataset) {
+  if (typeof dataset === "function") {
+    try {
+      return _getSafeDataset(dataset());
+    } catch (_unused) {
+      return [];
+    }
+  }
+  if (Array.isArray(dataset)) {
+    return flattenIfArrayOfArrays(dataset);
+  }
   if (typeof dataset === "string") {
     try {
       var parsedData = dataset.split(",").map(function (str) {

package/components/data/list/utils/list-widget-methods.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useListWidgetMethods = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lodashEs = require("lodash-es");
+var _widgetInstanceUtils = require("./widget-instance-utils");
 var useListWidgetMethods = exports.useListWidgetMethods = function useListWidgetMethods(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name, Widgets, size, setIsListCleared, handlePageSizeChange) {
   // Return methods object directly without useMemo to avoid infinite re-renders
   // Methods always have access to current values through closure
@@ -56,6 +57,7 @@ var useListWidgetMethods = exports.useListWidgetMethods = function useListWidget
           listState.setFirstSelectedItem(item);
         }
         if (onSelect && widgetInstance && !statePersistenceTriggered) {
+          (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
           onSelect(widgetInstance, item);
         }
       }