@wavemaker/react-runtime 11.14.1-rc.236

package/components/input/number/index.js

@@ -0,0 +1,295 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+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");
+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; }
+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_CLASS = "form-control app-textbox app-number-input";
+var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$regexp = props.regexp,
+    regexp = _props$regexp === void 0 ? ".*" : _props$regexp,
+    disabled = props.disabled,
+    name = props.name,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    tabindex = props.tabindex,
+    shortcutkey = props.shortcutkey,
+    autofocus = props.autofocus,
+    _props$datavalue = props.datavalue,
+    initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    className = props.className,
+    placeholder = props.placeholder,
+    _props$updatedelay = props.updatedelay,
+    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
+    listener = props.listener,
+    _props$updateon = props.updateon,
+    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
+    step = props.step,
+    minvalue = props.minvalue,
+    maxvalue = props.maxvalue,
+    readonly = props.readonly,
+    _props$inputmode = props.inputmode,
+    inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
+    _props$trailingzero = props.trailingzero,
+    trailingzero = _props$trailingzero === void 0 ? false : _props$trailingzero,
+    _props$decimalplaces = props.decimalplaces,
+    decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    onKeydown = props.onKeydown,
+    onKeyup = props.onKeyup,
+    onKeypress = props.onKeypress,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    id = props.id,
+    error = props.error;
+  var _useState = (0, _react.useState)(false),
+    showError = _useState[0],
+    setShowError = _useState[1];
+  var _useState2 = (0, _react.useState)(initialDataValue),
+    datavalue = _useState2[0],
+    setDatavalue = _useState2[1];
+  var _useState3 = (0, _react.useState)(initialDataValue),
+    prevDatavalue = _useState3[0],
+    setPrevDatavalue = _useState3[1];
+  var _useState4 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.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() : ""),
+    rawInputValue = _useState5[0],
+    setRawInputValue = _useState5[1];
+  var _useState6 = (0, _react.useState)(false),
+    isDirty = _useState6[0],
+    setIsDirty = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    isTouched = _useState7[0],
+    setIsTouched = _useState7[1];
+  var inputEl = (0, _react.useRef)(null);
+  var displayError = error || isDirty && showError;
+  var validateNumber = (0, _react.useCallback)(function (value) {
+    return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue, regexp);
+  }, [required, regexp, minvalue, maxvalue]);
+  var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
+    var validation = validateNumber(value);
+    setShowError(!validation.isValid);
+    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
+      var _listener$onChange;
+      var syntheticEvent = {
+        target: {
+          value: value === null ? "" : value.toString(),
+          name: name
+        },
+        currentTarget: inputEl.current
+      };
+      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, {
+        datavalue: value == null ? "" : parseInt(value.toString()),
+        value: value == null ? "" : parseInt(value.toString()),
+        displayValue: value == null ? "" : value.toString()
+      }, value, prevDatavalue);
+      if (onChange) {
+        onChange(syntheticEvent, props, value, prevDatavalue);
+      }
+    }
+  }, parseInt(updatedelay || "10"), {
+    leading: parseInt(updatedelay) === 0
+  }), [onChange, name, prevDatavalue, updatedelay, validateNumber]);
+  (0, _react.useEffect)(function () {
+    if (!shortcutkey) return;
+    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
+      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        var _inputEl$current;
+        e.preventDefault();
+        (_inputEl$current = inputEl.current) === null || _inputEl$current === void 0 || _inputEl$current.focus();
+      }
+    };
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return function () {
+      return window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [shortcutkey]);
+  var handleInputChange = function handleInputChange(event) {
+    var _listener$Widgets;
+    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, decimalplaces, setRawInputValue);
+    if (result.newVal === null && event.target.value !== "") {
+      return; // Invalid input, don't update
+    }
+    setInternalValue(result.inputValue);
+    setDatavalue(result.newVal);
+    var validation = validateNumber(result.newVal);
+    setShowError(!validation.isValid);
+    if (updateon === "keypress") {
+      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);
+  };
+  var handleBlur = function handleBlur(e) {
+    var _listener$Widgets2;
+    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, decimalplaces);
+    if (formattedValue) {
+      setInternalValue(formattedValue);
+    }
+    if (updateon === "blur") {
+      debouncedUpdateValue(datavalue);
+    }
+    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) {
+      setIsDirty(true);
+    } else {
+      setIsDirty(false);
+    }
+    if (!validation.isValid && regexp != ".*") {
+      setIsTouched(true);
+      setIsDirty(true);
+      setShowError(true);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _listener$Widgets3;
+    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]);
+  };
+  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 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 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 handleMouseEnter = function handleMouseEnter(e) {
+    var _listener$Widgets7;
+    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]);
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    var _listener$Widgets8;
+    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]);
+  };
+  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]);
+  };
+  (0, _react.useEffect)(function () {
+    if (initialDataValue !== datavalue) {
+      setDatavalue(initialDataValue);
+      var cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
+      setInternalValue(cleanValue);
+      setRawInputValue(cleanValue);
+      setPrevDatavalue(datavalue);
+    }
+  }, [initialDataValue]);
+  (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 events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    onChange: handleInputChange
+  }, onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), onClick ? {
+    onClick: handleClick
+  } : {}), onFocus ? {
+    onFocus: handleFocus
+  } : {}), onKeydown ? {
+    onKeyDown: handleKeyDown
+  } : {}), onKeyup ? {
+    onKeyUp: handleKeyUp
+  } : {}), onKeypress ? {
+    onKeyPress: handleKeyPress
+  } : {}), updateon === "blur" || onBlur ? {
+    onBlur: handleBlur
+  } : {});
+  return __jsx(_TextField["default"], (0, _extends2["default"])({}, events, {
+    title: hint || "Number Input",
+    name: name,
+    inputRef: inputEl,
+    variant: "standard",
+    autoFocus: autofocus,
+    disabled: disabled,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter number",
+    type: "text",
+    id: id || name,
+    value: internalValue,
+    error: displayError,
+    className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
+    slotProps: {
+      htmlInput: {
+        step: step,
+        min: minvalue,
+        max: maxvalue,
+        readOnly: readonly,
+        required: required,
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
+        style: styles,
+        "aria-label": arialabel,
+        pattern: regexp,
+        tabIndex: tabindex
+      }
+    },
+    sx: _objectSpread({
+      "& .MuiInputBase-input.Mui-disabled": {
+        WebkitTextFillColor: "inherit"
+      },
+      "& input[type=number]::-webkit-inner-spin-button, & input[type=number]::-webkit-outer-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
+      },
+      "& input[type=number]": {
+        MozAppearance: "textfield",
+        textAlign: "right"
+      },
+      "& .MuiFormHelperText-root": {
+        marginLeft: 0,
+        "&.Mui-error": {
+          color: "#ee5f5b"
+        }
+      },
+      width: "100%"
+    }, styles)
+  }));
+}, function (prev, current) {
+  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "inputmode", "trailingzero", "decimalplaces", "minvalue", "maxvalue", "className"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmNumber.displayName = "WmNumber";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmNumber));

