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

package/components/input/color-picker/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WmColorPicker = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactColor = require("react-color");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -15,9 +16,12 @@ var _input = require("@base-ui-components/react/input");
 var _styles = require("@mui/material/styles");
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _reactDom = require("react-dom");
 var _excluded = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "tabindex", "className", "autoclose", "arialabel", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onClick", "onKeydown", "onKeyup", "onChange", "listener"];
 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; }
 // Constants
 var AUTOCLOSE_TYPE = {
   ALWAYS: "always",
@@ -31,25 +35,32 @@ var POSITION_DELAY = 100;
 
 // Styled Components
 var StyledColorPicker = (0, _styles.styled)(_Box["default"])(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    direction = _ref.direction;
   return {
-    position: "absolute",
+    position: "fixed",
+    // Changed from absolute to fixed for portal positioning
     zIndex: 1300,
     marginTop: theme.spacing(1),
-    left: 0,
-    top: "115%",
-    "&::before": {
+    "&::before": _objectSpread({
       content: '""',
       position: "absolute",
-      top: "-20px",
       left: "8px",
       width: 0,
       height: 0,
       borderStyle: "solid",
-      borderWidth: "10px 5px",
-      borderColor: "rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #777 rgba(0, 0, 0, 0)",
       zIndex: 999999
-    },
+    }, direction === "down" ? {
+      // Arrow pointing up (picker opens downward)
+      top: "-10px",
+      borderWidth: "0 5px 10px 5px",
+      borderColor: "transparent transparent #777 transparent"
+    } : {
+      // Arrow pointing down (picker opens upward)
+      bottom: "-10px",
+      borderWidth: "10px 5px 0 5px",
+      borderColor: "#777 transparent transparent transparent"
+    }),
     "& .chrome-picker": {
       boxShadow: "0 2px 15px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.16) !important",
       height: "auto",
@@ -229,27 +240,33 @@ var useColorValue = function useColorValue(initialValue) {
 };
 var usePickerPosition = function usePickerPosition() {
   var _useState3 = (0, _react.useState)({
-      top: "115%",
-      left: 0
+      top: 0,
+      left: 0,
+      direction: "down"
     }),
     position = _useState3[0],
     setPosition = _useState3[1];
   var calculatePosition = (0, _react.useCallback)(function (containerElement) {
     if (!containerElement) {
       return {
-        top: "115%",
-        left: 0
+        top: 0,
+        left: 0,
+        direction: "down"
       };
     }
     var rect = containerElement.getBoundingClientRect();
     var viewportHeight = window.innerHeight;
     var spaceBelow = viewportHeight - rect.bottom;
-    return spaceBelow < PICKER_HEIGHT ? {
-      top: -330,
-      left: 0
-    } : {
-      top: "115%",
-      left: 0
+
+    // Calculate absolute position using fixed positioning (for portal)
+    var openUpward = spaceBelow < PICKER_HEIGHT;
+    var top = openUpward ? rect.top - PICKER_HEIGHT + 50 // Position above if not enough space below
+    : rect.bottom + 8; // Position below with 8px gap
+
+    return {
+      top: top,
+      left: rect.left,
+      direction: openUpward ? "up" : "down"
     };
   }, []);
   return {
@@ -334,6 +351,16 @@ var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(functi
       setIsOpen(false);
     }
   }, [isOpen, isInteractingWithPicker]);
+
+  // Register widget methods (open/close) with listener
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        open: openPicker,
+        close: closePicker
+      });
+    }
+  }, [openPicker, closePicker]);
   var validateAndSetColor = (0, _react.useCallback)(function (value) {
     if (!value.trim()) {
       setColorValue({
@@ -455,7 +482,11 @@ var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(functi
     };
     setColorValue(rgbaColor);
     var newValue = a !== 1 ? rgbaToString(rgbaColor) : rgbaToHex(rgbaColor);
+    if (inputRef.current) {
+      inputRef.current.value = newValue;
+    }
     if (listener !== null && listener !== void 0 && listener.Widgets[(props === null || props === void 0 ? void 0 : props.fieldName) || name]) {
+      listener.Widgets[name].datavalue = newValue;
       listener.Widgets[name].displayValue = newValue;
     }
     setInputValue(newValue);
@@ -464,8 +495,11 @@ var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(functi
         datavalue: newValue
       });
     }
+    var customEvent = _objectSpread(_objectSpread({}, event), {}, {
+      type: "change"
+    });
     if (onChange) {
-      onChange(event, listener.Widgets[name], newValue, inputValue);
+      onChange(customEvent, listener.Widgets[name], newValue, inputValue);
     }
     if (autoclose === AUTOCLOSE_TYPE.ALWAYS && !isInteractingWithPicker) {
       setTimeout(function () {
@@ -589,6 +623,20 @@ var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(functi
       return window.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen]);
+
+  // Update picker position on scroll or resize
+  (0, _react.useEffect)(function () {
+    if (!isOpen) return;
+    var updatePosition = function updatePosition() {
+      setPickerPosition(calculatePosition(containerRef.current));
+    };
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return function () {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen, calculatePosition, setPickerPosition]);
   var checkPlaceholder = function checkPlaceholder() {
     setTimeout(function () {
       var _containerRef$current2;
@@ -651,12 +699,13 @@ var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(functi
     style: {
       backgroundColor: inputValue ? rgbaToString(colorValue) : "transparent"
     }
-  })), isOpen && __jsx(StyledColorPicker, {
+  })), isOpen && /*#__PURE__*/(0, _reactDom.createPortal)(__jsx(StyledColorPicker, {
     className: "color-picker",
     ref: pickerRef,
+    direction: pickerPosition.direction,
     sx: {
-      top: pickerPosition.top,
-      left: pickerPosition.left,
+      top: "".concat(pickerPosition.top, "px"),
+      left: "".concat(pickerPosition.left, "px"),
       zIndex: 1300
     },
     onClick: function onClick(e) {
@@ -667,9 +716,9 @@ var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(functi
   }, __jsx(_reactColor.ChromePicker, {
     color: colorValue,
     onChange: handleColorChange
-  })));
+  })), document.body));
 }, function (prevProps, nextProps) {
-  var keysToCompare = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "show", "tabindex", "autoclose", "arialabel"];
+  var keysToCompare = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "show", "tabindex", "autoclose", "arialabel", "hidden", "show"];
   return keysToCompare.every(function (key) {
     return prevProps[key] === nextProps[key];
   });

package/components/input/composite/index.js

@@ -22,7 +22,6 @@ var CAPTION_POSITION = {
   floating: "caption-floating"
 };
 function WmComposite(props) {
-  var _clsx;
   var children = props.children,
     styles = props.styles,
     className = props.className,
@@ -129,8 +128,9 @@ function WmComposite(props) {
   return __jsx("div", {
     ref: containerRef,
     style: styles,
-    className: (0, _clsx2["default"])((_clsx = {}, (0, _defineProperty2["default"])(_clsx, DEFAULT_CLASS, true), (0, _defineProperty2["default"])(_clsx, className || "", Boolean(className)), _clsx), "".concat(CAPTION_POSITION[captionposition], " ").concat(required ? "required" : "")),
-    id: id
+    className: (0, _clsx2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, DEFAULT_CLASS, true), className || "", Boolean(className)), "".concat(CAPTION_POSITION[captionposition], " ").concat(required ? "required" : "")),
+    id: id,
+    hidden: props.hidden
   }, childElements);
 }
 WmComposite.displayName = "WmComposite";

