@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCheckboxsetDisplayValues = getCheckboxsetDisplayValues;
+var _toString = _interopRequireDefault(require("lodash-es/toString"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _constants = require("@wavemaker/react-runtime/components/constants");
+function getCheckboxsetDisplayValues() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var datafield = arguments.length > 2 ? arguments[2] : undefined;
+  var usekeys = arguments.length > 3 ? arguments[3] : undefined;
+  if (!Array.isArray(items) || !Array.isArray(selectedKeys)) {
+    return [];
+  }
+  var isAllFields = datafield === _constants.ALL_FIELDS;
+  return items.filter(function (item) {
+    return selectedKeys.some(function (k) {
+      if (isAllFields) {
+        return usekeys ? (0, _toString["default"])(k) === (0, _toString["default"])(item.key) : (0, _isEqual["default"])(k, item.value);
+      }
+      return (0, _toString["default"])(k) === (0, _toString["default"])(item.key);
+    });
+  }).map(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.label) != null ? String(item.label) : "";
+  });
+}

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

@@ -88,7 +88,7 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
     _props$usekeys = props.usekeys,
     usekeys = _props$usekeys === void 0 ? false : _props$usekeys,
-    onClick = props.onClick,
+    _onClick = props.onClick,
     onChange = props.onChange,
     onMouseenter = props.onMouseenter,
     onMouseleave = props.onMouseleave,
@@ -98,6 +98,7 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     _props$selectedItems = props.selectedItems,
     selectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
     onblur = props.onblur,
+    onBlur = props.onBlur,
     validation = props.validation,
     groupedData = props.groupedData,
     externalHandleHeaderClick = props.handleHeaderClick,
@@ -129,13 +130,18 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
   var itemsPerRowClass = (0, _react.useMemo)(function () {
     return (0, _listHelpers.getItemsPerRowClass)(itemsperrow);
   }, [itemsperrow]);
-  var handleBlur = (0, _react.useCallback)(function () {
-    if (onblur) onblur();
-  }, [onblur]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    if (onBlur) {
+      onBlur(e);
+    }
+  }, []);
   var transformedDataset = (0, _react.useMemo)(function () {
     if (!dataset) return [];
+    if (usekeys) {
+      return (0, _transformedDatasetUtils.transformDataWithKeys)(dataset);
+    }
     return (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, getDisplayExpression, orderby, groupby, dataPath);
-  }, [dataset, datafield, displayfield, getDisplayExpression, orderby, groupby]);
+  }, [dataset, datafield, displayfield, getDisplayExpression, orderby, groupby, usekeys, dataPath]);
   (0, _react.useEffect)(function () {
     setIsLoading(true);
     setError(null);
@@ -194,58 +200,45 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (externalHandleHeaderClick && event) {
       externalHandleHeaderClick(key);
     }
+    if (_onClick) {
+      _onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
   }, [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 (onChange) {
-        onChange(event, props, selectedItem.value, selectedKey);
-      }
       if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(props.name, {
+        listener.onChange(props.fieldName || props.name, {
           datavalue: selectedItem.key,
           displayValue: selectedItem.label
         });
       }
-    }
-  }, [localDatasetItems, onChange, props]);
-  var handleItemClick = (0, _react.useCallback)(function (item, event) {
-    if (disabled || readonly) return;
-    var newKey = (0, _lodashEs.toString)(item.key);
-    setSelectedKey(newKey);
-    if (item) {
-      if (onClick) {
-        onClick(event, props, item.value, selectedKey);
-      }
       if (onChange) {
-        onChange(event, props, item.value, selectedKey);
-      }
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
-          datavalue: newKey,
-          displayValue: item.label
-        }));
+        onChange(event, props, selectedItem.value, selectedKey);
       }
     }
