@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/input/number/index.js

@@ -15,6 +15,7 @@ var lodash = _interopRequireWildcard(require("lodash-es"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _formatUtil = require("@wavemaker/react-runtime/utils/format-util");
+var _util = require("../util");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -34,6 +35,14 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     autofocus = props.autofocus,
     _props$datavalue = props.datavalue,
     initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _props$maxDataValue = props.maxDataValue,
+    initialMaxDataValue = _props$maxDataValue === void 0 ? null : _props$maxDataValue,
+    _props$maxvalue = props.maxvalue,
+    initialMaxValue = _props$maxvalue === void 0 ? null : _props$maxvalue,
+    _props$maxdisplayValu = props.maxdisplayValue,
+    initialMaxDisplayValue = _props$maxdisplayValu === void 0 ? null : _props$maxdisplayValu,
+    _props$isMaxWidget = props.isMaxWidget,
+    isMaxWidget = _props$isMaxWidget === void 0 ? false : _props$isMaxWidget,
     _props$styles = props.styles,
     styles = _props$styles === void 0 ? {} : _props$styles,
     className = props.className,
@@ -67,17 +76,20 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _useState = (0, _react.useState)(false),
     showError = _useState[0],
     setShowError = _useState[1];
-  var _useState2 = (0, _react.useState)(initialDataValue),
+  // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue)
+  // For regular widgets: use regular properties (datavalue)
+  var effectiveInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== undefined ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== undefined ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== undefined ? initialDataValue : null;
+  var _useState2 = (0, _react.useState)(effectiveInitialValue),
     datavalue = _useState2[0],
     setDatavalue = _useState2[1];
-  var _useState3 = (0, _react.useState)(initialDataValue),
+  var _useState3 = (0, _react.useState)(effectiveInitialValue),
     prevDatavalue = _useState3[0],
     setPrevDatavalue = _useState3[1];
-  var _useState4 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
+  var _useState4 = (0, _react.useState)(effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""),
     internalValue = _useState4[0],
     setInternalValue = _useState4[1];
   // Add state to preserve the original string input when trailingzero is true
-  var _useState5 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
+  var _useState5 = (0, _react.useState)(effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""),
     rawInputValue = _useState5[0],
     setRawInputValue = _useState5[1];
   var _useState6 = (0, _react.useState)(false),
@@ -87,6 +99,16 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     isTouched = _useState7[0],
     setIsTouched = _useState7[1];
   var inputEl = (0, _react.useRef)(null);
+  var effectiveDecimalPlaces = (0, _react.useMemo)(function () {
+    if (decimalplaces > 0) return decimalplaces;
+    if (inputmode === "financial" && step && step < 1) {
+      var stepStr = step.toString();
+      if (stepStr.includes(".")) {
+        return stepStr.split(".")[1].length;
+      }
+    }
+    return decimalplaces;
+  }, [decimalplaces, inputmode, step]);
   var displayError = error || isDirty && showError;
   var validateNumber = (0, _react.useCallback)(function (value) {
     return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue, regexp);
@@ -94,6 +116,9 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
   var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
     var validation = validateNumber(value);
     setShowError(!validation.isValid);
+    if (prevDatavalue === value) {
+      return;
+    }
     if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
       var _listener$onChange;
       var syntheticEvent = {
@@ -103,15 +128,33 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
         },
         currentTarget: inputEl.current
       };
-      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, {
+      // For max widgets, use max-prefixed properties to avoid conflicts with regular widgets
+      var updatedWidgetData = isMaxWidget ? {
+        maxDataValue: value == null ? "" : value,
+        maxvalue: value == null ? "" : value,
+        maxdisplayValue: value == null ? "" : value.toString()
+      } : {
         datavalue: value == null ? "" : value,
         value: value == null ? "" : value,
         displayValue: value == null ? "" : value.toString()
-      }, value, prevDatavalue);
+      };
+      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, updatedWidgetData, value, prevDatavalue);
       if (onChange) {
-        onChange(syntheticEvent, props, value, prevDatavalue);
+        // Create updated props object with new value
+        // For max widgets, use max-prefixed properties
+        var updatedProps = isMaxWidget ? _objectSpread(_objectSpread({}, props), {}, {
+          maxDataValue: value,
+          maxvalue: value,
+          maxdisplayValue: value == null ? "" : value.toString()
+        }) : _objectSpread(_objectSpread({}, props), {}, {
+          datavalue: value,
+          value: value,
+          displayValue: value == null ? "" : value.toString()
+        });
+        onChange(syntheticEvent, updatedProps, value, prevDatavalue);
       }
     }
