@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,218 @@
+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;
+    activeiconurl?: string;
+    inactiveiconclass?: string;
+    inactiveiconurl?: 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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: 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;
+    activeiconurl?: string;
+    inactiveiconclass?: string;
+    inactiveiconurl?: 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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

package/components/input/rating/index.js

@@ -0,0 +1,473 @@
+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 { WmAppIcon } from "../../common/WmAppIcon";
+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"
+};
+const DEFAULT_COLORS = {
+  inactive: "#ccc"
+};
+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,
+    activeiconurl,
+    inactiveiconclass = DEFAULT_ICON_CLASS.inactive,
+    inactiveiconurl,
+    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);
+  }, []);
+  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);
+    const selectedItem = ratingItems.find((item) => item.index === selectedRatingValue);
+    updateCaptionElement(selectedItem ? selectedItem.label : currentCaption || caption || "");
+  }, [ratingItems, selectedRatingValue, currentCaption, updateCaptionElement, caption]);
+  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()
+      });
+      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;
+    let processedData = [];
+    if (Array.isArray(dataset)) {
+      dataset.forEach((item, idx) => {
+        if (typeof item === "string") {
+          if (item.includes(",")) {
+            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,
+              value: idx + 1,
+              label: item,
+              key: idx + 1
+            });
+          }
+        } else if (typeof item === "object" && item !== null) {
+          processedData.push(item);
+        }
+      });
+    }
+    setProcessedDataset(processedData);
+  }, [dataset]);
+  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 }, (_, i) => ({
+        key: maxVal - i,
+        value: maxVal - i,
+        index: maxVal - i,
+        label: `${maxVal - i}`
+      }));
+    } else {
+      transformedItems.sort((a, b) => a.index - b.index);
+      transformedItems = transformedItems.slice(0, maxVal);
+      transformedItems = transformedItems.map((item, idx) => __spreadProps(__spreadValues({}, item), {
+        index: idx + 1,
+        // Convert to 1-based index
+        key: idx + 1
+      }));
+    }
+    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);
+      (_b = listener == null ? void 0 : listener.onChange) == null ? void 0 : _b.call(listener, name, {
+        ratingItems: transformedItems
+      });
+      if (!data.length || processedDataset.length > 0 && data === processedDataset) {
+        const currentDatasetItems = processedDataset.length > 0 ? processedDataset : datasetItems;
+        if (!isEqual(transformedItems, currentDatasetItems)) {
+          setDatasetItems(transformedItems);
+        }
+      }
+    }
+  }, [
+    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
+          });
+          setCurrentCaption(selectedItem.label);
+          updateCaptionElement(selectedItem.label);
+        }
+      } else {
+        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 || "");
+        }
+      }
+    },
+    [
+      datasetItems,
+      processedDataset,
+      maxvalue,
+      ratingItems,
+      setDatasetItems,
+      updateCaptionElement,
+      caption
+    ]
+  );
+  useEffect(() => {
+    processDataset();
+  }, [processDataset]);
+  useEffect(() => {
+    prepareRatingDataset();
+  }, [prepareRatingDataset]);
+  useEffect(() => {
+    var _a2;
+    if (datavalue !== void 0) {
+      onDatavalueChange(datavalue);
+    }
+    (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+      ratingEl: ratingsRef.current,
+      datavalue
+    });
+  }, [datavalue]);
+  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(
+            WmAppIcon,
+            {
+              iconclass: isActive ? activeiconclass : inactiveiconclass,
+              iconurl: isActive ? activeiconurl : inactiveiconurl,
+              prefabName: props.prefabName,
+              defaultClasses: "wm-rating-star-icon",
+              alt: "Rating"
+            }
+          ),
+          /* @__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 /* @__PURE__ */ jsx(
+    Box,
+    {
+      hidden: props.hidden,
+      sx: __spreadProps(__spreadValues({}, styles), { height, width }),
+      className: clsx("app-ratings", { disabled: readonly }, props.className),
+      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";
+const WithForm = withFormController(WmRating);
+const WmRatingStandalone = withStandalone(WithForm);
+var rating_default = withBaseWrapper(WithForm);
+export {
+  WmRatingStandalone as WmRating,
+  rating_default as default
+};