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

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

@@ -0,0 +1,478 @@
+"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) {
+    return [];
+  }
+  if ((0, _lodashEs.isArray)(datavalue)) {
+    return datavalue;
+  }
+  if ((0, _lodashEs.isString)(datavalue)) {
+    return datavalue.split(",").map(function (item) {
+      return 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);
+      }
+    } 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) {
+      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;
+          });
+          setExpandedItems(initialExpandedState);
+        }
+      } catch (e) {
+        console.error("WmCheckboxset: Error grouping data", e);
+        setGroupedDataset([]);
+      }
+    } 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);
+            }
+            return (0, _lodashEs.toString)(selectedVal) === (0, _lodashEs.toString)(item.value);
+          });
+          return selectedItem ? selectedItem.key : null;
+        }).filter(function (key) {
+          return key !== null;
+        });
+        if (matchedKeys.length > 0 && !(0, _lodashEs.isEqual)(matchedKeys, localSelectedKeys)) {
+          setLocalSelectedKeys(matchedKeys);
+        }
+      } else if (normalizedDatavalue.length == 0 && (!datavalue || datavalue.length == 0)) {
+        setLocalSelectedKeys([]);
+      }
+    }
+  }, [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);
+        }
+        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]);
+      }
+    } else {
+      newKeys = currentSelectedKeys.filter(function (k) {
+        if (datafield == _constants.ALL_FIELDS) {
+          if (usekeys) {
+            return (0, _lodashEs.toString)(k) !== (0, _lodashEs.toString)(key);
+          }
+          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);
+      });
+    }
+    setLocalSelectedKeys(newKeys);
+    if (onchange) {
+      onchange(newKeys);
+    }
+    if (onChange && name) {
+      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newKeys, currentSelectedKeys);
+    }
+    if (onClick && name) {
+      onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+    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
+      });
+    }
+  }, [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);
+      }
+      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);
+      }
+    }), __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);
+      }
+    }), 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"
+    })));
+  }
+  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);

package/components/input/default/checkboxset/props.d.ts

@@ -0,0 +1,199 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents a single item in the checkboxset dataset.
+ */
+export interface DatasetItem {
+    /** Unique key identifying the item. */
+    key: string | number;
+    /** The value of the item. */
+    value: string | number | boolean;
+    /** Display label for the item. */
+    label: string;
+    /** Whether the item is currently selected. */
+    selected?: boolean;
+    /** The original data object. */
+    dataObject?: Record<string, unknown>;
+}
+/**
+ * Represents a group of dataset items.
+ */
+export interface GroupedDataset {
+    /** Group key/label. */
+    key: string;
+    /** Items in this group. */
+    data: DatasetItem[];
+}
+/**
+ * Props specific to the WmCheckboxset component.
+ */
+export interface CheckboxsetProps {
+    /**
+     * Layout of the checkboxes.
+     * @default "stacked"
+     */
+    layout?: "inline" | "stacked";
+    /**
+     * CSS class applied to each item.
+     */
+    itemclass?: string;
+    /**
+     * CSS class applied to the list container.
+     */
+    listclass?: string;
+    /**
+     * Whether to show the count of selected items.
+     */
+    showcount?: boolean;
+    /**
+     * Whether the checkboxset is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkboxset is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Button type attribute (rarely used).
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * The data source bound to the checkboxset.
+     */
+    dataset?: unknown[] | string | Record<string, unknown>;
+    /**
+     * The field from the dataset to use as the data value.
+     */
+    datafield?: string;
+    /**
+     * The field from the dataset to display as the label.
+     */
+    displayfield?: string;
+    /**
+     * Custom function to compute the display text for each item.
+     */
+    getDisplayExpression?: (data: Record<string, unknown>) => string;
+    /**
+     * The currently selected data values.
+     */
+    datavalue?: unknown[] | unknown;
+    /**
+     * Whether to use keys as values.
+     */
+    usekeys?: boolean;
+    /**
+     * The field to group items by.
+     */
+    groupby?: string;
+    /**
+     * Match mode for filtering.
+     */
+    match?: string;
+    /**
+     * Field(s) to order items by.
+     */
+    orderby?: string;
+    /**
+     * The unique name of the checkboxset widget (required).
+     */
+    name: string;
+    /**
+     * Callback invoked when a checkbox is clicked.
+     */
+    onClick?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    /**
+     * Callback invoked when the selected values change.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.SyntheticEvent, widget: Record<string, unknown>, value: unknown[] | unknown, target: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the widget.
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    /**
+     * Callback invoked when the mouse leaves the widget.
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    /**
+     * Whether a selection is required.
+     */
+    required?: boolean;
+    /**
+     * Label text for the checkboxset.
+     */
+    label?: string;
+    /**
+     * Whether the group is collapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * Whether the checkboxset group is collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Fields used for comparing values.
+     */
+    compareby?: string[];
+    /**
+     * Transformed dataset items (injected by HOC).
+     */
+    datasetItems?: DatasetItem[];
+    /**
+     * Currently selected items (injected by HOC).
+     */
+    selectedItems?: DatasetItem[];
+    /**
+     * Function to transform form data (injected by HOC).
+     */
+    transformFormData?: (containerWidget: Record<string, unknown>, dataset: DatasetItem[], options: Record<string, unknown>) => DatasetItem[];
+    /**
+     * Grouped dataset items.
+     */
+    groupedData?: GroupedDataset[];
+    /**
+     * Legacy change callback.
+     */
+    onchange?: (value: unknown) => void;
+    /**
+     * Legacy blur callback.
+     */
+    onblur?: () => void;
+    /**
+     * Validation configuration.
+     */
+    validation?: Record<string, unknown>;
+    /**
+     * Whether the widget has been destroyed.
+     */
+    isDestroyed?: boolean;
+    /**
+     * Height of the checkboxset container.
+     */
+    height: string | number;
+    /**
+     * Width of the checkboxset container.
+     */
+    width: string | number;
+    /**
+     * Data path for nested data access.
+     */
+    dataPath?: string;
+    /**
+     * Number of items per row.
+     */
+    itemsperrow?: string;
+    /**
+     * Tab index for keyboard navigation.
+     */
+    tabIndex?: number;
+    /**
+     * Formatted display value.
+     */
+    displayValue?: string;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+}
+/**
+ * Combined props for the WmCheckboxset component, including base WaveMaker props.
+ */
+export type WmCheckboxsetProps = Prettify<CheckboxsetProps & BaseProps>;

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

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

package/components/input/default/checkboxset/utils.d.ts

@@ -0,0 +1,2 @@
+import { DatasetItem } from "./props";
+export declare function getCheckboxsetDisplayValues(items: Array<Pick<DatasetItem, "key" | "label" | "value" | "dataObject">>, selectedKeys: any[], datafield: string, usekeys: boolean): string[];