+    setPrevDatavalue(value);
   }, parseInt(updatedelay || "10"), {
     leading: parseInt(updatedelay) === 0
   }), [onChange, name, prevDatavalue, updatedelay, validateNumber]);
@@ -130,8 +173,7 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     };
   }, [shortcutkey]);
   var handleInputChange = function handleInputChange(event) {
-    var _listener$Widgets;
-    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, decimalplaces, setRawInputValue);
+    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, effectiveDecimalPlaces, setRawInputValue);
     if (result.newVal === null && event.target.value !== "") {
       return; // Invalid input, don't update
     }
@@ -140,13 +182,14 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     var validation = validateNumber(result.newVal);
     setShowError(!validation.isValid);
     if (updateon === "keypress") {
+      var _listener$Widgets;
       debouncedUpdateValue(result.newVal);
+      onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], result.newVal, prevDatavalue);
     }
-    onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], result.newVal, prevDatavalue);
   };
   var handleBlur = function handleBlur(e) {
     var _listener$Widgets2;
-    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, decimalplaces);
+    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, effectiveDecimalPlaces);
     if (formattedValue) {
       setInternalValue(formattedValue);
     }
@@ -155,7 +198,7 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
     onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
     var validation = validateNumber(datavalue);
-    if (!validation.isValid && required) {
+    if (!validation.isValid && (required || maxvalue || minvalue)) {
       setIsDirty(true);
     } else {
       setIsDirty(false);
@@ -166,60 +209,132 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
       setShowError(true);
     }
   };