package/components/input/currency/index.js

@@ -94,7 +94,17 @@ var WmCurrency = function WmCurrency(props) {
     var _currencyConstants$CU;
     return ((_currencyConstants$CU = _constants.currencyConstants.CURRENCY_INFO[currencyCode]) === null || _currencyConstants$CU === void 0 ? void 0 : _currencyConstants$CU.symbol) || "$";
   }, [currencyCode]);
-  var htmlInputMode = decimalplaces > 0 ? "decimal" : "numeric";
+  var effectiveDecimalPlaces = (0, _react.useMemo)(function () {
+    if (decimalplaces > 0) return decimalplaces;
+    if (inputmode === "financial" && step && step < 1) {
+      var stepStr = step.toString();
+      if (stepStr.includes(".")) {
+        return stepStr.split(".")[1].length;
+      }
+    }
+    return decimalplaces;
+  }, [decimalplaces, inputmode, step]);
+  var htmlInputMode = effectiveDecimalPlaces > 0 ? "decimal" : "numeric";
   var validateValue = (0, _react.useCallback)(function (value) {
     return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue);
   }, [required, minvalue, maxvalue]);
@@ -102,7 +112,7 @@ var WmCurrency = function WmCurrency(props) {
     var validation = validateValue(value);
     setShowError(!validation.isValid);
     if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
-      (0, _formatUtil.handleValidatedValueUpdate)(value, name, inputEl.current, onChange, listener, prevDatavalue, setPrevDatavalue, props);
+      (0, _formatUtil.handleValidatedValueUpdate)(value, props.fieldName || name, inputEl.current, onChange, listener, prevDatavalue, setPrevDatavalue, props);
     }
   }, parseInt(updatedelay || "10"), {
     leading: parseInt(updatedelay) === 0
@@ -121,60 +131,44 @@ var WmCurrency = function WmCurrency(props) {
   }, [onFocus]);
   var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
     event.preventDefault();
