@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/input/rating/index.js

@@ -1,208 +1,207 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmRating = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _lodashEs = require("lodash-es");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _material = require("@mui/material");
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-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; }
-var DEFAULT_MAX_VALUE = 5;
-var DEFAULT_ICON_CLASS = {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState, useEffect, useRef, useCallback } from "react";
+import clsx from "clsx";
+import Tooltip from "@mui/material/Tooltip";
+import { isEmpty, isEqual } from "lodash-es";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { Box } from "@mui/material";
+import { transformDataset } from "../../../utils/transformedDataset-utils";
+import withFormController from "../../data/form/form-controller/withFormController";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_MAX_VALUE = 5;
+const DEFAULT_ICON_CLASS = {
   active: "wi wi-star",
   inactive: "wi wi-star-border"
 };
-var DEFAULT_COLORS = {
+const DEFAULT_COLORS = {
   inactive: "#ccc"
 };
-var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$tabindex;
-  var _props$maxvalue = props.maxvalue,
-    maxvalue = _props$maxvalue === void 0 ? DEFAULT_MAX_VALUE : _props$maxvalue,
-    name = props.name,
-    caption = props.caption,
-    readonly = props.readonly,
-    _props$showcaptions = props.showcaptions,
-    showcaptions = _props$showcaptions === void 0 ? true : _props$showcaptions,
-    _props$show = props.show,
-    show = _props$show === void 0 ? true : _props$show,
-    iconcolor = props.iconcolor,
-    iconsize = props.iconsize,
-    _props$activeiconclas = props.activeiconclass,
-    activeiconclass = _props$activeiconclas === void 0 ? DEFAULT_ICON_CLASS.active : _props$activeiconclas,
-    _props$inactiveiconcl = props.inactiveiconclass,
-    inactiveiconclass = _props$inactiveiconcl === void 0 ? DEFAULT_ICON_CLASS.inactive : _props$inactiveiconcl,
-    _props$datasetItems = props.datasetItems,
-    datasetItems = _props$datasetItems === void 0 ? [] : _props$datasetItems,
-    value = props.value,
-    _props$datafield = props.datafield,
-    datafield = _props$datafield === void 0 ? "index" : _props$datafield,
-    displayfield = props.displayfield,
-    displaylabel = props.displaylabel,
-    onChange = props.onChange,
-    displayexpression = props.displayexpression,
-    _props$invokeEventCal = props.invokeEventCallback,
-    invokeEventCallback = _props$invokeEventCal === void 0 ? function () {} : _props$invokeEventCal,
-    propsSetDatasetItems = props.setDatasetItems,
-    width = props.width,
-    datavalue = props.datavalue,
-    height = props.height,
-    dataset = props.dataset,
-    styles = props.styles,
-    listener = props.listener;
-
-  // State management
-  var _useState = (0, _react.useState)(0),
-    selectedRatingValue = _useState[0],
-    setSelectedRatingValue = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    hoveredRatingValue = _useState2[0],
-    setHoveredRatingValue = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    ratingItems = _useState3[0],
-    setRatingItems = _useState3[1];
-  var _useState4 = (0, _react.useState)(caption || ""),
-    currentCaption = _useState4[0],
-    setCurrentCaption = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
-    processedDataset = _useState5[0],
-    setProcessedDataset = _useState5[1];
-  var _useState6 = (0, _react.useState)(false),
-    hover = _useState6[0],
-    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) {
-    if (propsSetDatasetItems) {
-      propsSetDatasetItems(items);
-    }
-  }, [propsSetDatasetItems]);
-  var updateCaptionElement = (0, _react.useCallback)(function (text) {
+const WmRating = memo((props) => {
+  var _a;
+  const {
+    maxvalue = DEFAULT_MAX_VALUE,
+    name,
+    caption,
+    readonly,
+    showcaptions = true,
+    show = true,
+    iconcolor,
+    iconsize,
+    activeiconclass = DEFAULT_ICON_CLASS.active,
+    inactiveiconclass = DEFAULT_ICON_CLASS.inactive,
+    datasetItems = [],
+    value,
+    datafield = "index",
+    displayfield,
+    displaylabel,
+    onChange,
+    displayexpression,
+    invokeEventCallback = () => {
+    },
+    setDatasetItems: propsSetDatasetItems,
+    width,
+    datavalue,
+    height,
+    dataset,
+    styles,
+    listener
+  } = props;
+  const [selectedRatingValue, setSelectedRatingValue] = useState(0);
+  const [hoveredRatingValue, setHoveredRatingValue] = useState(null);
+  const [ratingItems, setRatingItems] = useState([]);
+  const [currentCaption, setCurrentCaption] = useState(caption || "");
+  const [processedDataset, setProcessedDataset] = useState([]);
+  const [hover, setHover] = useState(false);
+  const ratingsRef = useRef(null);
+  const previousValue = useRef(value);
+  const isInternalChange = useRef(false);
+  const setDatasetItems = useCallback(
+    (items) => {
+      if (propsSetDatasetItems) {
+        propsSetDatasetItems(items);
+      }
+    },
+    [propsSetDatasetItems]
+  );
+  const updateCaptionElement = useCallback((text) => {
     setCurrentCaption(text);
   }, []);
-  var isStarActive = (0, _react.useCallback)(function (index) {
-    return index <= datavalue;
-  }, [datavalue]);
-  var isStarHovered = (0, _react.useCallback)(function (index) {
-    return hoveredRatingValue !== null && index <= hoveredRatingValue;
-  }, [hoveredRatingValue]);
-  var getStarState = (0, _react.useCallback)(function (index) {
-    var isActive = isStarActive(index);
-    var isHovered = isStarHovered(index);
-    var labelColor = isActive ? iconcolor !== null && iconcolor !== void 0 ? iconcolor : DEFAULT_COLORS.inactive : DEFAULT_COLORS.inactive;
-    var borderColorVar = isHovered ? iconcolor !== null && iconcolor !== void 0 ? iconcolor : "transparent" : "transparent";
-    var starStyle = _objectSpread({
-      "--wm-rating-star-color": labelColor,
-      "--wm-rating-star-border-color": borderColorVar
-    }, iconsize ? {
-      "--wm-rating-star-font-size": iconsize
-    } : {});
-    return {
-      isActive: isActive,
-      isHovered: isHovered,
-      iconClass: isActive ? activeiconclass : inactiveiconclass,
-      starStyle: starStyle
-    };
-  }, [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize]);
-
-  // Event handlers
-  var invokeOnChange = (0, _react.useCallback)(function (newValue) {
-    var _listener$Widgets;
-    var oldValue = previousValue.current;
-    if (invokeEventCallback) {
-      invokeEventCallback("change", {
-        value: newValue,
-        oldValue: oldValue
-      });
-    }
-    onChange === null || onChange === void 0 || onChange(undefined, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], newValue, oldValue);
-  }, [onChange, invokeEventCallback]);
-  var handleMouseLeave = (0, _react.useCallback)(function () {
+  const isStarActive = useCallback(
+    (index) => {
+      return index <= datavalue;
+    },
+    [datavalue]
+  );
+  const isStarHovered = useCallback(
+    (index) => {
+      return hoveredRatingValue !== null && index <= hoveredRatingValue;
+    },
+    [hoveredRatingValue]
+  );
+  const getStarState = useCallback(
+    (index) => {
+      const isActive = isStarActive(index);
+      const isHovered = isStarHovered(index);
+      const labelColor = isActive ? iconcolor != null ? iconcolor : DEFAULT_COLORS.inactive : DEFAULT_COLORS.inactive;
+      const borderColorVar = isHovered ? iconcolor != null ? iconcolor : "transparent" : "transparent";
+      const starStyle = __spreadValues({
+        "--wm-rating-star-color": labelColor,
+        "--wm-rating-star-border-color": borderColorVar
+      }, iconsize ? { "--wm-rating-star-font-size": iconsize } : {});
+      return {
+        isActive,
+        isHovered,
+        iconClass: isActive ? activeiconclass : inactiveiconclass,
+        starStyle
+      };
+    },
+    [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize]
+  );
+  const invokeOnChange = useCallback(
+    (newValue) => {
+      var _a2;
+      const oldValue = previousValue.current;
+      if (invokeEventCallback) {
+        invokeEventCallback("change", { value: newValue, oldValue });
+      }
+      onChange == null ? void 0 : onChange(
+        void 0,
+        (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name],
+        newValue,
+        oldValue
+      );
+    },
+    [onChange, invokeEventCallback]
+  );
+  const handleMouseLeave = useCallback(() => {
     setHoveredRatingValue(null);
-    var selectedItem = ratingItems.find(function (item) {
-      return item.index === selectedRatingValue;
-    });
+    const selectedItem = ratingItems.find((item) => item.index === selectedRatingValue);
     updateCaptionElement(selectedItem ? selectedItem.label : currentCaption || caption || "");
   }, [ratingItems, selectedRatingValue, currentCaption, updateCaptionElement, caption]);
-  var handleMouseOver = (0, _react.useCallback)(function (rate) {
-    if (readonly) return;
-    setHoveredRatingValue(rate.index);
-    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;
-      }) : null;
-      var newCaption = selectedItem ? selectedItem.label : caption || "";
-      setCurrentCaption(newCaption);
-      updateCaptionElement(newCaption);
-    }
-    var effectiveDataset = processedDataset.length > 0 ? processedDataset : datasetItems;
-    var selectedDatasetItem = newRating > 0 ? effectiveDataset.find(function (item) {
-      return item.index === newRating;
-    }) : null;
-    if (effectiveDataset.length) {
-      var updatedDatasetItems = effectiveDataset.map(function (item) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          selected: item.index === newRating
-        });
+  const handleMouseOver = useCallback(
+    (rate) => {
+      if (readonly) return;
+      setHoveredRatingValue(rate.index);
+      updateCaptionElement(rate.label);
+    },
+    [readonly, updateCaptionElement]
+  );
+  const handleRatingClick = useCallback(
+    (rate) => {
+      var _a2;
+      if (readonly) return;
+      const newRating = rate.index === selectedRatingValue ? 0 : rate.index;
+      isInternalChange.current = true;
+      setSelectedRatingValue(newRating);
+      (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, name, {
+        prevDatavalue: previousValue.current,
+        _selectedRatingValue: newRating,
+        ratingsWidth: calculateRatingsWidth()
       });
-      setDatasetItems(updatedDatasetItems);
-    }
-    var newValue = newRating > 0 ? (selectedDatasetItem === null || selectedDatasetItem === void 0 ? void 0 : selectedDatasetItem.value) || rate.value : 0;
-    invokeOnChange(newValue);
-    previousValue.current = newValue;
-  }, [readonly, selectedRatingValue, showcaptions, ratingItems, datasetItems, processedDataset, setDatasetItems, updateCaptionElement, invokeOnChange, caption]);
-
-  // Data processing
-  var processDataset = (0, _react.useCallback)(function () {
+      if (showcaptions) {
+        const selectedItem = newRating > 0 ? ratingItems.find((item) => item.index === newRating) : null;
+        const newCaption = selectedItem ? selectedItem.label : caption || "";
+        setCurrentCaption(newCaption);
+        updateCaptionElement(newCaption);
+      }
+      const effectiveDataset = processedDataset.length > 0 ? processedDataset : datasetItems;
+      const selectedDatasetItem = newRating > 0 ? effectiveDataset.find((item) => item.index === newRating) : null;
+      if (effectiveDataset.length) {
+        const updatedDatasetItems = effectiveDataset.map((item) => __spreadProps(__spreadValues({}, item), {
+          selected: item.index === newRating
+        }));
+        setDatasetItems(updatedDatasetItems);
+      }
+      const newValue = newRating > 0 ? (selectedDatasetItem == null ? void 0 : selectedDatasetItem.value) || rate.value : 0;
+      invokeOnChange(newValue);
+      previousValue.current = newValue;
+    },
+    [
+      readonly,
+      selectedRatingValue,
+      showcaptions,
+      ratingItems,
+      datasetItems,
+      processedDataset,
+      setDatasetItems,
+      updateCaptionElement,
+      invokeOnChange,
+      caption
+    ]
+  );
+  const processDataset = useCallback(() => {
     if (!dataset) return;
-    var processedData = [];
+    let processedData = [];
     if (Array.isArray(dataset)) {
-      dataset.forEach(function (item, idx) {
+      dataset.forEach((item, idx) => {
         if (typeof item === "string") {
           if (item.includes(",")) {
-            var parts = item.split(",").map(function (part) {
-              return part.trim();
-            });
-            processedData = parts.map(function (part, index) {
-              return {
-                index: index + 1,
-                value: index + 1,
-                label: part,
-                key: index + 1
-              };
-            });
+            const parts = item.split(",").map((part) => part.trim());
+            processedData = parts.map((part, index) => ({
+              index: index + 1,
+              value: index + 1,
+              label: part,
+              key: index + 1
+            }));
           } else {
             processedData.push({
               index: idx + 1,
@@ -211,251 +210,259 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
               key: idx + 1
             });
           }
-        } else if ((0, _typeof2["default"])(item) === "object" && item !== null) {
+        } else if (typeof item === "object" && item !== null) {
           processedData.push(item);
         }
       });
     }
     setProcessedDataset(processedData);
   }, [dataset]);
-  var prepareRatingDataset = (0, _react.useCallback)(function () {
-    var data = processedDataset.length > 0 ? processedDataset : datasetItems || [];
-    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, undefined);
-
-    // If no data provided, create default numeric rating items
+  const prepareRatingDataset = useCallback(() => {
+    var _a2, _b;
+    const data = processedDataset.length > 0 ? processedDataset : datasetItems || [];
+    const maxVal = Math.min(maxvalue || data.length, 10) || DEFAULT_MAX_VALUE;
+    let transformedItems = transformDataset(
+      data,
+      datafield,
+      displayfield,
+      displaylabel,
+      displayexpression,
+      void 0,
+      void 0,
+      void 0
+    );
     if (!data.length) {
-      transformedItems = Array.from({
-        length: maxVal
-      }, function (_, i) {
-        return {
-          key: maxVal - i,
-          value: maxVal - i,
-          index: maxVal - i,
-          label: "".concat(maxVal - i)
-        };
-      });
+      transformedItems = Array.from({ length: maxVal }, (_, i) => ({
+        key: maxVal - i,
+        value: maxVal - i,
+        index: maxVal - i,
+        label: `${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.sort((a, b) => 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
-        });
-      });
+      transformedItems = transformedItems.map((item, idx) => __spreadProps(__spreadValues({}, 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
-    transformedItems.sort(function (a, b) {
-      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, {
+    transformedItems.sort((a, b) => b.index - a.index);
+    if (!isEqual(transformedItems, ratingItems)) {
+      (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.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, {
+      (_b = listener == null ? void 0 : listener.onChange) == null ? void 0 : _b.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)) {
+        const currentDatasetItems = processedDataset.length > 0 ? processedDataset : datasetItems;
+        if (!isEqual(transformedItems, currentDatasetItems)) {
           setDatasetItems(transformedItems);
         }
       }
     }
-  }, [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) {
-        return item.selected;
-      });
-      if (!selectedItem && dataVal !== undefined) {
-        selectedItem = effectiveDataset.find(function (item) {
-          var _item$index, _item$value;
-          return ((_item$index = item.index) === null || _item$index === void 0 ? void 0 : _item$index.toString()) === (dataVal === null || dataVal === void 0 ? void 0 : dataVal.toString()) || ((_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.toString()) === (dataVal === null || dataVal === void 0 ? void 0 : dataVal.toString());
-        });
-        if (selectedItem) {
-          var updatedDatasetItems = effectiveDataset.map(function (item) {
-            return _objectSpread(_objectSpread({}, item), {}, {
+  }, [
+    datasetItems,
+    processedDataset,
+    maxvalue,
+    datafield,
+    displayexpression,
+    setDatasetItems,
+    ratingItems,
+    displaylabel,
+    displayfield
+  ]);
+  const calculateRatingsWidth = useCallback(
+    (selectedDefaultRating) => {
+      const selectedRating = selectedDefaultRating || selectedRatingValue;
+      const starWidth = 0.925;
+      const 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]
+  );
+  const onDatavalueChange = useCallback(
+    (dataVal) => {
+      var _a2, _b, _c, _d;
+      if (isInternalChange.current) {
+        isInternalChange.current = false;
+        return;
+      }
+      const effectiveDataset = processedDataset.length > 0 ? processedDataset : datasetItems;
+      if (!isEmpty(effectiveDataset)) {
+        let selectedItem = effectiveDataset.find((item) => item.selected);
+        if (!selectedItem && dataVal !== void 0) {
+          selectedItem = effectiveDataset.find(
+            (item) => {
+              var _a3, _b2;
+              return ((_a3 = item.index) == null ? void 0 : _a3.toString()) === (dataVal == null ? void 0 : dataVal.toString()) || ((_b2 = item.value) == null ? void 0 : _b2.toString()) === (dataVal == null ? void 0 : dataVal.toString());
+            }
+          );
+          if (selectedItem) {
+            const updatedDatasetItems = effectiveDataset.map((item) => __spreadProps(__spreadValues({}, item), {
               selected: item === selectedItem
-            });
+            }));
+            setDatasetItems(updatedDatasetItems);
+          }
+        }
+        if (!selectedItem) {
+          setSelectedRatingValue(0);
+          (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+            _selectedRatingValue: 0,
+            datavalue: 0
+          });
+          setCurrentCaption(caption || "");
+          updateCaptionElement(caption || "");
+        } else {
+          setSelectedRatingValue(selectedItem.index);
+          (_b = listener == null ? void 0 : listener.onChange) == null ? void 0 : _b.call(listener, props.fieldName || name, {
+            selectedRatingValue: selectedItem.index,
+            _selectedRatingValue: selectedItem.index,
+            ratingsWidth: calculateRatingsWidth(selectedItem.index),
+            datavalue: selectedItem.index
           });
-          setDatasetItems(updatedDatasetItems);
+          setCurrentCaption(selectedItem.label);
+          updateCaptionElement(selectedItem.label);
         }
-      }
-      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;
-        });
-        if (_selectedItem) {
-          setCurrentCaption(_selectedItem.label);
-          updateCaptionElement(_selectedItem.label);
+        if (!isNaN(Number(dataVal))) {
+          const rating = Math.min(
+            Math.max(parseFloat(dataVal), 0),
+            maxvalue || DEFAULT_MAX_VALUE
+          );
+          setSelectedRatingValue(rating);
+          (_c = listener == null ? void 0 : listener.onChange) == null ? void 0 : _c.call(listener, props.fieldName || name, {
+            _selectedRatingValue: rating,
+            ratingsWidth: calculateRatingsWidth(rating),
+            datavalue: rating
+          });
+          const selectedItem = ratingItems.find((item) => item.index === rating);
+          if (selectedItem) {
+            setCurrentCaption(selectedItem.label);
+            updateCaptionElement(selectedItem.label);
+          } else {
+            setCurrentCaption(caption || "");
+            updateCaptionElement(caption || "");
+          }
         } else {
+          setSelectedRatingValue(0);
+          (_d = listener == null ? void 0 : listener.onChange) == null ? void 0 : _d.call(listener, props.fieldName || name, {
+            _selectedRatingValue: 0,
+            ratingsWidth: calculateRatingsWidth(),
+            datavalue: 0
+          });
           setCurrentCaption(caption || "");
           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 || "");
       }
-    }
-  }, [datasetItems, processedDataset, maxvalue, ratingItems, setDatasetItems, updateCaptionElement, caption]);
-
-  // Effects
-  (0, _react.useEffect)(function () {
+    },
+    [
+      datasetItems,
+      processedDataset,
+      maxvalue,
+      ratingItems,
+      setDatasetItems,
+      updateCaptionElement,
+      caption
+    ]
+  );
+  useEffect(() => {
     processDataset();
   }, [processDataset]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     prepareRatingDataset();
   }, [prepareRatingDataset]);
-  (0, _react.useEffect)(function () {
-    var _listener$onChange8;
-    if (datavalue !== undefined) {
+  useEffect(() => {
+    var _a2;
+    if (datavalue !== void 0) {
       onDatavalueChange(datavalue);
     }
-    listener === null || listener === void 0 || (_listener$onChange8 = listener.onChange) === null || _listener$onChange8 === void 0 || _listener$onChange8.call(listener, props.fieldName || name, {
+    (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
       ratingEl: ratingsRef.current,
-      datavalue: datavalue
+      datavalue
     });
   }, [datavalue]);
-
-  // Render methods
-  var renderStar = function renderStar(rate) {
-    var _getStarState = getStarState(rate.index),
-      isActive = _getStarState.isActive,
-      iconClass = _getStarState.iconClass,
-      starStyle = _getStarState.starStyle;
-    return __jsx(_Tooltip["default"], {
-      key: rate.key,
-      title: rate.label,
-      enterDelay: 500,
-      enterNextDelay: 500
-    }, __jsx(_material.Box, {
-      component: "label",
-      onClick: function onClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleRatingClick(rate);
-      },
-      onMouseOver: function onMouseOver() {
-        return handleMouseOver(rate);
-      },
-      onMouseLeave: handleMouseLeave,
-      style: starStyle,
-      className: (0, _clsx["default"])("app-icon-container", "wm-rating-star", readonly && "wm-rating-star-readonly", isActive && "active")
-    }, __jsx(_material.Box, {
-      component: "i",
-      className: (0, _clsx["default"])("app-icon", "wm-rating-star-icon", iconClass),
-      "aria-hidden": "true"
-    }), __jsx("input", {
-      type: "radio",
-      role: "radio",
-      name: name,
-      "aria-label": (rate.label || rate.index) + " out of " + ratingItems.length + " ratings",
-      "aria-checked": isStarActive(rate.index) ? "true" : "false"
-    })));
+  const renderStar = (rate) => {
+    const { isActive, iconClass, starStyle } = getStarState(rate.index);
+    return /* @__PURE__ */ jsx(Tooltip, { title: rate.label, enterDelay: 500, enterNextDelay: 500, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "label",
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleRatingClick(rate);
+        },
+        onMouseOver: () => handleMouseOver(rate),
+        onMouseLeave: handleMouseLeave,
+        style: starStyle,
+        className: clsx(
+          "app-icon-container",
+          "wm-rating-star",
+          readonly && "wm-rating-star-readonly",
+          isActive && "active"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "i",
+              className: clsx("app-icon", "wm-rating-star-icon", iconClass),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              role: "radio",
+              name,
+              "aria-label": (rate.label || rate.index) + " out of " + ratingItems.length + " ratings",
+              "aria-checked": isStarActive(rate.index) ? "true" : "false"
+            }
+          )
+        ]
+      }
+    ) }, rate.key);
   };
   function showHideOnHover() {
     setHover(!hover);
   }
-  return __jsx(_material.Box, {
-    hidden: props.hidden,
-    sx: _objectSpread(_objectSpread({}, styles), {}, {
-      height: height,
-      width: width
-    }),
-    className: (0, _clsx["default"])("app-ratings", {
-      disabled: readonly
-    }),
-    ref: ratingsRef,
-    tabIndex: (_props$tabindex = props.tabindex) !== null && _props$tabindex !== void 0 ? _props$tabindex : 0
-  }, __jsx(_material.Box, {
-    className: "ratings-wrapper",
-    onMouseEnter: showHideOnHover,
-    onMouseLeave: showHideOnHover
-  }, __jsx(_material.Box, {
-    className: "rating-style"
-  }, ratingItems.map(renderStar)), showcaptions && (selectedRatingValue !== 0 || hover) && __jsx("label", {
-    className: "caption"
-  }, currentCaption || caption || (showcaptions ? datavalue : ""))));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      hidden: props.hidden,
+      sx: __spreadProps(__spreadValues({}, styles), { height, width }),
+      className: clsx("app-ratings", { disabled: readonly }),
+      ref: ratingsRef,
+      tabIndex: (_a = props.tabindex) != null ? _a : 0,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: "ratings-wrapper",
+          onMouseEnter: showHideOnHover,
+          onMouseLeave: showHideOnHover,
+          children: [
+            /* @__PURE__ */ jsx(Box, { className: "rating-style", children: ratingItems.map(renderStar) }),
+            showcaptions && (selectedRatingValue !== 0 || hover) && /* @__PURE__ */ jsx("label", { className: "caption", children: currentCaption || caption || (showcaptions ? datavalue : "") })
+          ]
+        }
+      )
+    }
+  );
 });
 WmRating.displayName = "WmRating";
-var WithForm = (0, _withFormController["default"])(WmRating);
-var WmRatingStandalone = exports.WmRating = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmRating component provides a star-based rating input with captions and customizable icons.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-rating--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-rating--docs)
- *
- * @param props - {@link WmRatingProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmRating);
+const WmRatingStandalone = withStandalone(WithForm);
+var rating_default = withBaseWrapper(WithForm);
+export {
+  WmRatingStandalone as WmRating,
+  rating_default as default
+};