-  }, [disabled, readonly, onClick, onChange, props, name]);
+  }, [localDatasetItems, onChange, props]);
   var renderRadio = (0, _react.useCallback)(function (item, index) {
-    var isChecked = (0, _lodashEs.toString)(selectedKey) === (0, _lodashEs.toString)(item.key);
+    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", {
+      className: (0, _clsx["default"])("radio app-radio", itemsPerRowClass, listclass, itemclass, {
         active: isChecked
       }),
-      onClick: function onClick(e) {
-        return handleItemClick(item, e);
-      },
       component: "li"
     }, __jsx(_Box["default"], {
       component: "label",
-      className: "app-radioset-label ".concat(disabled || readonly ? "disabled" : "")
+      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",
@@ -255,14 +248,16 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
       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(_Box["default"], {
       component: "span",
-      className: "caption customTemplate"
+      className: "caption customTemplate",
+      htmlFor: "radioset_".concat(name || "unnamed", "_").concat(item.key)
     }, item.label)));
-  }, [selectedKey, handleRadioChange, handleItemClick, disabled, readonly, name]);
+  }, [selectedKey, handleRadioChange, disabled, readonly, name]);
   var renderGroupHeader = (0, _react.useCallback)(function (group) {
     var _group$data;
     return __jsx(_ListItem["default"], {
@@ -303,7 +298,8 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
   }
   if (!localDatasetItems || localDatasetItems.length === 0) {
     return __jsx(_Box["default"], {
-      className: (0, _clsx["default"])(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass)
+      className: (0, _clsx["default"])(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass),
+      hidden: props.hidden
     }, __jsx(_Box["default"], {
       className: "empty-state"
     }, "No items to display"));
@@ -314,7 +310,8 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     onMouseLeave: props.onMouseLeave
   });
   return __jsx(_Box["default"], (0, _extends2["default"])({}, events, {
-    className: (0, _clsx["default"])(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass),
+    hidden: props.hidden,
+    className: (0, _clsx["default"])(className, DEFAULT_CLASS),
     sx: _objectSpread(_objectSpread({}, styles), {}, {
       height: height,
       width: width
@@ -329,7 +326,7 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: (0, _clsx["default"])({
       "collapsible-radio-group": collapsible
     })
-  }, groupby && groupedDataset.length > 0 ? __jsx(_Box["default"], {
+  }, groupby && groupedDataset.length > 0 && !usekeys ? __jsx(_Box["default"], {
     component: "ul",
     className: (0, _clsx["default"])(DEFAULT_CLASS)
   }, groupedDataset.map(function (group) {
@@ -368,7 +365,7 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: "readonly-wrapper"
   }));
 }, function (prev, current) {
-  var keys = ["datavalue", "dataset", "show", "disabled", "readonly", "orderby", "groupby", "collapsible", "datasetItems"];
+  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]);

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

@@ -16,7 +16,7 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _material = require("@mui/material");
 var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
-var _excluded = ["dataset", "datasetItems", "multiple", "disabled", "required", "name", "hint", "iconclass", "checkediconclass", "displayfield", "datafield", "value", "onChange", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "compareby", "toBeProcessedValue", "show", "tabindex", "arialabel", "className", "datavalue", "displayExpression", "orderby", "displayValue", "listener", "styles", "dataPath"];
+var _excluded = ["dataset", "datasetItems", "multiple", "disabled", "required", "name", "hint", "iconclass", "checkediconclass", "displayfield", "datafield", "value", "onChange", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "compareby", "toBeProcessedValue", "show", "tabindex", "arialabel", "className", "datavalue", "displayExpression", "orderby", "displayValue", "listener", "styles", "dataPath", "hidden", "fieldName"];
 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; }
@@ -32,8 +32,7 @@ var defaultProps = {
   required: false,
   allowempty: true,
   acceptsArray: false,
-  dataset: "yes, no, maybe",
-  datavalue: "yes"
+  dataset: "yes, no, maybe"
 };
 var useSwitch = function useSwitch(props) {
   var _props$dataset = props.dataset,
@@ -56,8 +55,7 @@ var useSwitch = function useSwitch(props) {
     allowempty = _props$allowempty === void 0 ? defaultProps.allowempty : _props$allowempty,
     _props$acceptsArray = props.acceptsArray,
     acceptsArray = _props$acceptsArray === void 0 ? defaultProps.acceptsArray : _props$acceptsArray,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? defaultProps.datavalue : _props$datavalue,
+    datavalue = props.datavalue,
     listener = props.listener,
     displayfield = props.displayfield,
     orderby = props.orderby,
@@ -68,7 +66,9 @@ var useSwitch = function useSwitch(props) {
   // Consolidated dataset transformation - handles both initial value and updates
   var transformedDataset = (0, _react.useMemo)(function () {
     if (propDatasetItems !== null && propDatasetItems !== void 0 && propDatasetItems.length) return propDatasetItems;
-    return (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, displayExpression, orderby, null, dataPath);
+    // Check if dataset is a function and call it to get the actual dataset value
+    var resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+    return (0, _transformedDatasetUtils.transformDataset)(resolvedDataset, datafield, displayfield, undefined, displayExpression, orderby, null, dataPath);
   }, [dataset, datafield, displayfield, displayExpression, orderby, propDatasetItems]);
   var _useState = (0, _react.useState)(transformedDataset),
     datasetItems = _useState[0],
@@ -158,6 +158,16 @@ var useSwitch = function useSwitch(props) {
       setSelectedItem(firstItem);
       setModelByKey(firstItem.key);
       setModelByValue(firstItem.value);
+    } else if ((datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length) > 0 && datavalue === undefined && selectedItem) {
+      var _updatedItems2 = datasetItems.map(function (item) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          selected: false
+        });
+      });
+      setDatasetItems(_updatedItems2);
+      setSelectedItem(null);
+      setModelByKey(null);
+      setModelByValue(null);
     }
   }, [datasetItems, value, toBeProcessedValue, datavalue, selectedItem, isUserInteraction]);
   (0, _react.useEffect)(function () {
@@ -239,15 +249,15 @@ var useSwitch = function useSwitch(props) {
           return;
         }
       }
-      var _updatedItems2 = (0, _toConsumableArray2["default"])(datasetItems);
-      _updatedItems2.forEach(function (item) {
+      var _updatedItems3 = (0, _toConsumableArray2["default"])(datasetItems);
+      _updatedItems3.forEach(function (item) {
         return item.selected = false;
       });
-      _updatedItems2[targetIndex].selected = true;
-      var selectedOption = _updatedItems2[targetIndex];
+      _updatedItems3[targetIndex].selected = true;
+      var selectedOption = _updatedItems3[targetIndex];
 
       // Batch all state updates together to ensure they happen atomically
-      setDatasetItems(_updatedItems2);
+      setDatasetItems(_updatedItems3);
       setSelectedItem(selectedOption);
       setModelByKey(selectedOption.key);
       setModelByValue(selectedOption.value);
@@ -391,6 +401,8 @@ var WmSwitch = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     listener = _ref2.listener,
     styles = _ref2.styles,
     dataPath = _ref2.dataPath,
+    hidden = _ref2.hidden,
+    fieldName = _ref2.fieldName,
     rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var _useSwitch = useSwitch({
       dataset: dataset,
@@ -412,7 +424,8 @@ var WmSwitch = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       displayExpression: displayExpression,
       orderby: orderby,
       listener: listener,
-      dataPath: dataPath
+      dataPath: dataPath,
+      fieldName: fieldName
     }),
     datasetItems = _useSwitch.datasetItems,
     selectedItem = _useSwitch.selectedItem,
@@ -435,10 +448,14 @@ var WmSwitch = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     return hint;
   }, [hint, displayfield]);
   return __jsx(_Box["default"], {
+    hidden: hidden,
     className: DEFAULT_CLS,
     name: name,
     "aria-label": arialabel,
-    datavalue: datavalue
+    datavalue: datavalue,
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      overflow: "auto"
+    })
   }, __jsx(_Box["default"], {
     ref: switchRef,
     role: "group",