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

package/components/input/default/radioset/index.js

@@ -1,364 +1,423 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmRadioset = 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 _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
-var _List = _interopRequireDefault(require("@mui/material/List"));
-var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _input = require("@base-ui-components/react/input");
-var _lodashEs = require("lodash-es");
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _constants = require("@wavemaker-ai/react-runtime/components/constants");
-var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _listHelpers = require("@wavemaker-ai/react-runtime/components/data/list/utils/list-helpers");
-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" != _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 = "app-radioset list-group inline";
-var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var className = props.className,
-    _props$collapsible = props.collapsible,
-    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
-    _props$compareby = props.compareby,
-    compareby = _props$compareby === void 0 ? [] : _props$compareby,
-    _props$datafield = props.datafield,
-    datafield = _props$datafield === void 0 ? "" : _props$datafield,
-    dataset = props.dataset,
-    datavalue = props.datavalue,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    getDisplayExpression = props.getDisplayExpression,
-    _props$displayfield = props.displayfield,
-    displayfield = _props$displayfield === void 0 ? "" : _props$displayfield,
-    displayValue = props.displayValue,
-    groupby = props.groupby,
-    _props$itemclass = props.itemclass,
-    itemclass = _props$itemclass === void 0 ? "" : _props$itemclass,
-    _props$itemsperrow = props.itemsperrow,
-    itemsperrow = _props$itemsperrow === void 0 ? "xs-1 sm-1 md-1 lg-1" : _props$itemsperrow,
-    _props$listclass = props.listclass,
-    listclass = _props$listclass === void 0 ? "" : _props$listclass,
-    match = props.match,
-    name = props.name,
-    orderby = props.orderby,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    _props$show = props.show,
-    show = _props$show === void 0 ? true : _props$show,
-    _props$showcount = props.showcount,
-    showcount = _props$showcount === void 0 ? false : _props$showcount,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    _props$usekeys = props.usekeys,
-    usekeys = _props$usekeys === void 0 ? false : _props$usekeys,
-    _onClick = props.onClick,
-    onChange = props.onChange,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    _props$datasetItems = props.datasetItems,
-    datasetItems = _props$datasetItems === void 0 ? [] : _props$datasetItems,
-    _props$selectedItems = props.selectedItems,
-    selectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
-    onBlur = props.onBlur,
-    validation = props.validation,
-    groupedData = props.groupedData,
-    externalHandleHeaderClick = props.handleHeaderClick,
-    toggleAllHeaders = props.toggleAllHeaders,
-    isDestroyed = props.isDestroyed,
-    width = props.width,
-    height = props.height,
-    listener = props.listener,
-    styles = props.styles,
-    dataPath = props.dataPath;
-  var _useState = (0, _react.useState)({}),
-    expandedItems = _useState[0],
-    setExpandedItems = _useState[1];
-  var _useState2 = (0, _react.useState)(undefined),
-    selectedKey = _useState2[0],
-    setSelectedKey = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    localDatasetItems = _useState3[0],
-    setLocalDatasetItems = _useState3[1];
-  var _useState4 = (0, _react.useState)([]),
-    groupedDataset = _useState4[0],
-    setGroupedDataset = _useState4[1];
-  var _useState5 = (0, _react.useState)(true),
-    isLoading = _useState5[0],
-    setIsLoading = _useState5[1];
-  var _useState6 = (0, _react.useState)(null),
-    error = _useState6[0],
-    setError = _useState6[1];
-  var itemsPerRowClass = (0, _react.useMemo)(function () {
-    return (0, _listHelpers.getItemsPerRowClass)(itemsperrow);
-  }, [itemsperrow]);
-  var handleBlur = (0, _react.useCallback)(function (e) {
-    if (onBlur) {
-      onBlur(e);
+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]);
     }