+  var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
+    event.preventDefault();
+    if (readonly || disabled || !step || step === 0) {
+      return;
+    }
+    var targetVal = event.target.value;
+    var currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
+    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, effectiveDecimalPlaces, minvalue, maxvalue);
+    var currentPrevValue = datavalue;
+    var cleanValue = newValue.toString();
+    setInternalValue(cleanValue);
+    setDatavalue(newValue);
+    setPrevDatavalue(currentPrevValue);
+    setRawInputValue(cleanValue);
+    var validation = validateNumber(newValue);
+    setShowError(!validation.isValid);
+    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
+      var _listener$onChange2;
+      var syntheticEvent = {
+        target: {
+          value: newValue.toString(),
+          name: name
+        },
+        currentTarget: inputEl.current
+      };
+      // For max widgets, use max-prefixed properties to avoid conflicts with regular widgets
+      var updatedWidgetData = isMaxWidget ? {
+        maxDataValue: newValue == null ? "" : newValue,
+        maxvalue: newValue == null ? "" : newValue,
+        maxdisplayValue: newValue == null ? "" : newValue.toString()
+      } : {
+        datavalue: newValue == null ? "" : newValue,
+        value: newValue == null ? "" : newValue,
+        displayValue: newValue == null ? "" : newValue.toString()
+      };
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || name, updatedWidgetData, newValue, currentPrevValue);
+      if (onChange) {
+        // Create updated props object with new datavalue and displayValue
+        var updatedProps = _objectSpread(_objectSpread({}, props), {}, {
+          datavalue: newValue,
+          displayValue: newValue == null ? "" : newValue.toString()
+        });
+        onChange(syntheticEvent, updatedProps, newValue, currentPrevValue);
+      }
+    }
+    if (updateon === "keypress") {
+      debouncedUpdateValue(newValue);
+    }
+    setPrevDatavalue(newValue);
+  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, effectiveDecimalPlaces, validateNumber, onChange, name, props, listener, updateon, debouncedUpdateValue]);
   var handleKeyDown = function handleKeyDown(e) {
-    var _listener$Widgets3;
+    var _listener$Widgets4;
+    if (step && step !== 0) {
+      if (e.key === "ArrowUp") {
+        handleArrowPress(e, "UP");
+        return;
+      } else if (e.key === "ArrowDown") {
+        handleArrowPress(e, "DOWN");
+        return;
+      } else {
+        var _listener$Widgets3;
+        onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+      }
+    }
     if (e.key === "Enter") {
       debouncedUpdateValue(datavalue);
     }
-    onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+    onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
   };
   var handleKeyUp = function handleKeyUp(e) {
-    var _listener$Widgets4;
-    onKeyup === null || onKeyup === void 0 || onKeyup(e, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+    var _listener$Widgets5;
+    onKeyup === null || onKeyup === void 0 || onKeyup(e, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
   };
   var handleFocus = function handleFocus(e) {
-    var _listener$Widgets5;
-    onFocus === null || onFocus === void 0 || onFocus(e, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+    var _listener$Widgets6;
+    onFocus === null || onFocus === void 0 || onFocus(e, listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
   };
   var handleClick = function handleClick(e) {
-    var _listener$Widgets6;
-    onClick === null || onClick === void 0 || onClick(e, listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
+    var _listener$Widgets7;
+    onClick === null || onClick === void 0 || onClick(e, listener === null || listener === void 0 || (_listener$Widgets7 = listener.Widgets) === null || _listener$Widgets7 === void 0 ? void 0 : _listener$Widgets7[name]);
   };
   var handleMouseEnter = function handleMouseEnter(e) {
-    var _listener$Widgets7;
+    var _listener$Widgets8;
     setIsTouched(true);
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e, listener === null || listener === void 0 || (_listener$Widgets7 = listener.Widgets) === null || _listener$Widgets7 === void 0 ? void 0 : _listener$Widgets7[name]);
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e, listener === null || listener === void 0 || (_listener$Widgets8 = listener.Widgets) === null || _listener$Widgets8 === void 0 ? void 0 : _listener$Widgets8[name]);
   };
   var handleMouseLeave = function handleMouseLeave(e) {
-    var _listener$Widgets8;
+    var _listener$Widgets9;
     setIsTouched(false);
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e, listener === null || listener === void 0 || (_listener$Widgets8 = listener.Widgets) === null || _listener$Widgets8 === void 0 ? void 0 : _listener$Widgets8[name]);
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e, listener === null || listener === void 0 || (_listener$Widgets9 = listener.Widgets) === null || _listener$Widgets9 === void 0 ? void 0 : _listener$Widgets9[name]);
   };
   var handleKeyPress = function handleKeyPress(e) {
-    var _listener$Widgets9;
-    onKeypress === null || onKeypress === void 0 || onKeypress(e, listener === null || listener === void 0 || (_listener$Widgets9 = listener.Widgets) === null || _listener$Widgets9 === void 0 ? void 0 : _listener$Widgets9[name]);
+    var _listener$Widgets0;
+    onKeypress === null || onKeypress === void 0 || onKeypress(e, listener === null || listener === void 0 || (_listener$Widgets0 = listener.Widgets) === null || _listener$Widgets0 === void 0 ? void 0 : _listener$Widgets0[name]);
   };
   (0, _react.useEffect)(function () {
-    if (initialDataValue !== datavalue) {
-      setDatavalue(initialDataValue);
-      var cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
+    // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue)
+    // For regular widgets: use regular properties (datavalue)
+    var currentInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== undefined ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== undefined ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== undefined ? initialDataValue : null;
+
+    // Only update if the incoming value is different from current state
+    // Use a more robust comparison that handles null/undefined/empty string cases
+    var currentValue = datavalue !== null && datavalue !== undefined ? datavalue : null;
+    var newValue = currentInitialValue;
+    if (currentValue !== newValue) {
+      setDatavalue(newValue);
+      var cleanValue = newValue !== null ? newValue.toString() : "";
       setInternalValue(cleanValue);
       setRawInputValue(cleanValue);
-      setPrevDatavalue(datavalue);
+      setPrevDatavalue(currentValue);
     }
-  }, [initialDataValue]);
+  }, [initialDataValue, initialMaxDataValue, initialMaxValue, isMaxWidget]);
   (0, _react.useEffect)(function () {
     if (inputEl.current) {
-      listener.onChange(props.name, {
-        focus: function focus() {
-          var _inputEl$current2;
-          (_inputEl$current2 = inputEl.current) === null || _inputEl$current2 === void 0 || _inputEl$current2.focus();
-        }
-      });
+      var focus = function focus() {
+        var _inputEl$current2;
+        (_inputEl$current2 = inputEl.current) === null || _inputEl$current2 === void 0 || _inputEl$current2.focus();
+      };
+      if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
+        listener.Widgets[name].focus = focus;
+      }
     }
   }, []);
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    onChange: handleInputChange
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown
   }, onMouseEnter ? {
     onMouseEnter: handleMouseEnter
   } : {}), onMouseLeave ? {
@@ -228,8 +343,6 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     onClick: handleClick
   } : {}), onFocus ? {
     onFocus: handleFocus
-  } : {}), onKeydown ? {
-    onKeyDown: handleKeyDown
   } : {}), onKeyup ? {
     onKeyUp: handleKeyUp
   } : {}), onKeypress ? {
@@ -237,7 +350,9 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
   } : {}), updateon === "blur" || onBlur ? {
     onBlur: handleBlur
   } : {});