-    if (readonly || disabled || step === 0) {
+    if (readonly || disabled || !step || step === 0) {
       return;
     }
     var targetVal = event.target.value.replace(/,/g, "");
     var currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
-    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, decimalplaces, minvalue, maxvalue);
+    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, effectiveDecimalPlaces, minvalue, maxvalue);
     var cleanValue = newValue.toString();
     setInternalValue(cleanValue);
     setDatavalue(newValue);
     setRawInputValue(cleanValue);
-    if (onChange) {
-      var syntheticEvent = {
-        target: {
-          value: newValue.toString(),
-          name: name
-        },
-        currentTarget: inputEl.current
-      };
-      onChange(syntheticEvent, props, newValue, prevDatavalue);
-    }
     var validation = validateValue(newValue);
     setShowError(!validation.isValid);
     if (updateon === "keypress") {
       debouncedUpdateValue(newValue);
     }
-  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, decimalplaces, validateValue, onChange, name, props, prevDatavalue, debouncedUpdateValue]);
+  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, effectiveDecimalPlaces, validateValue, onChange, name, props, prevDatavalue, debouncedUpdateValue]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === "ArrowUp") {
-      handleArrowPress(event, "UP");
-    } else if (event.key === "ArrowDown") {
-      handleArrowPress(event, "DOWN");
-    } else if (event.key === "Enter" && onEnter) {
+    if (step && step !== 0) {
+      if (event.key === "ArrowUp") {
+        handleArrowPress(event, "UP");
+        return;
+      } else if (event.key === "ArrowDown") {
+        handleArrowPress(event, "DOWN");
+        return;
+      }
+    }
+    if (event.key === "Enter" && onEnter) {
       onEnter(event);
     }
     if (onKeyDown) {
       onKeyDown(event);
     }
-  }, [handleArrowPress, onEnter, onKeyDown]);
+  }, [handleArrowPress, onEnter, onKeyDown, step]);
   var handleInputChange = function handleInputChange(event) {
-    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, decimalplaces, setRawInputValue);
+    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, effectiveDecimalPlaces, setRawInputValue);
     if (result.newVal === null && event.target.value !== "") {
       return; // Invalid input, don't update
     }