package/components/input/number/props.js

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

package/components/input/rating/index.js

@@ -0,0 +1,368 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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/react-runtime/higherOrder/withBaseWrapper");
+var _material = require("@mui/material");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+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;
+
+  // 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);
+
+  // 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 <= selectedRatingValue;
+  }, [selectedRatingValue]);
+  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);
+    return {
+      isActive: isActive,
+      isHovered: isHovered,
+      color: isActive ? iconcolor : isHovered ? iconcolor : DEFAULT_COLORS.inactive,
+      iconClass: isActive ? activeiconclass : inactiveiconclass,
+      sx: {
+        fontSize: iconsize,
+        opacity: readonly ? 0.5 : 1,
+        pointerEvents: readonly ? "none" : "auto",
+        transition: "all 0.2s ease-in-out",
+        color: isActive ? iconcolor : DEFAULT_COLORS.inactive,
+        borderColor: isHovered ? iconcolor : "transparent",
+        "& .app-icon": {
+          color: "inherit"
+        }
+      }
+    };
+  }, [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize, readonly]);
+
+  // Event handlers
+  var invokeOnChange = (0, _react.useCallback)(function (newValue) {
+    var oldValue = previousValue.current;
+    if (invokeEventCallback) {
+      invokeEventCallback("change", {
+        value: newValue,
+        oldValue: oldValue
+      });
+    }
+    onChange === null || onChange === void 0 || onChange(undefined, WmRating, 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) {
+    if (readonly) return;
+    var newRating = rate.index === selectedRatingValue ? 0 : rate.index;
+    setSelectedRatingValue(newRating);
+    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);
+
+    // 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)
+        };
+      });
+    }
+
+    // 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)) {
+      setRatingItems(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 onDatavalueChange = (0, _react.useCallback)(function (dataVal) {
+    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) {
+        setSelectedRatingValue(0);
+        setCurrentCaption(caption || "");
+        updateCaptionElement(caption || "");
+      } else {
+        setSelectedRatingValue(selectedItem.index);
+        setCurrentCaption(selectedItem.label);
+        updateCaptionElement(selectedItem.label);
+      }
+    } else {
+      if (!isNaN(Number(dataVal))) {
+        var rating = Math.min(Math.max(parseFloat(dataVal), 0), maxvalue || DEFAULT_MAX_VALUE);
+        setSelectedRatingValue(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 {
+        setSelectedRatingValue(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 () {
+    if (datavalue !== undefined) {
+      onDatavalueChange(datavalue);
+    }
+  }, [datavalue]);
+
+  // Render methods
+  var renderStar = function renderStar(rate) {
+    var _getStarState = getStarState(rate.index),
+      isActive = _getStarState.isActive,
+      iconClass = _getStarState.iconClass,
+      sx = _getStarState.sx;
+    return __jsx(_Tooltip["default"], {
+      key: rate.key,
+      title: rate.label,
+      enterDelay: 500,
+      enterNextDelay: 500
+    }, __jsx(_material.Box, {
+      component: "label",
+      onClick: function onClick() {
+        return handleRatingClick(rate);
+      },
+      onMouseOver: function onMouseOver() {
+        return handleMouseOver(rate);
+      },
+      onMouseLeave: handleMouseLeave,
+      sx: sx,
+      className: (0, _clsx["default"])("app-icon-container", isActive && "active")
+    }, __jsx(_material.Box, {
+      component: "i",
+      className: (0, _clsx["default"])("app-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, {
+    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 || "")));
+});
+WmRating.displayName = "WmRating";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmRating));

package/components/input/rating/props.js

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