@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -1,478 +1,561 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmCheckboxset = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _List = _interopRequireDefault(require("@mui/material/List"));
-var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _lodashEs = require("lodash-es");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _constants = require("@wavemaker-ai/react-runtime/components/constants");
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _input = require("@base-ui-components/react/input");
-var _utils = require("./utils");
-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" != _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_CLASS = "app-checkboxset list-group inline";
-
-// Helper function to normalize datavalue to always be an array
-var normalizeDatavalue = function normalizeDatavalue(datavalue) {
-  if (datavalue === undefined || datavalue === null) {
+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, useEffect, useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+import { find, isArray, isEqual, isString, toString, get } from "lodash-es";
+import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
+import { defaultItems } from "../../../constants";
+import {
+  transformDataset,
+  transformDataWithKeys
+} from "../../../../utils/transformedDataset-utils";
+import { Input } from "@base-ui-components/react/input";
+import { getCheckboxsetDisplayValues } from "./utils";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import { getItemsPerRowClass } from "../../../data/list/utils/list-helpers";
+import { ALL_FIELDS } from "../../../constants";
+import withStandalone from "../../../../higherOrder/withStandalone";
+import {
+  CustomTemplateCaption,
+  useCustomTemplate
+} from "../../../common/customTemplate";
+const DEFAULT_CLASS = "app-checkboxset list-group inline";
+const normalizeDatavalue = (datavalue) => {
+  if (datavalue === void 0 || datavalue === null) {
     return [];
   }
-  if ((0, _lodashEs.isArray)(datavalue)) {
+  if (isArray(datavalue)) {
     return datavalue;
   }
-  if ((0, _lodashEs.isString)(datavalue)) {
-    return datavalue.split(",").map(function (item) {
-      return item.trim();
-    });
+  if (isString(datavalue)) {
+    return datavalue.split(",").map((item) => item.trim());
   }
-  // Convert single value to array
   return [datavalue];
 };
-var WmCheckboxset = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _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$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$datafield = props.datafield,
-    datafield = _props$datafield === void 0 ? "" : _props$datafield,
-    _props$displayfield = props.displayfield,
-    displayfield = _props$displayfield === void 0 ? "" : _props$displayfield,
-    getDisplayExpression = props.getDisplayExpression,
-    _props$dataset = props.dataset,
-    dataset = _props$dataset === void 0 ? "Option 1, Option 2, Option 3" : _props$dataset,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? [] : _props$datavalue,
-    _props$usekeys = props.usekeys,
-    usekeys = _props$usekeys === void 0 ? false : _props$usekeys,
-    _props$groupby = props.groupby,
-    groupby = _props$groupby === void 0 ? "" : _props$groupby,
-    _props$match = props.match,
-    match = _props$match === void 0 ? "" : _props$match,
-    _props$orderby = props.orderby,
-    orderby = _props$orderby === void 0 ? "" : _props$orderby,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? "stacked" : _props$layout,
-    itemclass = props.itemclass,
-    listclass = props.listclass,
-    _props$showcount = props.showcount,
-    showcount = _props$showcount === void 0 ? false : _props$showcount,
-    _props$show = props.show,
-    show = _props$show === void 0 ? true : _props$show,
-    name = props.name,
-    _props$collapsible = props.collapsible,
-    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
-    _props$collapsed = props.collapsed,
-    collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
-    _props$tabIndex = props.tabIndex,
-    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
-    styles = props.styles,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    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,
-    _props$groupedData = props.groupedData,
-    groupedData = _props$groupedData === void 0 ? [] : _props$groupedData,
-    onchange = props.onchange,
-    validation = props.validation,
-    isDestroyed = props.isDestroyed,
-    _props$compareby = props.compareby,
-    compareby = _props$compareby === void 0 ? [] : _props$compareby,
-    itemsperrow = props.itemsperrow,
-    displayValue = props.displayValue,
-    listener = props.listener,
-    className = props.className,
-    dataPath = props.dataPath;
-  var _useState = (0, _react.useState)({}),
-    expandedItems = _useState[0],
-    setExpandedItems = _useState[1];
-  var _useState2 = (0, _react.useState)(function () {
-      return normalizeDatavalue(datavalue);
-    }),
-    localSelectedKeys = _useState2[0],
-    setLocalSelectedKeys = _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];
-
-  // Generate itemsPerRowClass
-  var itemsPerRowClass = (0, _react.useMemo)(function () {
-    return (0, _listHelpers.getItemsPerRowClass)(itemsperrow);
-  }, [itemsperrow]);
-  var transformedDataset = (0, _react.useMemo)(function () {
-    if (!dataset) return [];
-    if (usekeys) {
-      return (0, _transformedDatasetUtils.transformDataWithKeys)(dataset);
-    }
-    var data = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, getDisplayExpression, orderby, groupby, dataPath, "", match);
-    return data;
-  }, [dataset, datafield, displayfield, getDisplayExpression, orderby, groupby, match, 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);
+const WmCheckboxset = memo(
+  (props) => {
+    const {
+      disabled = false,
+      readonly = false,
+      required = false,
+      label = "",
+      datafield = "",
+      displayfield = "",
+      getDisplayExpression,
+      dataset = "Option 1, Option 2, Option 3",
+      datavalue = [],
+      usekeys = false,
+      groupby = "",
+      match = "",
+      orderby = "",
+      layout = "stacked",
+      itemclass,
+      listclass,
+      showcount = false,
+      show = true,
+      name,
+      collapsible = false,
+      collapsed = false,
+      tabIndex = 0,
+      styles,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      datasetItems = [],
+      selectedItems = [],
+      groupedData = [],
+      onchange,
+      validation,
+      isDestroyed,
+      compareby = [],
+      itemsperrow,
+      displayValue,
+      listener,
+      className,
+      dataPath,
+      content
+    } = props;
+    const { templateName } = useCustomTemplate({ content, name, listener });
+    const [expandedItems, setExpandedItems] = useState({});
+    const [localSelectedKeys, setLocalSelectedKeys] = useState(
+      () => normalizeDatavalue(datavalue)
+    );
+    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 transformedDataset = useMemo(() => {
+      if (!dataset) return [];
+      if (usekeys) {
+        return transformDataWithKeys(dataset);
       }
-    } catch (e) {
-      console.error("WmCheckboxset: Error processing dataset", e);
-      setError("Error processing dataset");
-      setLocalDatasetItems([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [dataset, transformedDataset]);
-
-  // Process grouping
-  (0, _react.useEffect)(function () {
-    if (groupby && localDatasetItems.length > 0) {
+      const data = transformDataset(
+        dataset,
+        datafield,
+        displayfield,
+        void 0,
+        getDisplayExpression,
+        orderby,
+        groupby,
+        dataPath,
+        "",
+        match
+      );
+      return data;
+    }, [
+      dataset,
+      datafield,
+      displayfield,
+      getDisplayExpression,
+      orderby,
+      groupby,
+      match,
+      usekeys,
+      dataPath
+    ]);
+    useEffect(() => {
+      setIsLoading(true);
+      setError(null);
       try {
-        var _groupedData = transformedDataset;
-        setGroupedDataset(function (prevGrouped) {
-          if (!(0, _lodashEs.isEqual)(prevGrouped, _groupedData)) {
-            return _groupedData;
-          }
-          return prevGrouped;
-        });
-        if (collapsible) {
-          var initialExpandedState = {};
-          _groupedData.forEach(function (group) {
-            initialExpandedState[group.key] = !collapsed;
+        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("WmCheckboxset: Error grouping data", e);
-        setGroupedDataset([]);
+        console.error("WmCheckboxset: Error processing dataset", e);
+        setError("Error processing dataset");
+        setLocalDatasetItems([]);
+      } finally {
+        setIsLoading(false);
       }
-    } else {
-      setGroupedDataset([]);
-    }
-  }, [groupby, localDatasetItems, collapsible, transformedDataset, collapsed]);
-
-  // Initialize selected keys from datavalue or from selectedItems
-  (0, _react.useEffect)(function () {
-    var normalizedDatavalue = normalizeDatavalue(datavalue);
-    if (!(0, _lodashEs.isEqual)(normalizedDatavalue, localSelectedKeys) && datavalue !== undefined) {
-      if (normalizedDatavalue.length > 0) {
-        setLocalSelectedKeys(normalizedDatavalue);
-      } else if (selectedItems && selectedItems.length > 0) {
-        var matchedKeys = selectedItems.map(function (selectedVal) {
-          var selectedItem = (0, _lodashEs.find)(localDatasetItems, function (item) {
-            if ((0, _typeof2["default"])(selectedVal) === "object" && (0, _typeof2["default"])(item.value) === "object") {
-              if (compareby && compareby.length) {
-                return compareby.every(function (field) {
-                  return (0, _lodashEs.get)(selectedVal, field) === (0, _lodashEs.get)(item.value, field);
-                });
-              }
-              return (0, _lodashEs.isEqual)(selectedVal, item.value);
+    }, [dataset, transformedDataset]);
+    useEffect(() => {
+      if (groupby && localDatasetItems.length > 0) {
+        try {
+          const groupedData2 = transformedDataset;
+          setGroupedDataset((prevGrouped) => {
+            if (!isEqual(prevGrouped, groupedData2)) {
+              return groupedData2;
             }
-            return (0, _lodashEs.toString)(selectedVal) === (0, _lodashEs.toString)(item.value);
+            return prevGrouped;
           });
-          return selectedItem ? selectedItem.key : null;
-        }).filter(function (key) {
-          return key !== null;
-        });
-        if (matchedKeys.length > 0 && !(0, _lodashEs.isEqual)(matchedKeys, localSelectedKeys)) {
-          setLocalSelectedKeys(matchedKeys);
+          if (collapsible) {
+            const initialExpandedState = {};
+            groupedData2.forEach((group) => {
+              initialExpandedState[group.key] = !collapsed;
+            });
+            setExpandedItems(initialExpandedState);
+          }
+        } catch (e) {
+          console.error("WmCheckboxset: Error grouping data", e);
+          setGroupedDataset([]);
         }
-      } else if (normalizedDatavalue.length == 0 && (!datavalue || datavalue.length == 0)) {
-        setLocalSelectedKeys([]);
+      } else {
+        setGroupedDataset([]);
       }
-    }
-  }, [datavalue]); // Removed localSelectedKeys from deps
-
-  (0, _react.useEffect)(function () {
-    if (onchange && !(0, _lodashEs.isEqual)(localSelectedKeys, datavalue)) {
-      var timeoutId = setTimeout(function () {
-        onchange(localSelectedKeys);
-      }, 0);
-      return function () {
-        return clearTimeout(timeoutId);
-      };
-    }
-  }, [localSelectedKeys, onchange, datavalue]);
-  var handleGroupClick = (0, _react.useCallback)(function (key, event) {
-    setExpandedItems(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, (0, _defineProperty2["default"])({}, key, !prevState[key]));
-    });
-  }, []);
-  var handleCheckboxChange = (0, _react.useCallback)(function (event, key, dataObject) {
-    if (disabled || readonly) return;
-    var currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
-    var isCurrentlySelected = currentSelectedKeys.some(function (k) {
-      if (datafield == _constants.ALL_FIELDS) {
-        if (usekeys) {
-          return (0, _lodashEs.toString)(k) === (0, _lodashEs.toString)(key);
+    }, [groupby, localDatasetItems, collapsible, transformedDataset, collapsed]);
+    useEffect(() => {
+      const normalizedDatavalue = normalizeDatavalue(datavalue);
+      if (!isEqual(normalizedDatavalue, localSelectedKeys) && datavalue !== void 0) {
+        if (normalizedDatavalue.length > 0) {
+          setLocalSelectedKeys(normalizedDatavalue);
+        } else if (selectedItems && selectedItems.length > 0) {
+          const matchedKeys = selectedItems.map((selectedVal) => {
+            const selectedItem = find(localDatasetItems, (item) => {
+              if (typeof selectedVal === "object" && typeof item.value === "object") {
+                if (compareby && compareby.length) {
+                  return compareby.every(
+                    (field) => get(selectedVal, field) === get(item.value, field)
+                  );
+                }
+                return isEqual(selectedVal, item.value);
+              }
+              return toString(selectedVal) === toString(item.value);
+            });
+            return selectedItem ? selectedItem.key : null;
+          }).filter((key) => key !== null);
+          if (matchedKeys.length > 0 && !isEqual(matchedKeys, localSelectedKeys)) {
+            setLocalSelectedKeys(matchedKeys);
+          }
+        } else if (normalizedDatavalue.length == 0 && (!datavalue || datavalue.length == 0)) {
+          setLocalSelectedKeys([]);
         }
-        return (0, _lodashEs.isEqual)(k, dataObject);
-      }
-      if ((0, _typeof2["default"])(k) === "object" && datafield) {
-        return k[datafield] === key;
       }
-      return (0, _lodashEs.toString)(k) === (0, _lodashEs.toString)(key);
-    });
-    var isChecked = !isCurrentlySelected;
-    var newKeys;
-    if (isChecked) {
-      var selectedItem = (0, _lodashEs.find)(localDatasetItems, function (item) {
-        if (datafield == _constants.ALL_FIELDS) {
-          return (0, _lodashEs.isEqual)(item.value, dataObject);
-        }
-        return (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(key);
-      });
-      if (usekeys) {
-        newKeys = [].concat((0, _toConsumableArray2["default"])(currentSelectedKeys), [key]);
-      } else {
-        var value;
-        if ((0, _typeof2["default"])(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) == "object") {
-          var _selectedItem$value;
-          // @ts-expect-error this is internal property
-          value = selectedItem === null || selectedItem === void 0 || (_selectedItem$value = selectedItem.value) === null || _selectedItem$value === void 0 ? void 0 : _selectedItem$value.value;
-        } else {
-          value = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value;
-        }
-        newKeys = [].concat((0, _toConsumableArray2["default"])(currentSelectedKeys), [(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) || key]);
+    }, [datavalue]);
+    useEffect(() => {
+      if (onchange && !isEqual(localSelectedKeys, datavalue)) {
+        const timeoutId = setTimeout(() => {
+          onchange(localSelectedKeys);
+        }, 0);
+        return () => clearTimeout(timeoutId);
       }
-    } else {
-      newKeys = currentSelectedKeys.filter(function (k) {
-        if (datafield == _constants.ALL_FIELDS) {
+    }, [localSelectedKeys, onchange, datavalue]);
+    const handleGroupClick = useCallback((key, event) => {
+      setExpandedItems((prevState) => __spreadProps(__spreadValues({}, prevState), { [key]: !prevState[key] }));
+    }, []);
+    const handleCheckboxChange = useCallback(
+      (event, key, dataObject) => {
+        var _a;
+        if (disabled || readonly) return;
+        const currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
+        const isCurrentlySelected = currentSelectedKeys.some((k) => {
+          if (datafield == ALL_FIELDS) {
+            if (usekeys) {
+              return toString(k) === toString(key);
+            }
+            return isEqual(k, dataObject);
+          }
+          if (typeof k === "object" && datafield) {
+            return k[datafield] === key;
+          }
+          return toString(k) === toString(key);
+        });
+        const isChecked = !isCurrentlySelected;
+        let newKeys;
+        if (isChecked) {
+          const selectedItem = find(localDatasetItems, (item) => {
+            if (datafield == ALL_FIELDS) {
+              return isEqual(item.value, dataObject);
+            }
+            return toString(item.key) === toString(key);
+          });
           if (usekeys) {
-            return (0, _lodashEs.toString)(k) !== (0, _lodashEs.toString)(key);
+            newKeys = [...currentSelectedKeys, key];
+          } else {
+            let value;
+            if (typeof (selectedItem == null ? void 0 : selectedItem.value) == "object") {
+              value = (_a = selectedItem == null ? void 0 : selectedItem.value) == null ? void 0 : _a.value;
+            } else {
+              value = selectedItem == null ? void 0 : selectedItem.value;
+            }
+            newKeys = [...currentSelectedKeys, (selectedItem == null ? void 0 : selectedItem.value) || key];
           }
-          return !(0, _lodashEs.isEqual)(k, dataObject);
+        } else {
+          newKeys = currentSelectedKeys.filter((k) => {
+            if (datafield == ALL_FIELDS) {
+              if (usekeys) {
+                return toString(k) !== toString(key);
+              }
+              return !isEqual(k, dataObject);
+            }
+            if (typeof k === "object" && datafield) {
+              return k[datafield] !== key;
+            }
+            return toString(k) !== toString(key);
+          });
         }
-        if ((0, _typeof2["default"])(k) === "object" && datafield) {
-          return k[datafield] !== key;
+        setLocalSelectedKeys(newKeys);
+        if (onchange) {
+          onchange(newKeys);
         }
-        return (0, _lodashEs.toString)(k) !== (0, _lodashEs.toString)(key);
-      });
-    }
-    setLocalSelectedKeys(newKeys);
-    if (onchange) {
-      onchange(newKeys);
-    }
-    if (onChange && name) {
-      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newKeys, currentSelectedKeys);
+        if (onChange && name) {
+          onChange(event, listener == null ? void 0 : listener.Widgets[name], newKeys, currentSelectedKeys);
+        }
+        if (onClick && name) {
+          onClick(event, listener == null ? void 0 : listener.Widgets[name]);
+        }
+        if (listener == null ? void 0 : listener.onChange) {
+          const displayValues = getCheckboxsetDisplayValues(
+            localDatasetItems,
+            newKeys,
+            datafield,
+            usekeys
+          );
+          listener.onChange(props.fieldName || name, {
+            datavalue: newKeys,
+            displayValue: displayValues
+          });
+        }
+      },
+      [
+        localDatasetItems,
+        localSelectedKeys,
+        disabled,
+        readonly,
+        usekeys,
+        datafield,
+        onchange,
+        props,
+        onChange,
+        name
+      ]
+    );
+    const isItemChecked = useCallback(
+      (item) => {
+        const currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
+        return currentSelectedKeys.some((k) => {
+          if (datafield == ALL_FIELDS) {
+            return usekeys ? toString(k) === toString(item.key) : isEqual(k, item.value);
+          }
+          return toString(k) === toString(item.key);
+        });
+      },
+      [localSelectedKeys, datafield, usekeys]
+    );
+    const renderCheckboxItem = useCallback(
+      (item, index, isGrouped = false) => {
+        const isChecked = isItemChecked(item);
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            onClick: (e) => {
+              const tag = e.target.tagName;
+              if (tag !== "INPUT" && tag !== "LABEL" && tag !== "SPAN" && !templateName) {
+                handleCheckboxChange(e, toString(item.key), item == null ? void 0 : item.dataObject);
+              }
+            },
+            component: "li",
+            className: clsx(
+              "wm-checkboxset-item-reset",
+              "checkbox app-checkbox",
+              isGrouped && "group-list-item",
+              itemclass,
+              itemsPerRowClass,
+              {
+                active: isChecked,
+                disabled: disabled || readonly
+              }
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: clsx("app-checkboxset-label", { disabled }),
+                title: templateName ? void 0 : item.label,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      name: `checkboxset_${name}`,
+                      type: "checkbox",
+                      className: clsx((disabled || readonly) && "wm-checkboxset-input-readonly"),
+                      disabled: disabled || readonly,
+                      "data-attr-index": item.key,
+                      value: item.key,
+                      tabIndex,
+                      checked: isChecked,
+                      role: "checkbox",
+                      "aria-checked": isChecked,
+                      onChange: (e) => handleCheckboxChange(e, toString(item.key), item == null ? void 0 : item.dataObject)
+                    }
+                  ),
+                  templateName ? /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      component: "span",
+                      className: "caption customTemplate",
+                      id: `checkbox-list-label-${item.key + "_" + index}`,
+                      children: /* @__PURE__ */ jsx(
+                        CustomTemplateCaption,
+                        {
+                          templateName,
+                          item,
+                          index,
+                          widgetName: name,
+                          listener
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      component: "span",
+                      className: "caption",
+                      id: `checkbox-list-label-${item.key + "_" + index}`,
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          toString(item.key + "_" + index)
+        );
+      },
+      [
+        isItemChecked,
+        handleCheckboxChange,
+        disabled,
+        readonly,
+        tabIndex,
+        name,
+        itemclass,
+        itemsPerRowClass,
+        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__ */ jsxs(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);
+                    }
+                  }
+                ),
+                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, collapsible, showcount]
+    );
+    if (error) {
+      return /* @__PURE__ */ jsx("div", { className: "error-message", children: error });
     }
-    if (onClick && name) {
-      onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    if (isLoading) {
+      return /* @__PURE__ */ jsx("div", { className: "loading-state", children: "Loading..." });
     }
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      var displayValues = (0, _utils.getCheckboxsetDisplayValues)(localDatasetItems, newKeys, datafield, usekeys);
-      listener.onChange(props.fieldName || name, {
-        datavalue: newKeys,
-        displayValue: displayValues
-      });
+    if (!localDatasetItems || localDatasetItems.length === 0) {
+      return /* @__PURE__ */ jsx(List, { className: clsx(DEFAULT_CLASS, itemclass, listclass), sx: styles, children: /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(ListItemText, { primary: "No items to display" }) }) });
     }
-  }, [localDatasetItems, localSelectedKeys, disabled, readonly, usekeys, datafield, onchange, props, onChange, name]);
-  var isItemChecked = (0, _react.useCallback)(function (item) {
-    var currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
-    return currentSelectedKeys.some(function (k) {
-      if (datafield == _constants.ALL_FIELDS) {
-        return usekeys ? (0, _lodashEs.toString)(k) === (0, _lodashEs.toString)(item.key) : (0, _lodashEs.isEqual)(k, item.value);
+    const handleMouseEnter = (event) => {
+      if (onMouseEnter) {
+        onMouseEnter(event, listener == null ? void 0 : listener.Widgets[name]);
       }
-      return (0, _lodashEs.toString)(k) === (0, _lodashEs.toString)(item.key);
-    });
-  }, [localSelectedKeys, datafield, usekeys]);
-  var renderCheckboxItem = (0, _react.useCallback)(function (item, index) {
-    var isChecked = isItemChecked(item);
-    return __jsx(_ListItem["default"], {
-      key: (0, _lodashEs.toString)(item.key + "_" + index),
-      onClick: function onClick(e) {
-        var tag = e.target.tagName;
-        if (tag !== "INPUT" && tag !== "LABEL" && tag !== "SPAN") {
-          handleCheckboxChange(e, (0, _lodashEs.toString)(item.key), item === null || item === void 0 ? void 0 : item.dataObject);
-        }
-      },
-      component: "li",
-      className: (0, _clsx["default"])("wm-checkboxset-item-reset", "checkbox app-checkbox", itemclass, itemsPerRowClass, {
-        active: isChecked,
-        disabled: disabled || readonly
-      })
-    }, __jsx("label", {
-      className: (0, _clsx["default"])("app-checkboxset-label", {
-        disabled: disabled
-      }),
-      title: item.label
-    }, __jsx(_input.Input, {
-      name: "checkboxset_".concat(name),
-      type: "checkbox",
-      className: (0, _clsx["default"])((disabled || readonly) && "wm-checkboxset-input-readonly"),
-      disabled: disabled || readonly,
-      "data-attr-index": item.key,
-      value: item.key,
-      tabIndex: tabIndex,
-      checked: isChecked,
-      role: "checkbox",
-      "aria-checked": isChecked,
-      onChange: function onChange(e) {
-        return handleCheckboxChange(e, (0, _lodashEs.toString)(item.key), item === null || item === void 0 ? void 0 : item.dataObject);
+    };
+    const handleMouseLeave = (event) => {
+      if (onMouseLeave) {
+        onMouseLeave(event, listener == null ? void 0 : listener.Widgets[name]);
       }
-    }), __jsx(_Typography["default"], {
-      component: "span",
-      className: "caption",
-      id: "checkbox-list-label-".concat(item.key + "_" + index)
-    }, item.label)));
-  }, [isItemChecked, handleCheckboxChange, disabled, readonly, tabIndex, name, itemclass, itemsPerRowClass]);
-  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);
+    };
+    return /* @__PURE__ */ jsxs(
+      List,
+      __spreadProps(__spreadValues({
+        hidden: props.hidden,
+        style: styles,
+        className: clsx(DEFAULT_CLASS, className, itemclass, listclass),
+        onMouseEnter: (event) => handleMouseEnter(event),
+        onMouseLeave: (event) => handleMouseLeave(event),
+        "aria-readonly": readonly,
+        name,
+        role: "group"
+      }, { datafield, displayfield }), {
+        children: [
+          label && /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", component: "div", className: "wm-checkboxset-label-row", children: [
+            label,
+            " ",
+            required && /* @__PURE__ */ jsx("span", { className: "wm-checkboxset-required-mark", children: "*" })
+          ] }),
+          groupby && groupedDataset.length > 0 ? groupedDataset.map((group) => {
+            var _a;
+            return /* @__PURE__ */ jsx(
+              List,
+              {
+                component: "li",
+                className: "app-list-item-group",
+                role: "presentation",
+                children: /* @__PURE__ */ jsxs(
+                  List,
+                  {
+                    component: "ul",
+                    className: clsx("item-group", "wm-checkboxset-group-list", {
+                      "collapse-open": expandedItems[group.key]
+                    }),
+                    children: [
+                      renderGroupHeader(group),
+                      (!collapsible || expandedItems[group.key]) && ((_a = group.data) == null ? void 0 : _a.map((item, index) => renderCheckboxItem(item, index, true)))
+                    ]
+                  }
+                )
+              },
+              `group_${group.key}`
+            );
+          }) : localDatasetItems.map((item, index) => renderCheckboxItem(item, index))
+        ]
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "dataset",
+      "show",
+      "disabled",
+      "readonly",
+      "orderby",
+      "groupby",
+      "collapsible",
+      "datasetItems",
+      "collapsed",
+      "onClick",
+      "onChange",
+      "onMouseEnter",
+      "onMouseLeave",
+      "getDisplayExpression",
+      "datafield",
+      "displayfield",
+      "dataset",
+      "datavalue",
+      "usekeys",
+      "groupby",
+      "hidden"
+    ];
+    return keys.every((key) => {
+      if (key === "datasetItems") {
+        return isEqual(prev[key], current[key]);
       }
-    }), 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, collapsible, showcount]);
-  if (error) {
-    return __jsx("div", {
-      className: "error-message"
-    }, error);
-  }
-  if (isLoading) {
-    return __jsx("div", {
-      className: "loading-state"
-    }, "Loading...");
-  }
-  if (!localDatasetItems || localDatasetItems.length === 0) {
-    return __jsx(_List["default"], {
-      className: (0, _clsx["default"])(DEFAULT_CLASS, itemclass, listclass),
-      sx: styles
-    }, __jsx(_ListItem["default"], null, __jsx(_ListItemText["default"], {
-      primary: "No items to display"
-    })));
+      return prev[key] === current[key];
+    });
   }
-  var handleMouseEnter = function handleMouseEnter(event) {
-    if (onMouseEnter) {
-      onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }
-  };
-  var handleMouseLeave = function handleMouseLeave(event) {
-    if (onMouseLeave) {
-      onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }
-  };
-  return __jsx(_List["default"], {
-    hidden: props.hidden,
-    style: styles,
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className, itemclass, listclass),
-    onMouseEnter: function onMouseEnter(event) {
-      return handleMouseEnter(event);
-    },
-    onMouseLeave: function onMouseLeave(event) {
-      return handleMouseLeave(event);
-    },
-    "aria-readonly": readonly,
-    name: name,
-    role: "group",
-    datafield: datafield,
-    displayfield: displayfield
-  }, label && __jsx(_Typography["default"], {
-    variant: "subtitle1",
-    component: "div",
-    className: "wm-checkboxset-label-row"
-  }, label, " ", required && __jsx("span", {
-    className: "wm-checkboxset-required-mark"
-  }, "*")), groupby && groupedDataset.length > 0 ? groupedDataset.map(function (group) {
-    var _group$data2;
-    return __jsx(_List["default"], {
-      component: "li",
-      className: "app-list-item-group",
-      role: "presentation",
-      key: "group_".concat(group.key)
-    }, __jsx(_List["default"], {
-      component: "ul",
-      className: (0, _clsx["default"])("item-group", "wm-checkboxset-group-list", {
-        "collapse-open": expandedItems[group.key]
-      })
-    }, renderGroupHeader(group), (!collapsible || expandedItems[group.key]) && ((_group$data2 = group.data) === null || _group$data2 === void 0 ? void 0 : _group$data2.map(function (item, index) {
-      return renderCheckboxItem(item, index);
-    }))));
-  }) : localDatasetItems.map(function (item, index) {
-    return renderCheckboxItem(item, index);
-  }));
-}, function (prev, current) {
-  var keys = ["datavalue", "dataset", "show", "disabled", "readonly", "orderby", "groupby", "collapsible", "datasetItems", "collapsed", "onClick", "onChange", "onMouseEnter", "onMouseLeave", "getDisplayExpression", "datafield", "displayfield", "dataset", "datavalue", "usekeys", "groupby", "hidden"];
-  return keys.every(function (key) {
-    if (key === "datasetItems") {
-      return (0, _lodashEs.isEqual)(prev[key], current[key]);
-    }
-    return prev[key] === current[key];
-  });
-});
+);
 WmCheckboxset.displayName = "WmCheckboxset";
-var WithFormController = (0, _withFormController["default"])(WmCheckboxset);
-var WmCheckboxsetStandalone = exports.WmCheckboxset = (0, _withStandalone["default"])(WithFormController);
-/**
- * The WmCheckboxset component provides a group of checkboxes with dataset binding and grouping support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-checkboxset--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-checkboxset--docs)
- *
- * @param props - {@link WmCheckboxsetProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);
+const WithFormController = withFormController(WmCheckboxset);
+const WmCheckboxsetStandalone = withStandalone(WithFormController);
+var checkboxset_default = withBaseWrapper(WithFormController);
+export {
+  WmCheckboxsetStandalone as WmCheckboxset,
+  checkboxset_default as default
+};