-    if (onChange) {
-      var _result$newVal;
-      var syntheticEvent = {
-        target: {
-          value: ((_result$newVal = result.newVal) === null || _result$newVal === void 0 ? void 0 : _result$newVal.toString()) || "",
-          name: name
-        },
-        currentTarget: inputEl.current
-      };
-      onChange(syntheticEvent, props, result.newVal, prevDatavalue);
-    }
     setInternalValue(result.inputValue);
     setDatavalue(result.newVal);
     var validation = validateValue(result.newVal);
@@ -186,7 +180,7 @@ var WmCurrency = function WmCurrency(props) {
   var handleBlur = function handleBlur(e) {
     var _listener$Widgets;
     // Ensure proper formatting on blur
-    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, decimalplaces);
+    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, effectiveDecimalPlaces);
     if (formattedValue) {
       setInternalValue(formattedValue);
     }
@@ -194,16 +188,7 @@ var WmCurrency = function WmCurrency(props) {
       debouncedUpdateValue(datavalue);
     }
     onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
-    if (updateon === "blur" && onChange) {
-      var syntheticEvent = {
-        target: {
-          value: (datavalue === null || datavalue === void 0 ? void 0 : datavalue.toString()) || "",
-          name: name
-        },
-        currentTarget: inputEl.current
-      };
-      onChange(syntheticEvent, props, datavalue, prevDatavalue);
-    } else if (updateon === "blur") {
+    if (updateon === "blur") {
       debouncedUpdateValue(datavalue);
     }
     var validation = validateValue(datavalue);
@@ -212,7 +197,7 @@ var WmCurrency = function WmCurrency(props) {
     setShowError(!validation.isValid);
   };
   (0, _react.useEffect)(function () {
-    if (initialDataValue !== datavalue) {
+    if (initialDataValue != datavalue) {
       setDatavalue(initialDataValue);
       var cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
       setInternalValue(cleanValue);
@@ -228,15 +213,16 @@ var WmCurrency = function WmCurrency(props) {
     onMouseLeave: handleMouseLeave
   } : {}), onFocus ? {
     onFocus: handleFocus
-  } : {}), onBlur ? {
+  } : {}), {
     onBlur: handleBlur
-  } : {}), onChange ? {
+  }), {
     onChange: handleInputChange
-  } : {}), onKeyDown ? {
+  }), {
     onKeyDown: handleKeyDown
-  } : {});
+  });
   return __jsx(_material.Box, {
     component: "div",
+    hidden: props.hidden,
     className: "".concat(_constants.currencyConstants.DEFAULT_CLS, " ").concat(className || "", " ").concat(isTouched ? "ng-touched" : "ng-untouched", "  ").concat(isDirty ? "ng-invalid" : ""),
     inputMode: inputmode
   }, __jsx(_material.Box, {

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

@@ -22,6 +22,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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_CLS = "app-checkbox checkbox";
 var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$hidden;
   var _props$caption = props.caption,
     caption = _props$caption === void 0 ? "&nbsp;" : _props$caption,
     _props$checkedvalue = props.checkedvalue,
@@ -78,15 +79,10 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
     if (datavalue === null || datavalue === undefined) {
       setActualValue(null);
     } else {
-      var newValue = datavalue === checkedvalue ? checkedvalue : uncheckedvalue;
+      var isEqual = datavalue === checkedvalue || String(datavalue) === String(checkedvalue);
+      var newValue = isEqual ? checkedvalue : uncheckedvalue;
       setActualValue(newValue);
       prevRefValue.current = datavalue;
-      var event = {
-        target: {
-          checked: newValue
-        }
-      };
-      handleChange(event);
     }
   }, [datavalue]);
   var handleChange = (0, _react.useCallback)(function (event) {
@@ -98,23 +94,21 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
     prevRefValue.current = newValue;
     if (listener !== null && listener !== void 0 && listener.onChange) {
       listener.onChange(props.fieldName || name, {
-        datavalue: newValue // Pass the actual value, not boolean
+        datavalue: newValue,
+        // Pass the actual value, not boolean
+        displayValue: newValue
       });
     }
-    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
-      // Store the actual value, not just boolean
-      listener.Widgets[name].displayValue = newValue;
-    }
     if (onChange) {
       // Pass the actual value in the onChange callback
       onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newValue, actualValue !== null && actualValue !== void 0 ? actualValue : uncheckedvalue);
     }
   }, [checkedvalue, uncheckedvalue, onChange, listener, name, actualValue]);
   var handleBlur = (0, _react.useCallback)(function (event) {
-    onBlur === null || onBlur === void 0 || onBlur(event);
+    onBlur === null || onBlur === void 0 || onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
   }, [onBlur]);
   var handleFocus = (0, _react.useCallback)(function (event) {
-    onFocus === null || onFocus === void 0 || onFocus(event);
+    onFocus === null || onFocus === void 0 || onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
   }, [onFocus]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     if (disabled || readonly) {
@@ -132,14 +126,12 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
       return;
     }
     var newValue = event.target.checked ? checkedvalue : uncheckedvalue;
-    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
-      // Store the actual value, not just boolean
-      listener.Widgets[name].displayValue = newValue;
-    }
-    if (listener !== null && listener !== void 0 && listener.onClick) {
-      listener.onClick(name, _objectSpread(_objectSpread({}, props), {}, {
-        datavalue: newValue // Pass the actual value
-      }));
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        datavalue: newValue,
+        // Pass the actual value
+        displayValue: newValue
+      });
     }
     if (onClick) {
       // Pass the actual value in the onClick callback
@@ -167,15 +159,18 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
     onFocus: handleFocus
   } : {});
   return __jsx("div", (0, _extends2["default"])({
-    className: checkboxClasses,
-    style: props.styles
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false,
+    className: checkboxClasses
   }, name ? {
     name: name
   } : {}, caption ? {
     caption: caption
   } : {}, type === "toggle" ? {
     type: "toggle"
-  } : {}), __jsx(_Box["default"], {
+  } : {}, {
+    disabled: disabled,
+    style: props.styles
+  }), __jsx(_Box["default"], {
     component: "label",
     className: "wm-checkbox-label ".concat(!isChecked ? "unchecked" : "", " ").concat(disabled || readonly ? "disabled" : "", " ").concat(required && caption ? "required" : ""),
     onKeyDown: handleKeyDown
@@ -217,13 +212,13 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
     "aria-hidden": "true",
     tabIndex: -1,
     disabled: disabled,
-    value: actualValue === null || actualValue === undefined ? "" : String(actualValue) // Handle null/undefined values
+    value: actualValue === null || actualValue === undefined ? "false" : String(actualValue) // Handle null/undefined values
   }));
 }, function (prev, next) {
-  var keys = ["datavalue", "checkedvalue", "uncheckedvalue", "disabled", "readonly", "required", "shortcutkey", "show", "tabindex", "type", "className"];
+  var keys = ["datavalue", "checkedvalue", "uncheckedvalue", "disabled", "readonly", "required", "shortcutkey", "show", "tabindex", "type", "className", "hidden"];
   return keys.every(function (key) {
     return prev[key] === next[key];
   });
 });
 WmCheckbox.displayName = "WmCheckbox";