+  var value = (0, _util.sanitizeInputValue)(internalValue);
   return __jsx(_TextField["default"], (0, _extends2["default"])({}, events, {
+    hidden: props.hidden,
     title: hint || "Number Input",
     name: name,
     inputRef: inputEl,
@@ -247,7 +362,7 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter number",
     type: "text",
     id: id || name,
-    value: internalValue,
+    value: value,
     error: displayError,
     className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
     slotProps: {
@@ -286,7 +401,7 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
     }, styles)
   }));
 }, function (prev, current) {
-  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "inputmode", "trailingzero", "decimalplaces", "minvalue", "maxvalue", "className"];
+  var keys = ["datavalue", "maxDataValue", "isMaxWidget", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "inputmode", "trailingzero", "decimalplaces", "minvalue", "maxvalue", "className", "hidden", "show", "error"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

package/components/input/rating/index.js

@@ -61,7 +61,8 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     datavalue = props.datavalue,
     height = props.height,
     dataset = props.dataset,
-    styles = props.styles;
+    styles = props.styles,
+    listener = props.listener;
 
   // State management
   var _useState = (0, _react.useState)(0),
@@ -84,6 +85,7 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     setHover = _useState6[1];
   var ratingsRef = (0, _react.useRef)(null);
   var previousValue = (0, _react.useRef)(value);
+  var isInternalChange = (0, _react.useRef)(false); // Track internal changes to prevent double listener.onChange calls
 
   // Helper functions
   var setDatasetItems = (0, _react.useCallback)(function (items) {
@@ -95,8 +97,8 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     setCurrentCaption(text);
   }, []);
   var isStarActive = (0, _react.useCallback)(function (index) {
-    return index <= selectedRatingValue;
-  }, [selectedRatingValue]);
+    return index <= datavalue;
+  }, [datavalue]);
   var isStarHovered = (0, _react.useCallback)(function (index) {
     return hoveredRatingValue !== null && index <= hoveredRatingValue;
   }, [hoveredRatingValue]);