-  }, []);
-  var transformedDataset = (0, _react.useMemo)(function () {
-    var resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
-    if (!resolvedDataset) return [];
-    if (usekeys) {
-      return (0, _transformedDatasetUtils.transformDataWithKeys)(resolvedDataset);
-    }
-    return (0, _transformedDatasetUtils.transformDataset)(resolvedDataset, datafield, displayfield, undefined, getDisplayExpression, orderby, groupby, dataPath);
-  }, [dataset, datafield, displayfield, getDisplayExpression, orderby, groupby, usekeys, dataPath]);
-  (0, _react.useEffect)(function () {
-    setIsLoading(true);
-    setError(null);
-    try {
-      if (datasetItems && datasetItems.length > 0) {
-        setLocalDatasetItems(datasetItems);
-      } else if (dataset) {
-        setLocalDatasetItems(function (prevItems) {
-          if (!(0, _lodashEs.isEqual)(prevItems, transformedDataset)) {
-            return transformedDataset;
-          }
-          return prevItems;
-        });
-      } else {
-        setLocalDatasetItems(_constants.defaultItems);
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import Typography from "@mui/material/Typography";
+import RadioGroup from "@mui/material/RadioGroup";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Box from "@mui/material/Box";
+import { Input } from "@base-ui-components/react/input";
+import { find, isEqual, toString } from "lodash-es";
+import {
+  transformDataWithKeys,
+  transformDataset
+} from "../../../../utils/transformedDataset-utils";
+import { defaultItems } from "../../../constants";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import { getItemsPerRowClass } from "../../../data/list/utils/list-helpers";
+import withStandalone from "../../../../higherOrder/withStandalone";
+import {
+  CustomTemplateCaption,
+  useCustomTemplate
+} from "../../../common/customTemplate";
+const DEFAULT_CLASS = "app-radioset list-group inline";
+const WmRadioset = memo(
+  (props) => {
+    const {
+      className,
+      collapsible = false,
+      compareby = [],
+      datafield = "",
+      dataset,
+      datavalue,
+      disabled = false,
+      getDisplayExpression,
+      displayfield = "",
+      displayValue,
+      groupby,
+      itemclass = "",
+      itemsperrow = "xs-1 sm-1 md-1 lg-1",
+      listclass = "",
+      match,
+      name,
+      orderby,
+      readonly = false,
+      required = false,
+      show = true,
+      showcount = false,
+      tabindex = 0,
+      usekeys = false,
+      onClick,
+      onChange,
+      onMouseEnter,
+      onMouseLeave,
+      datasetItems = [],
+      selectedItems = [],
+      onBlur,
+      validation,
+      groupedData,
+      handleHeaderClick: externalHandleHeaderClick,
+      toggleAllHeaders,
+      isDestroyed,
+      width,
+      height,
+      listener,
+      styles,
+      dataPath,
+      content
+    } = props;
+    const { templateName } = useCustomTemplate({ content, name, listener });
+    const [expandedItems, setExpandedItems] = useState({});
+    const [selectedKey, setSelectedKey] = useState(void 0);
+    const [localDatasetItems, setLocalDatasetItems] = useState([]);
+    const [groupedDataset, setGroupedDataset] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const itemsPerRowClass = useMemo(() => getItemsPerRowClass(itemsperrow), [itemsperrow]);
+    const handleBlur = useCallback((e) => {
+      if (onBlur) {
+        onBlur(e);
       }
-    } catch (e) {
-      console.error("WmRadioset: Error processing dataset", e);
-      setError("Error processing dataset");
-      setLocalDatasetItems([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [dataset, transformedDataset]);
-  (0, _react.useEffect)(function () {
-    if (groupby && localDatasetItems.length > 0) {
+    }, []);
+    const transformedDataset = useMemo(() => {
+      const resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+      if (!resolvedDataset) return [];
+      if (usekeys) {
+        return transformDataWithKeys(resolvedDataset);
+      }
+      return transformDataset(
+        resolvedDataset,
+        datafield,
+        displayfield,
+        void 0,
+        getDisplayExpression,
+        orderby,
+        groupby,
+        dataPath
+      );
+    }, [
+      dataset,
+      datafield,
+      displayfield,
+      getDisplayExpression,
+      orderby,
+      groupby,
+      usekeys,
+      dataPath
+    ]);
+    useEffect(() => {
+      setIsLoading(true);
+      setError(null);
       try {
-        setGroupedDataset(function (prevGrouped) {
-          if (!(0, _lodashEs.isEqual)(prevGrouped, transformedDataset)) {
-            return transformedDataset;
-          }
-          return prevGrouped;
-        });
-        if (collapsible) {
-          var initialExpandedState = {};
-          transformedDataset.forEach(function (group) {
-            initialExpandedState[group.key] = true;
+        if (datasetItems && datasetItems.length > 0) {
+          setLocalDatasetItems(datasetItems);
+        } else if (dataset) {
+          setLocalDatasetItems((prevItems) => {
+            if (!isEqual(prevItems, transformedDataset)) {
+              return transformedDataset;
+            }
+            return prevItems;
           });
-          setExpandedItems(initialExpandedState);
+        } else {
+          setLocalDatasetItems(defaultItems);
         }
       } catch (e) {
-        console.error("WmRadioset: Error grouping data", e);
+        console.error("WmRadioset: Error processing dataset", e);
+        setError("Error processing dataset");
+        setLocalDatasetItems([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }, [dataset, transformedDataset]);
+    useEffect(() => {
+      if (groupby && localDatasetItems.length > 0) {
+        try {
+          setGroupedDataset((prevGrouped) => {
+            if (!isEqual(prevGrouped, transformedDataset)) {
+              return transformedDataset;
+            }
+            return prevGrouped;
+          });
+          if (collapsible) {
+            const initialExpandedState = {};
+            transformedDataset.forEach((group) => {
+              initialExpandedState[group.key] = true;
+            });
+            setExpandedItems(initialExpandedState);
+          }
+        } catch (e) {
+          console.error("WmRadioset: Error grouping data", e);
+          setGroupedDataset([]);
+        }
+      } else {
         setGroupedDataset([]);
       }
-    } else {
-      setGroupedDataset([]);
-    }
-  }, [groupby, localDatasetItems, collapsible, transformedDataset]);
-  (0, _react.useEffect)(function () {
-    setSelectedKey(datavalue);
-  }, [datavalue]);
-  var handleGroupClick = (0, _react.useCallback)(function (key, event) {
-    setExpandedItems(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, (0, _defineProperty2["default"])({}, key, !prevState[key]));
-    });
-    if (externalHandleHeaderClick && event) {
-      externalHandleHeaderClick(key);
+    }, [groupby, localDatasetItems, collapsible, transformedDataset]);
+    useEffect(() => {
+      setSelectedKey(datavalue);
+    }, [datavalue]);
+    const handleGroupClick = useCallback(
+      (key, event) => {
+        setExpandedItems((prevState) => __spreadProps(__spreadValues({}, prevState), { [key]: !prevState[key] }));
+        if (externalHandleHeaderClick && event) {
+          externalHandleHeaderClick(key);
+        }
+        if (onClick) {
+          onClick(event, listener == null ? void 0 : listener.Widgets[name]);
+        }
+      },
+      [externalHandleHeaderClick]
+    );
+    const handleRadioChange = useCallback(
+      (event) => {
+        const newSelectedKey = event.target.value;
+        if (disabled || readonly) return;
+        setSelectedKey(newSelectedKey);
+        const selectedItem = find(
+          localDatasetItems,
+          (item) => toString(item.key) === toString(newSelectedKey)
+        );
+        if (selectedItem) {
+          if (listener == null ? void 0 : listener.onChange) {
+            listener.onChange(props.fieldName || props.name, {
+              datavalue: selectedItem.key,
+              displayValue: selectedItem.label
+            });
+          }
+          if (onChange) {
+            onChange(event, props, selectedItem.value, selectedKey);
+          }
+        }
+      },
+      [localDatasetItems, onChange, props]
+    );
+    const renderRadio = useCallback(
+      (item, index, isGrouped = false) => {
+        const isChecked = toString(selectedKey).toLowerCase() === toString(item.key).toLowerCase();
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            className: clsx("radio app-radio", itemsPerRowClass, listclass, isGrouped && "group-list-item", itemclass, {
+              active: isChecked
+            }),
+            component: "li",
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                component: "label",
+                className: `app-radioset-label ${disabled || readonly ? "disabled" : ""}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClick && onClick(e);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      "data-attr-index": index,
+                      type: "radio",
+                      checked: isChecked,
+                      disabled: disabled || readonly,
+                      name: `radioset_${name || "unnamed"}`,
+                      tabIndex: tabindex,
+                      "aria-label": item.label,
+                      value: item.key,
+                      id: `radioset_${name || "unnamed"}_${item.key}`,
+                      onChange: handleRadioChange,
+                      role: "radio",
+                      "aria-checked": isChecked
+                    }
+                  ),
+                  templateName ? /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      component: "span",
+                      className: "caption customTemplate",
+                      id: `radioset_${name}_${item.key}_${index}`,
+                      children: /* @__PURE__ */ jsx(
+                        CustomTemplateCaption,
+                        {
+                          templateName,
+                          item,
+                          index,
+                          widgetName: name,
+                          listener
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      component: "span",
+                      className: "caption",
+                      id: `radioset_${name || "unnamed"}_${item.key}`,
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          toString(item.key) + index
+        );
+      },
+      [selectedKey, handleRadioChange, disabled, readonly, name, templateName]
+    );
+    const renderGroupHeader = useCallback(
+      (group) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            className: clsx("list-group-header", collapsible ? "collapsible-content" : ""),
+            onClick: (e) => handleGroupClick(group.key, e),
+            component: "li",
+            children: /* @__PURE__ */ jsxs(Box, { component: "h4", className: "group-title", children: [
+              group.key || "Ungrouped",
+              /* @__PURE__ */ jsx(Box, { component: "div", className: "header-action", children: collapsible ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "i",
+                  className: clsx(
+                    "app-icon wi action",
+                    expandedItems[group.key] ? "wi-chevron-up" : "wi-chevron-down"
+                  ),
+                  title: "Collapse/Expand",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleGroupClick(group.key);
+                  }
+                }
+              ) : null }),
+              showcount && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "label label-default", children: ((_a = group.data) == null ? void 0 : _a.length) || 0 })
+            ] })
+          },
+          `group_${group.key}`
+        );
+      },
+      [expandedItems, handleGroupClick, disabled, readonly, collapsible, showcount]
+    );
+    if (error) {
+      return /* @__PURE__ */ jsx(Box, { className: "error-message", children: error });
     }
-    if (_onClick) {
-      _onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(Box, { className: "loading-state", children: "Loading..." });
     }
-  }, [externalHandleHeaderClick]);
-  var handleRadioChange = (0, _react.useCallback)(function (event) {
-    var newSelectedKey = event.target.value;
-    // check if the selected key is readonly or disabled
-    if (disabled || readonly) return;
-    setSelectedKey(newSelectedKey);
-    var selectedItem = (0, _lodashEs.find)(localDatasetItems, function (item) {
-      return (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(newSelectedKey);
-    });
-    if (selectedItem) {
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(props.fieldName || props.name, {
-          datavalue: selectedItem.key,
-          displayValue: selectedItem.label
-        });
-      }
-      if (onChange) {
-        onChange(event, props, selectedItem.value, selectedKey);
-      }
+    if (!localDatasetItems || localDatasetItems.length === 0) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: clsx(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass),
+          hidden: props.hidden,
+          children: /* @__PURE__ */ jsx(Box, { className: "empty-state", children: "No items to display" })
+        }
+      );
     }
-  }, [localDatasetItems, onChange, props]);
-  var renderRadio = (0, _react.useCallback)(function (item, index) {
-    var isChecked = (0, _lodashEs.toString)(selectedKey).toLowerCase() === (0, _lodashEs.toString)(item.key).toLowerCase();
-    return __jsx(_ListItem["default"], {
-      key: (0, _lodashEs.toString)(item.key) + index,
-      className: (0, _clsx["default"])("radio app-radio", itemsPerRowClass, listclass, itemclass, {
-        active: isChecked
-      }),
-      component: "li"
-    }, __jsx(_Box["default"], {
-      component: "label",
-      className: "app-radioset-label ".concat(disabled || readonly ? "disabled" : ""),
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        _onClick && _onClick(e);
-      }
-    }, __jsx(_input.Input, {
-      "data-attr-index": index,
-      type: "radio",
-      checked: isChecked,
-      disabled: disabled || readonly,
-      name: "radioset_".concat(name || "unnamed"),
-      tabIndex: tabindex,
-      "aria-label": item.label,
-      value: item.key,
-      id: "radioset_".concat(name || "unnamed", "_").concat(item.key),
-      onChange: handleRadioChange,
-      role: "radio",
-      "aria-checked": isChecked
-    }), __jsx("span", {
-      className: "caption customTemplate",
-      id: "radioset_".concat(name || "unnamed", "_").concat(item.key)
-    }, item.label)));
-  }, [selectedKey, handleRadioChange, disabled, readonly, name]);
-  var renderGroupHeader = (0, _react.useCallback)(function (group) {
-    var _group$data;
-    return __jsx(_ListItem["default"], {
-      key: "group_".concat(group.key),
-      className: (0, _clsx["default"])("list-group-header", collapsible ? "collapsible-content" : ""),
-      onClick: function onClick(e) {
-        return handleGroupClick(group.key, e);
-      },
-      component: "li"
-    }, __jsx(_Box["default"], {
-      component: "h4",
-      className: "group-title"
-    }, group.key || "Ungrouped", __jsx(_Box["default"], {
-      component: "div",
-      className: "header-action"
-    }, collapsible ? __jsx(_Box["default"], {
-      component: "i",
-      className: (0, _clsx["default"])("app-icon wi action", expandedItems[group.key] ? "wi-chevron-up" : "wi-chevron-down"),
-      title: "Collapse/Expand",
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        handleGroupClick(group.key);
+    const events = __spreadValues(__spreadValues({}, props.onMouseEnter && { onMouseEnter: props.onMouseEnter }), props.onMouseLeave && { onMouseLeave: props.onMouseLeave });
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({}, events), {
+        hidden: props.hidden,
+        className: clsx(className, "col-sm-12"),
+        sx: __spreadProps(__spreadValues({}, styles), { height, width }),
+        children: [
+          /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              onMouseEnter,
+              onMouseLeave,
+              name: `radioset_${name || "unnamed"}`,
+              value: selectedKey !== void 0 ? toString(selectedKey) : "",
+              onChange: handleRadioChange,
+              onBlur: handleBlur,
+              className: clsx({ "collapsible-radio-group": collapsible }),
+              children: groupby && groupedDataset.length > 0 && !usekeys ? /* @__PURE__ */ jsx(Box, { component: "ul", className: clsx(DEFAULT_CLASS), hidden: props.hidden, children: groupedDataset.map((group) => {
+                var _a, _b;
+                return /* @__PURE__ */ jsx(
+                  List,
+                  {
+                    component: "li",
+                    className: "app-list-item-group",
+                    role: "presentation",
+                    children: /* @__PURE__ */ jsxs(Box, { component: "ul", className: clsx("item-group"), children: [
+                      renderGroupHeader(group),
+                      collapsible ? expandedItems[group.key] ? (_a = group.data) == null ? void 0 : _a.map((item, index) => renderRadio(item, index, true)) : null : (_b = group.data) == null ? void 0 : _b.map((item, index) => renderRadio(item, index, true))
+                    ] })
+                  },
+                  `group_fragment_${group.key}`
+                );
+              }) }) : /* @__PURE__ */ jsx(
+                List,
+                {
+                  name,
+                  role: "radiogroup",
+                  hidden: props.hidden,
+                  className: clsx(
+                    "styledList custom wm-radioset-styled-list",
+                    DEFAULT_CLASS,
+                    collapsible && "wm-radioset-list-collapsible",
+                    disabled && "wm-radioset-list-disabled"
+                  ),
+                  style: {
+                    "--radioset-list-width": width || "100%"
+                  },
+                  children: localDatasetItems.map((item, index) => renderRadio(item, index))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Input, { disabled: disabled || readonly, hidden: true, className: "model-holder" }),
+          (readonly || disabled) && /* @__PURE__ */ jsx(Box, { component: "div", "aria-readonly": "true", className: "readonly-wrapper" })
+        ]
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "dataset",
+      "show",
+      "disabled",
+      "readonly",
+      "orderby",
+      "groupby",
+      "collapsible",
+      "datasetItems",
+      "hidden"
+    ];
+    return keys.every((key) => {
+      if (key === "datasetItems") {
+        return isEqual(prev[key], current[key]);
       }
-    }) : null), showcount && __jsx(_Typography["default"], {
-      variant: "caption",
-      className: "label label-default"
-    }, ((_group$data = group.data) === null || _group$data === void 0 ? void 0 : _group$data.length) || 0)));
-  }, [expandedItems, handleGroupClick, disabled, readonly, collapsible, showcount]);
-  if (error) {
-    return __jsx(_Box["default"], {
-      className: "error-message"
-    }, error);
-  }
-  if (isLoading) {
-    return __jsx(_Box["default"], {
-      className: "loading-state"
-    }, "Loading...");
-  }
-  if (!localDatasetItems || localDatasetItems.length === 0) {
-    return __jsx(_Box["default"], {
-      className: (0, _clsx["default"])(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass),
-      hidden: props.hidden
-    }, __jsx(_Box["default"], {
-      className: "empty-state"
-    }, "No items to display"));
+      return prev[key] === current[key];
+    });
   }
-  var events = _objectSpread(_objectSpread({}, props.onMouseEnter && {
-    onMouseEnter: props.onMouseEnter
-  }), props.onMouseLeave && {
-    onMouseLeave: props.onMouseLeave
-  });
-  return __jsx(_Box["default"], (0, _extends2["default"])({}, events, {
-    hidden: props.hidden,
-    className: (0, _clsx["default"])(className, "col-sm-12"),
-    sx: _objectSpread(_objectSpread({}, styles), {}, {
-      height: height,
-      width: width
-    })
-  }), __jsx(_RadioGroup["default"], {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    name: "radioset_".concat(name || "unnamed"),
-    value: selectedKey !== undefined ? (0, _lodashEs.toString)(selectedKey) : "",
-    onChange: handleRadioChange,
-    onBlur: handleBlur,
-    className: (0, _clsx["default"])({
-      "collapsible-radio-group": collapsible
-    })
-  }, groupby && groupedDataset.length > 0 && !usekeys ? __jsx(_Box["default"], {
-    component: "ul",
-    className: (0, _clsx["default"])(DEFAULT_CLASS),
-    hidden: props.hidden
-  }, groupedDataset.map(function (group) {
-    var _group$data2, _group$data3;
-    return __jsx(_List["default"], {
-      component: "li",
-      className: "app-list-item-group",
-      role: "presentation",
-      key: "group_fragment_".concat(group.key)
-    }, __jsx(_Box["default"], {
-      component: "ul",
-      className: (0, _clsx["default"])("item-group")
-    }, renderGroupHeader(group), collapsible ? expandedItems[group.key] ? (_group$data2 = group.data) === null || _group$data2 === void 0 ? void 0 : _group$data2.map(function (item, index) {
-      return renderRadio(item, index);
-    }) : null : (_group$data3 = group.data) === null || _group$data3 === void 0 ? void 0 : _group$data3.map(function (item, index) {
-      return renderRadio(item, index);
-    })));
-  })) : __jsx(_List["default"], {
-    name: name,
-    role: "radiogroup",
-    hidden: props.hidden,
-    className: (0, _clsx["default"])("styledList custom wm-radioset-styled-list", DEFAULT_CLASS, collapsible && "wm-radioset-list-collapsible", disabled && "wm-radioset-list-disabled"),
-    style: {
-      "--radioset-list-width": width || "100%"
-    }
-  }, localDatasetItems.map(function (item, index) {
-    return renderRadio(item, index);
-  }))), __jsx(_input.Input, {
-    disabled: disabled || readonly,
-    hidden: true,
-    className: "model-holder"
-  }), (readonly || disabled) && __jsx(_Box["default"], {
-    component: "div",
-    "aria-readonly": "true",
-    className: "readonly-wrapper"
-  }));
-}, function (prev, current) {
-  var keys = ["datavalue", "dataset", "show", "disabled", "readonly", "orderby", "groupby", "collapsible", "datasetItems", "hidden"];
-  return keys.every(function (key) {
-    if (key === "datasetItems") {
-      return (0, _lodashEs.isEqual)(prev[key], current[key]);
-    }
-    return prev[key] === current[key];
-  });
-});
+);
 WmRadioset.displayName = "WmRadioset";
-var withForm = (0, _withFormController["default"])(WmRadioset);
-var WmRadiosetStandalone = exports.WmRadioset = (0, _withStandalone["default"])(withForm);
-/**
- * The WmRadioset component provides a radio button group with dataset binding and grouping support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-radioset--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-radioset--docs)
- *
- * @param props - {@link WmRadiosetProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper["default"])(withForm);
+const withForm = withFormController(WmRadioset);
+const WmRadiosetStandalone = withStandalone(withForm);
+var radioset_default = withBaseWrapper(withForm);
+export {
+  WmRadiosetStandalone as WmRadioset,
+  radioset_default as default
+};