-var _default = exports["default"] = (0, _withFormController["default"])((0, _withBaseWrapper.withBaseWrapper)(WmCheckbox));
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmCheckbox));

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

@@ -21,6 +21,7 @@ var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWra
 var _constants = require("@wavemaker/react-runtime/components/constants");
 var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
 var _input = require("@base-ui-components/react/input");
+var _utils = require("./utils");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _listHelpers = require("@wavemaker/react-runtime/components/data/list/utils/list-helpers");
 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); }
@@ -58,7 +59,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
     datafield = _props$datafield === void 0 ? "" : _props$datafield,
     _props$displayfield = props.displayfield,
     displayfield = _props$displayfield === void 0 ? "" : _props$displayfield,
-    displayExpression = props.displayExpression,
+    getDisplayExpression = props.getDisplayExpression,
     _props$dataset = props.dataset,
     dataset = _props$dataset === void 0 ? "Option 1, Option 2, Option 3" : _props$dataset,
     _props$datavalue = props.datavalue,
@@ -134,9 +135,12 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
   }, [itemsperrow]);
   var transformedDataset = (0, _react.useMemo)(function () {
     if (!dataset) return [];
-    var data = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, displayExpression, orderby, groupby, dataPath, "");
+    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, displayExpression, orderby, groupby]);
+  }, [dataset, datafield, displayfield, getDisplayExpression, orderby, groupby, match, usekeys, dataPath]);
   (0, _react.useEffect)(function () {
     setIsLoading(true);
     setError(null);
@@ -215,6 +219,8 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
         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
@@ -234,10 +240,16 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
       return _objectSpread(_objectSpread({}, prevState), {}, (0, _defineProperty2["default"])({}, key, !prevState[key]));
     });
   }, []);
