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

package/components/input/rating/index.d.ts

@@ -0,0 +1,208 @@
+import React from "react";
+import { RatingItem } from "./props";
+declare const WmRatingStandalone: React.ComponentType<import("../../data/form/form-controller/props").WithFormControllerProps & {
+    maxvalue?: number;
+    name: string;
+    caption?: string;
+    readonly?: boolean;
+    showcaptions?: boolean;
+    iconcolor?: string;
+    iconsize?: string;
+    activeiconclass?: string;
+    inactiveiconclass?: string;
+    setDatasetItems?: (items: RatingItem[]) => void;
+    dataset?: any;
+    datafield?: string;
+    displayfield?: string;
+    displaylabel?: string;
+    displayimagesrc?: string;
+    displayexpression?: (data: Record<string, unknown>) => string;
+    usekeys?: boolean;
+    orderby?: string;
+    multiple?: boolean;
+    content?: string;
+    collapsible?: boolean;
+    groupby?: string;
+    allowempty?: boolean;
+    compareby?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    isDestroyed?: boolean;
+    widgetType?: string;
+    datavalue?: any;
+    validation?: Record<string, unknown>;
+    handleHeaderClick?: () => void;
+    toggleAllHeaders?: (props: Record<string, unknown>) => void;
+    datasetItems?: RatingItem[];
+    selectedItems?: RatingItem[];
+    displayValue?: string;
+    value?: string | number;
+    onblur?: () => void;
+    groupedData?: Array<{
+        key: string;
+        data: RatingItem[];
+    }>;
+    onChange?: (event: React.SyntheticEvent, widget: Record<string, unknown>, newVal: string | number, oldVal: string | number) => void;
+    invokeEventCallback?: (eventName: string, eventData: Record<string, unknown>) => void;
+    fieldName?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    prefabName?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmRatingStandalone as WmRating };
+/**
+ * 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}
+ */
+declare const _default: React.ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    validationmessage?: string;
+    hint?: string;
+    type?: string;
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    maxvalue?: number;
+    caption?: string;
+    readonly?: boolean;
+    showcaptions?: boolean;
+    iconcolor?: string;
+    iconsize?: string;
+    activeiconclass?: string;
+    inactiveiconclass?: string;
+    setDatasetItems?: (items: RatingItem[]) => void;
+    dataset?: any;
+    datafield?: string;
+    displayfield?: string;
+    displaylabel?: string;
+    displayimagesrc?: string;
+    displayexpression?: (data: Record<string, unknown>) => string;
+    usekeys?: boolean;
+    orderby?: string;
+    multiple?: boolean;
+    content?: string;
+    collapsible?: boolean;
+    groupby?: string;
+    allowempty?: boolean;
+    compareby?: string[];
+    disabled?: boolean;
+    isDestroyed?: boolean;
+    widgetType?: string;
+    validation?: Record<string, unknown>;
+    handleHeaderClick?: () => void;
+    toggleAllHeaders?: (props: Record<string, unknown>) => void;
+    datasetItems?: RatingItem[];
+    selectedItems?: RatingItem[];
+    displayValue?: string;
+    value?: string | number;
+    onblur?: () => void;
+    groupedData?: Array<{
+        key: string;
+        data: RatingItem[];
+    }>;
+    onChange?: (event: React.SyntheticEvent, widget: Record<string, unknown>, newVal: string | number, oldVal: string | number) => void;
+    invokeEventCallback?: (eventName: string, eventData: Record<string, unknown>) => void;
+    fieldName?: string;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    prefabName?: string;
+}>;
+export default _default;

package/components/input/rating/index.js

@@ -0,0 +1,461 @@
+"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 = {
+  active: "wi wi-star",
+  inactive: "wi wi-star-border"
+};
+var 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) {
+    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 () {
+    setHoveredRatingValue(null);
+    var selectedItem = ratingItems.find(function (item) {
+      return 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
+        });
+      });
+      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 (!dataset) return;
+    var processedData = [];
+    if (Array.isArray(dataset)) {
+      dataset.forEach(function (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
+              };
+            });
+          } else {
+            processedData.push({
+              index: idx + 1,
+              value: idx + 1,
+              label: item,
+              key: idx + 1
+            });
+          }
+        } else if ((0, _typeof2["default"])(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
+    if (!data.length) {
+      transformedItems = Array.from({
+        length: maxVal
+      }, function (_, i) {
+        return {
+          key: maxVal - i,
+          value: maxVal - i,
+          index: maxVal - i,
+          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
+    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, {
+        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)) {
+          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), {}, {
+              selected: item === selectedItem
+            });
+          });
+          setDatasetItems(updatedDatasetItems);
+        }
+      }
+      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);
+        } else {
+          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 () {
+    processDataset();
+  }, [processDataset]);
+  (0, _react.useEffect)(function () {
+    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
+  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"
+    })));
+  };
+  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 : ""))));
+});
+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);