@wavemaker/react-runtime 11.14.1-16.6404

package/components/input/composite/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WmComposite = WmComposite;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _label = _interopRequireDefault(require("@wavemaker/react-runtime/components/basic/label"));
+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;
+var DEFAULT_CLASS = "form-group app-composite-widget clearfix";
+var CAPTION_POSITION = {
+  left: "caption-left",
+  right: "caption-right",
+  top: "caption-top",
+  floating: "caption-floating"
+};
+function WmComposite(props) {
+  var _clsx;
+  var children = props.children,
+    styles = props.styles,
+    className = props.className,
+    _props$captionpositio = props.captionposition,
+    captionposition = _props$captionpositio === void 0 ? "left" : _props$captionpositio,
+    id = props.id,
+    required = props.required;
+  var containerRef = (0, _react.useRef)(null);
+  var isFloating = captionposition === "floating";
+
+  // Utility: Check if input has a value
+  var hasInputValue = (0, _react.useCallback)(function (input) {
+    var _input$value;
+    return Boolean((_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.trim());
+  }, []);
+
+  // Utility: Toggle float-active class
+  var toggleFloatActive = (0, _react.useCallback)(function (shouldFloat) {
+    if (!containerRef.current) return;
+    containerRef.current.classList.toggle("float-active", shouldFloat);
+  }, []);
+
+  // Handle focus event - activate floating label and show placeholder
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    if (!isFloating) return;
+    toggleFloatActive(true);
+
+    // Show placeholder on focus
+    var target = event.target;
+    var originalPlaceholder = target.getAttribute("data-original-placeholder");
+    if (originalPlaceholder) {
+      target.setAttribute("placeholder", originalPlaceholder);
+    }
+  }, [isFloating, toggleFloatActive]);
+
+  // Handle blur event - check if input has value
+  var handleBlur = (0, _react.useCallback)(function (event) {
+    if (!isFloating) return;
+    var target = event.target;
+
+    // Keep float-active if input has value, otherwise remove it
+    toggleFloatActive(hasInputValue(target));
+
+    // Always hide placeholder on blur
+    target.setAttribute("placeholder", "");
+  }, [isFloating, toggleFloatActive, hasInputValue]);
+
+  // Setup event listeners for floating label behavior
+  (0, _react.useEffect)(function () {
+    if (!isFloating || !containerRef.current) return;
+    var container = containerRef.current;
+    var INPUT_SELECTOR = "input, select, textarea";
+    var inputElements = container.querySelectorAll(INPUT_SELECTOR);
+    if (inputElements.length === 0) return;
+
+    // Initialize each input
+    inputElements.forEach(function (input) {
+      // Store and hide placeholder
+      var originalPlaceholder = input.getAttribute("placeholder");
+      if (originalPlaceholder) {
+        input.setAttribute("data-original-placeholder", originalPlaceholder);
+        input.setAttribute("placeholder", "");
+      }
+
+      // Check initial value and set float state
+      if (hasInputValue(input)) {
+        toggleFloatActive(true);
+      }
+
+      // Attach event listeners
+      input.addEventListener("focus", handleFocus);
+      input.addEventListener("blur", handleBlur);
+    });
+
+    // Cleanup function
+    return function () {
+      inputElements.forEach(function (input) {
+        // Restore placeholder
+        var originalPlaceholder = input.getAttribute("data-original-placeholder");
+        if (originalPlaceholder) {
+          input.setAttribute("placeholder", originalPlaceholder);
+          input.removeAttribute("data-original-placeholder");
+        }
+
+        // Remove event listeners
+        input.removeEventListener("focus", handleFocus);
+        input.removeEventListener("blur", handleBlur);
+      });
+    };
+  }, [isFloating, children, handleFocus, handleBlur, hasInputValue, toggleFloatActive]);
+
+  // Inject required prop into WmLabel children (memoized)
+  var childElements = _react["default"].useMemo(function () {
+    if (!required) return children;
+    return _react["default"].Children.map(children, function (child) {
+      if (/*#__PURE__*/_react["default"].isValidElement(child) && (child.type === _label["default"] || child.type.displayName === "WmLabel") && child.props.required === undefined) {
+        return /*#__PURE__*/_react["default"].cloneElement(child, {
+          required: required
+        });
+      }
+      return child;
+    });
+  }, [children, required]);
+  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
+  }, childElements);
+}
+WmComposite.displayName = "WmComposite";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmComposite);