-  var handleCheckboxChange = (0, _react.useCallback)(function (event, 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;
       }
@@ -247,6 +259,9 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
     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) {
@@ -258,10 +273,16 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
         } else {
           value = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value;
         }
-        newKeys = [].concat((0, _toConsumableArray2["default"])(currentSelectedKeys), [value || key]);
+        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;
         }
@@ -272,9 +293,6 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
     if (onchange) {
       onchange(newKeys);
     }
-    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
-      listener.Widgets[name].displayValue = newKeys;
-    }
     if (onChange && name) {
       onChange(event, listener.Widgets[name], newKeys, currentSelectedKeys);
     }
@@ -282,20 +300,22 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
       onClick(event, listener.Widgets[name]);
     }
     if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(name, {
-        datavalue: newKeys
+      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 ((0, _typeof2["default"])(k) === "object" && datafield && item.key) {
-        return k[datafield] === item.key;
+      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]);
+  }, [localSelectedKeys, datafield, usekeys]);
   var renderCheckboxItem = (0, _react.useCallback)(function (item, index) {
     var isChecked = isItemChecked(item);
     return __jsx(_ListItem["default"], {
@@ -307,7 +327,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
       onClick: function onClick(e) {
         var tag = e.target.tagName;
         if (tag !== "INPUT" && tag !== "LABEL" && tag !== "SPAN") {
-          handleCheckboxChange(e, (0, _lodashEs.toString)(item.key));
+          handleCheckboxChange(e, (0, _lodashEs.toString)(item.key), item === null || item === void 0 ? void 0 : item.dataObject);
         }
       },
       component: "li",
@@ -330,7 +350,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
       role: "checkbox",
       "aria-checked": isChecked,
       onChange: function onChange(e) {
-        return handleCheckboxChange(e, (0, _lodashEs.toString)(item.key));
+        return handleCheckboxChange(e, (0, _lodashEs.toString)(item.key), item === null || item === void 0 ? void 0 : item.dataObject);
       },
       style: disabled || readonly ? {
         background: "transparent"
@@ -338,8 +358,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
     }), __jsx(_Typography["default"], {
       component: "span",
       className: "caption",
-      id: "checkbox-list-label-".concat(item.key + "_" + index),
-      disabled: disabled || readonly
+      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) {
@@ -399,6 +418,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
     }
   };
   return __jsx(_List["default"], {
+    hidden: props.hidden,
     style: styles,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className, itemclass, listclass),
     onMouseEnter: function onMouseEnter(event) {
@@ -444,7 +464,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
     return renderCheckboxItem(item, index);
   }));
 }, function (prev, current) {
-  var keys = ["datavalue", "dataset", "show", "disabled", "readonly", "orderby", "groupby", "collapsible", "datasetItems", "collapsed", "onClick", "onChange", "onMouseEnter", "onMouseLeave", "displayExpression", "datafield", "displayfield", "dataset", "datavalue", "usekeys", "groupby"];
+  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]);