@@ -146,9 +148,18 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     updateCaptionElement(rate.label);
   }, [readonly, updateCaptionElement]);
   var handleRatingClick = (0, _react.useCallback)(function (rate) {
+    var _listener$onChange;
     if (readonly) return;
     var newRating = rate.index === selectedRatingValue ? 0 : rate.index;
+
+    // Mark this as an internal change to prevent duplicate listener.onChange from onDatavalueChange
+    isInternalChange.current = true;
     setSelectedRatingValue(newRating);
+    listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, name, {
+      prevDatavalue: previousValue.current,
+      _selectedRatingValue: newRating,
+      ratingsWidth: calculateRatingsWidth()
+    });
     if (showcaptions) {
       var selectedItem = newRating > 0 ? ratingItems.find(function (item) {
         return item.index === newRating;
@@ -213,7 +224,7 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     var maxVal = Math.min(maxvalue || data.length, 10) || DEFAULT_MAX_VALUE;
 
     // Use transformDataset utility to create the dataset
-    var transformedItems = (0, _transformedDatasetUtils.transformDataset)(data, datafield, displayfield, displaylabel, displayexpression, undefined, undefined);
+    var transformedItems = (0, _transformedDatasetUtils.transformDataset)(data, datafield, displayfield, displaylabel, displayexpression, undefined, undefined, undefined);
 
     // If no data provided, create default numeric rating items
     if (!data.length) {
@@ -227,6 +238,23 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
           label: "".concat(maxVal - i)
         };
       });
+    } else {
+      // Limit transformed items to maxVal when dataset exists
+      // Sort first to ensure we keep items with lowest indices
+      transformedItems.sort(function (a, b) {
+        return a.index - b.index;
+      });
+      transformedItems = transformedItems.slice(0, maxVal);
+
+      // Convert 0-based indices to 1-based to match the isStarActive logic
+      // The isStarActive function expects 1-based indices where index <= selectedRatingValue
+      transformedItems = transformedItems.map(function (item, idx) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          index: idx + 1,
+          // Convert to 1-based index
+          key: idx + 1
+        });
+      });
     }
 
     // Sort items by index in descending order to maintain left-to-right star activation
@@ -234,7 +262,14 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
       return b.index - a.index;
     });
     if (!(0, _lodashEs.isEqual)(transformedItems, ratingItems)) {
+      var _listener$onChange2, _listener$onChange3;
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || name, {
+        ratingItems: transformedItems
+      });
       setRatingItems(transformedItems);
+      listener === null || listener === void 0 || (_listener$onChange3 = listener.onChange) === null || _listener$onChange3 === void 0 || _listener$onChange3.call(listener, name, {
+        ratingItems: transformedItems
+      });
       if (!data.length || processedDataset.length > 0 && data === processedDataset) {
         var currentDatasetItems = processedDataset.length > 0 ? processedDataset : datasetItems;
         if (!(0, _lodashEs.isEqual)(transformedItems, currentDatasetItems)) {
@@ -243,7 +278,23 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
       }
     }
   }, [datasetItems, processedDataset, maxvalue, datafield, displayexpression, setDatasetItems, ratingItems, displaylabel, displayfield]);