package/components/input/currency/index.js

@@ -0,0 +1,263 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _constants = require("@wavemaker/react-runtime/components/constants");
+var _material = require("@mui/material");
+var _input = require("@base-ui-components/react/input");
+var _formatUtil = require("@wavemaker/react-runtime/utils/format-util");
+var lodash = _interopRequireWildcard(require("lodash-es"));
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmCurrency = function WmCurrency(props) {
+  var _props$currency = props.currency,
+    currency = _props$currency === void 0 ? "USD" : _props$currency,
+    _props$datavalue = props.datavalue,
+    initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _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$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Enter value" : _props$placeholder,
+    _props$arialabel = props.arialabel,
+    arialabel = _props$arialabel === void 0 ? currency : _props$arialabel,
+    name = props.name,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    shortcutkey = props.shortcutkey,
+    maxvalue = props.maxvalue,
+    minvalue = props.minvalue,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    textAlign = props.textAlign,
+    hint = props.hint,
+    _props$trailingzero = props.trailingzero,
+    trailingzero = _props$trailingzero === void 0 ? false : _props$trailingzero,
+    _props$inputmode = props.inputmode,
+    inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
+    _props$decimalplaces = props.decimalplaces,
+    decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
+    updateon = props.updateon,
+    _props$updatedelay = props.updatedelay,
+    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onKeyDown = props.onKeyDown,
+    onEnter = props.onEnter,
+    className = props.className,
+    listener = props.listener,
+    styles = props.styles;
+  var _useState = (0, _react.useState)(initialDataValue),
+    datavalue = _useState[0],
+    setDatavalue = _useState[1];
+  var _useState2 = (0, _react.useState)(initialDataValue),
+    prevDatavalue = _useState2[0],
+    setPrevDatavalue = _useState2[1];
+  var _useState3 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
+    internalValue = _useState3[0],
+    setInternalValue = _useState3[1];
+  // Add state to preserve the original string input when trailingzero is true
+  var _useState4 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
+    rawInputValue = _useState4[0],
+    setRawInputValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    isTouched = _useState5[0],
+    setIsTouched = _useState5[1];
+  var inputEl = (0, _react.useRef)(null);
+  var _useState6 = (0, _react.useState)(false),
+    showError = _useState6[0],
+    setShowError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    isDirty = _useState7[0],
+    setIsDirty = _useState7[1];
+  var currencyCode = currency || _constants.currencyConstants.appDefaultCurrency;
+  var currencySymbol = (0, _react.useMemo)(function () {
+    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 validateValue = (0, _react.useCallback)(function (value) {
+    return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue);
+  }, [required, minvalue, maxvalue]);
+  var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
+    var validation = validateValue(value);
+    setShowError(!validation.isValid);
+    if (validation.isValid && (onChange || listener !== null && listener !== void 0 && listener.onChange)) {
+      (0, _formatUtil.handleValidatedValueUpdate)(value, name, inputEl.current, onChange, listener, prevDatavalue, setPrevDatavalue, props);
+    }
+  }, parseInt(updatedelay || "10"), {
+    leading: parseInt(updatedelay) === 0
+  }), [validateValue, setShowError, onChange, listener, name, inputEl, prevDatavalue, setPrevDatavalue, updatedelay, props]);
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    onMouseEnter(event, props);
+  }, [onMouseEnter]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    onMouseLeave(event, props);
+  }, [onMouseLeave]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    onClick(event, props);
+  }, [onClick]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  }, [onFocus]);
+  var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
+    event.preventDefault();
+    if (readonly || disabled || 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 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]);
+  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) {
+      onEnter(event);
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  }, [handleArrowPress, onEnter, onKeyDown]);
+  var handleInputChange = function handleInputChange(event) {
+    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, decimalplaces, 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);
+    setShowError(!validation.isValid);
+    if (updateon === "keypress") {
+      debouncedUpdateValue(result.newVal);
+    }
+  };
+  var handleBlur = function handleBlur(e) {
+    var _listener$Widgets;
+    // Ensure proper formatting on blur
+    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, decimalplaces);
+    if (formattedValue) {
+      setInternalValue(formattedValue);
+    }
+    if (updateon === "blur") {
+      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") {
+      debouncedUpdateValue(datavalue);
+    }
+    var validation = validateValue(datavalue);
+    setIsTouched(true);
+    setIsDirty(!validation.isValid);
+    setShowError(!validation.isValid);
+  };
+  (0, _react.useEffect)(function () {
+    if (initialDataValue !== datavalue) {
+      setDatavalue(initialDataValue);
+      var cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
+      setInternalValue(cleanValue);
+      setRawInputValue(cleanValue);
+      setPrevDatavalue(datavalue);
+    }
+  }, [initialDataValue]);
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
+    onClick: handleClick
+  } : {}), onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), onFocus ? {
+    onFocus: handleFocus
+  } : {});
+  return __jsx(_material.Box, {
+    component: "div",
+    className: "".concat(_constants.currencyConstants.DEFAULT_CLS, " ").concat(className || "", " ").concat(isTouched ? "ng-touched" : "ng-untouched", "  ").concat(isDirty ? "ng-invalid" : ""),
+    inputMode: inputmode
+  }, __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-addon"
+  }, currencySymbol), __jsx(_input.Input, (0, _extends2["default"])({
+    className: "form-control app-textbox app-currency-input app-input-wrapper ".concat(isTouched ? "ng-touched" : "ng-untouched", " ").concat(isDirty ? "ng-invalid" : ""),
+    value: internalValue,
+    name: name,
+    inputMode: htmlInputMode,
+    title: hint,
+    type: "text"
+  }, events, {
+    step: step,
+    min: minvalue,
+    max: maxvalue,
+    disabled: disabled,
+    readOnly: readonly,
+    required: required,
+    placeholder: placeholder,
+    "aria-label": arialabel,
+    tabIndex: tabindex,
+    accessKey: shortcutkey,
+    style: styles,
+    ref: inputEl,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  })));
+};
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(/*#__PURE__*/_react["default"].memo(WmCurrency)));

package/components/input/currency/props.js

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

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

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmCheckbox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _input = require("@base-ui-components/react/input");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _excluded = ["caption", "checkedvalue", "uncheckedvalue", "datavalue", "disabled", "hint", "arialabel", "name", "readonly", "required", "shortcutkey", "show", "tabindex", "type", "onChange", "onBlur", "className", "listener", "onClick", "onFocus", "displayValue"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLS = "app-checkbox checkbox";
+var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? "&nbsp;" : _props$caption,
+    _props$checkedvalue = props.checkedvalue,
+    checkedvalue = _props$checkedvalue === void 0 ? true : _props$checkedvalue,
+    _props$uncheckedvalue = props.uncheckedvalue,
+    uncheckedvalue = _props$uncheckedvalue === void 0 ? false : _props$uncheckedvalue,
+    _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    name = props.name,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    shortcutkey = props.shortcutkey,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    type = props.type,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    className = props.className,
+    listener = props.listener,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    displayValue = props.displayValue,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var checkboxRef = (0, _react.useRef)(null);
+  var prevRefValue = (0, _react.useRef)(null);
+  var isInitialized = (0, _react.useRef)(false);
+
+  // Keep track of the actual value (not just boolean state)
+  var _React$useState = _react["default"].useState(function () {
+      // Initialize with null/undefined when datavalue is null/undefined
+      if (datavalue === null || datavalue === undefined) return null;
+      return datavalue === checkedvalue ? checkedvalue : uncheckedvalue;
+    }),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    actualValue = _React$useState2[0],
+    setActualValue = _React$useState2[1];
+
+  // Determine if checkbox should be visually checked
+  var isChecked = (0, _react.useMemo)(function () {
+    // Only check if actualValue explicitly matches checkedvalue
+    return actualValue === checkedvalue;
+  }, [actualValue, checkedvalue]);
+
+  // Update actual value when datavalue prop changes
+  (0, _react.useEffect)(function () {
+    if (prevRefValue.current === datavalue || isInitialized.current) return;
+    if (datavalue === null || datavalue === undefined) {
+      setActualValue(null);
+    } else {
+      var newValue = datavalue === checkedvalue ? checkedvalue : uncheckedvalue;
+      setActualValue(newValue);
+      prevRefValue.current = datavalue;
+      isInitialized.current = true;
+      var event = {
+        target: {
+          checked: newValue
+        }
+      };
+      handleChange(event);
+    }
+  }, [datavalue]);
+  var handleChange = (0, _react.useCallback)(function (event) {
+    // Determine the new actual value based on checkbox state
+    var newValue = event.target.checked ? checkedvalue : uncheckedvalue;
+
+    // Update our internal state with the actual value
+    setActualValue(newValue);
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        datavalue: newValue // Pass the actual value, not boolean
+      });
+    }
+    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]);
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    onFocus === null || onFocus === void 0 || onFocus(event);
+  }, [onFocus]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (disabled || readonly) {
+      return;
+    }
+    if (event.key === "Enter") {
+      var _checkboxRef$current;
+      event.preventDefault();
+      (_checkboxRef$current = checkboxRef.current) === null || _checkboxRef$current === void 0 || _checkboxRef$current.click();
+    }
+  }, []);
+  var handleClick = function handleClick(event) {
+    // Determine the new actual value based on checkbox state
+    if (disabled || readonly) {
+      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 (onClick) {
+      // Pass the actual value in the onClick callback
+      onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newValue, actualValue);
+    }
+  };
+  var checkboxClasses = [DEFAULT_CLS, type === "toggle" ? "app-toggle" : "", !isChecked ? "unchecked" : "", disabled || readonly ? "disabled" : "", required && caption ? "required" : "", className || ""].filter(Boolean).join(" ");
+  var handleMouseEnter = function handleMouseEnter(event) {
+    if (props.onMouseEnter) {
+      props.onMouseEnter(event, props, displayValue, actualValue);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    if (props.onMouseLeave) {
+      props.onMouseLeave(event, props, displayValue, actualValue);
+    }
+  };
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), props.onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), props.onClick ? {
+    onClick: handleClick
+  } : {}), props.onFocus ? {
+    onFocus: handleFocus
+  } : {});
+  return __jsx("div", (0, _extends2["default"])({
+    className: checkboxClasses,
+    style: props.styles
+  }, name ? {
+    name: name
+  } : {}, caption ? {
+    caption: caption
+  } : {}, type === "toggle" ? {
+    type: "toggle"
+  } : {}), __jsx(_Box["default"], {
+    component: "label",
+    className: "wm-checkbox-label ".concat(!isChecked ? "unchecked" : "", " ").concat(disabled || readonly ? "disabled" : "", " ").concat(required && caption ? "required" : ""),
+    onKeyDown: handleKeyDown
+  }, __jsx(_input.Input, (0, _extends2["default"])({}, events, {
+    type: "checkbox",
+    ref: checkboxRef,
+    "aria-readonly": readonly,
+    checked: isChecked // Use the computed isChecked value
+  }, !readonly && !disabled ? {
+    onChange: handleChange,
+    onClick: handleClick
+  } : {}, {
+    onBlur: handleBlur,
+    disabled: disabled,
+    required: required,
+    name: name,
+    "aria-label": arialabel,
+    accessKey: shortcutkey,
+    tabIndex: tabindex,
+    title: hint,
+    className: "".concat(disabled || readonly ? "disabled" : "")
+  })), __jsx(_Box["default"], {
+    component: "span",
+    className: "caption",
+    dangerouslySetInnerHTML: {
+      __html: caption
+    }
+  }), __jsx(_Box["default"], {
+    component: "img",
+    alt: "Checkbox Image",
+    "aria-hidden": "true",
+    src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
+    className: "switch",
+    width: "auto",
+    height: "auto"
+  })), __jsx(_input.Input, {
+    type: "hidden",
+    className: "ng-hide model-holder",
+    "aria-hidden": "true",
+    tabIndex: -1,
+    disabled: disabled,
+    value: actualValue === null || actualValue === undefined ? "" : String(actualValue) // Handle null/undefined values
+  }));
+}, function (prev, next) {
+  var keys = ["datavalue", "checkedvalue", "uncheckedvalue", "disabled", "readonly", "required", "shortcutkey", "show", "tabindex", "type", "className"];
+  return keys.every(function (key) {
+    return prev[key] === next[key];
+  });
+});
+WmCheckbox.displayName = "WmCheckbox";
+var _default = exports["default"] = (0, _withFormController["default"])((0, _withBaseWrapper.withBaseWrapper)(WmCheckbox));

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

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