+  var calculateRatingsWidth = (0, _react.useCallback)(function (selectedDefaultRating) {
+    var selectedRating = selectedDefaultRating || selectedRatingValue;
+    var starWidth = 0.925;
+    var maxValue = maxvalue || datasetItems.length || DEFAULT_MAX_VALUE;
+    if (selectedRating <= maxValue && selectedRating >= 0) {
+      return selectedRating * starWidth + "em";
+    }
+    if (selectedRating > maxValue) {
+      return maxValue * starWidth + "em";
+    }
+  }, [selectedRatingValue, maxvalue, datasetItems]);
   var onDatavalueChange = (0, _react.useCallback)(function (dataVal) {
+    // Skip ALL updates if this was triggered by an internal click (we already set state in handleRatingClick)
+    if (isInternalChange.current) {
+      isInternalChange.current = false; // Reset the flag
+      return; // Early return - skip all processing for internal changes
+    }
     var effectiveDataset = processedDataset.length > 0 ? processedDataset : datasetItems;
     if (!(0, _lodashEs.isEmpty)(effectiveDataset)) {
       var selectedItem = effectiveDataset.find(function (item) {
@@ -264,18 +315,36 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
         }
       }
       if (!selectedItem) {
+        var _listener$onChange4;
         setSelectedRatingValue(0);
+        listener === null || listener === void 0 || (_listener$onChange4 = listener.onChange) === null || _listener$onChange4 === void 0 || _listener$onChange4.call(listener, props.fieldName || name, {
+          _selectedRatingValue: 0,
+          datavalue: 0
+        });
         setCurrentCaption(caption || "");
         updateCaptionElement(caption || "");
       } else {
+        var _listener$onChange5;
         setSelectedRatingValue(selectedItem.index);
+        listener === null || listener === void 0 || (_listener$onChange5 = listener.onChange) === null || _listener$onChange5 === void 0 || _listener$onChange5.call(listener, props.fieldName || name, {
+          selectedRatingValue: selectedItem.index,
+          _selectedRatingValue: selectedItem.index,
+          ratingsWidth: calculateRatingsWidth(selectedItem.index),
+          datavalue: selectedItem.index
+        });
         setCurrentCaption(selectedItem.label);
         updateCaptionElement(selectedItem.label);
       }
     } else {
       if (!isNaN(Number(dataVal))) {
+        var _listener$onChange6;
         var rating = Math.min(Math.max(parseFloat(dataVal), 0), maxvalue || DEFAULT_MAX_VALUE);
         setSelectedRatingValue(rating);
+        listener === null || listener === void 0 || (_listener$onChange6 = listener.onChange) === null || _listener$onChange6 === void 0 || _listener$onChange6.call(listener, props.fieldName || name, {
+          _selectedRatingValue: rating,
+          ratingsWidth: calculateRatingsWidth(rating),
+          datavalue: rating
+        });
         var _selectedItem = ratingItems.find(function (item) {
           return item.index === rating;
         });
@@ -287,7 +356,13 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
           updateCaptionElement(caption || "");
         }
       } else {
+        var _listener$onChange7;
         setSelectedRatingValue(0);
+        listener === null || listener === void 0 || (_listener$onChange7 = listener.onChange) === null || _listener$onChange7 === void 0 || _listener$onChange7.call(listener, props.fieldName || name, {
+          _selectedRatingValue: 0,
+          ratingsWidth: calculateRatingsWidth(),
+          datavalue: 0
+        });
         setCurrentCaption(caption || "");
         updateCaptionElement(caption || "");
       }
@@ -302,9 +377,14 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     prepareRatingDataset();
   }, [prepareRatingDataset]);
   (0, _react.useEffect)(function () {
+    var _listener$onChange8;
     if (datavalue !== undefined) {
       onDatavalueChange(datavalue);
     }
+    listener === null || listener === void 0 || (_listener$onChange8 = listener.onChange) === null || _listener$onChange8 === void 0 || _listener$onChange8.call(listener, props.fieldName || name, {
+      ratingEl: ratingsRef.current,
+      datavalue: datavalue
+    });
   }, [datavalue]);
 
   // Render methods
@@ -320,8 +400,10 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
       enterNextDelay: 500
     }, __jsx(_material.Box, {
       component: "label",
-      onClick: function onClick() {
-        return handleRatingClick(rate);
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleRatingClick(rate);
       },
       onMouseOver: function onMouseOver() {
         return handleMouseOver(rate);
@@ -345,6 +427,7 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     setHover(!hover);
   }
   return __jsx(_material.Box, {
+    hidden: props.hidden,
     sx: _objectSpread(_objectSpread({}, styles), {}, {
       height: height,
       width: width
@@ -362,7 +445,7 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: "rating-style"
   }, ratingItems.map(renderStar)), showcaptions && (selectedRatingValue !== 0 || hover) && __jsx("label", {
     className: "caption"
-  }, currentCaption || caption || "")));
+  }, currentCaption || caption || (showcaptions ? datavalue : ""))));
 });
 WmRating.displayName = "WmRating";
 var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmRating));