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

package/components/input/number/index.js

@@ -0,0 +1,406 @@
+"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.WmNumber = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var lodash = _interopRequireWildcard(require("lodash-es"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _formatUtil = require("@wavemaker-ai/react-runtime/utils/format-util");
+var _util = require("../util");
+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" != _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_CLASS = "form-control app-textbox app-number-input";
+var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$regexp = props.regexp,
+    regexp = _props$regexp === void 0 ? ".*" : _props$regexp,
+    disabled = props.disabled,
+    name = props.name,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    tabindex = props.tabindex,
+    shortcutkey = props.shortcutkey,
+    autofocus = props.autofocus,
+    _props$datavalue = props.datavalue,
+    initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _props$maxDataValue = props.maxDataValue,
+    initialMaxDataValue = _props$maxDataValue === void 0 ? null : _props$maxDataValue,
+    _props$maxvalue = props.maxvalue,
+    initialMaxValue = _props$maxvalue === void 0 ? null : _props$maxvalue,
+    _props$maxdisplayValu = props.maxdisplayValue,
+    initialMaxDisplayValue = _props$maxdisplayValu === void 0 ? null : _props$maxdisplayValu,
+    _props$isMaxWidget = props.isMaxWidget,
+    isMaxWidget = _props$isMaxWidget === void 0 ? false : _props$isMaxWidget,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    className = props.className,
+    placeholder = props.placeholder,
+    _props$updatedelay = props.updatedelay,
+    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
+    listener = props.listener,
+    _props$updateon = props.updateon,
+    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
+    step = props.step,
+    minvalue = props.minvalue,
+    maxvalue = props.maxvalue,
+    readonly = props.readonly,
+    _props$inputmode = props.inputmode,
+    inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
+    _props$trailingzero = props.trailingzero,
+    trailingzero = _props$trailingzero === void 0 ? false : _props$trailingzero,
+    _props$decimalplaces = props.decimalplaces,
+    decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    onKeydown = props.onKeydown,
+    onKeyup = props.onKeyup,
+    onKeypress = props.onKeypress,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    id = props.id,
+    error = props.error;
+  var _useState = (0, _react.useState)(false),
+    showError = _useState[0],
+    setShowError = _useState[1];
+  // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue)
+  // For regular widgets: use regular properties (datavalue)
+  var effectiveInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== undefined ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== undefined ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== undefined ? initialDataValue : null;
+  var _useState2 = (0, _react.useState)(effectiveInitialValue),
+    datavalue = _useState2[0],
+    setDatavalue = _useState2[1];
+  var _useState3 = (0, _react.useState)(effectiveInitialValue),
+    prevDatavalue = _useState3[0],
+    setPrevDatavalue = _useState3[1];
+  var _useState4 = (0, _react.useState)(effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  // Add state to preserve the original string input when trailingzero is true
+  var _useState5 = (0, _react.useState)(effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""),
+    rawInputValue = _useState5[0],
+    setRawInputValue = _useState5[1];
+  var _useState6 = (0, _react.useState)(false),
+    isDirty = _useState6[0],
+    setIsDirty = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    isTouched = _useState7[0],
+    setIsTouched = _useState7[1];
+  var inputEl = (0, _react.useRef)(null);
+  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 displayError = error || isDirty && showError;
+  var validateNumber = (0, _react.useCallback)(function (value) {
+    return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue, regexp);
+  }, [required, regexp, minvalue, maxvalue]);
+  var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
+    var validation = validateNumber(value);
+    setShowError(!validation.isValid);
+    if (prevDatavalue === value) {
+      return;
+    }
+    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
+      var _listener$onChange;
+      var syntheticEvent = {
+        target: {
+          value: value === null ? "" : value.toString(),
+          name: name
+        },
+        currentTarget: inputEl.current
+      };
+      // For max widgets, use max-prefixed properties to avoid conflicts with regular widgets
+      var updatedWidgetData = isMaxWidget ? {
+        maxDataValue: value == null ? "" : value,
+        maxvalue: value == null ? "" : value,
+        maxdisplayValue: value == null ? "" : value.toString()
+      } : {
+        datavalue: value == null ? "" : value,
+        value: value == null ? "" : value,
+        displayValue: value == null ? "" : value.toString()
+      };
+      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, updatedWidgetData, value, prevDatavalue);
+      if (onChange) {
+        // Create updated props object with new value
+        // For max widgets, use max-prefixed properties
+        var updatedProps = isMaxWidget ? _objectSpread(_objectSpread({}, props), {}, {
+          maxDataValue: value,
+          maxvalue: value,
+          maxdisplayValue: value == null ? "" : value.toString()
+        }) : _objectSpread(_objectSpread({}, props), {}, {
+          datavalue: value,
+          value: value,
+          displayValue: value == null ? "" : value.toString()
+        });
+        onChange(syntheticEvent, updatedProps, value, prevDatavalue);
+      }
+    }
+    setPrevDatavalue(value);
+  }, parseInt(updatedelay || "10"), {
+    leading: parseInt(updatedelay) === 0
+  }), [onChange, name, prevDatavalue, updatedelay, validateNumber]);
+  (0, _react.useEffect)(function () {
+    if (!shortcutkey) return;
+    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
+      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        var _inputEl$current;
+        e.preventDefault();
+        (_inputEl$current = inputEl.current) === null || _inputEl$current === void 0 || _inputEl$current.focus();
+      }
+    };
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return function () {
+      return window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [shortcutkey]);
+  var handleInputChange = function handleInputChange(event) {
+    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, effectiveDecimalPlaces, setRawInputValue);
+    if (result.newVal === null && event.target.value !== "") {
+      return; // Invalid input, don't update
+    }
+    setInternalValue(result.inputValue);
+    setDatavalue(result.newVal);
+    var validation = validateNumber(result.newVal);
+    setShowError(!validation.isValid);
+    if (updateon === "keypress") {
+      var _listener$Widgets;
+      debouncedUpdateValue(result.newVal);
+      onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], result.newVal, prevDatavalue);
+    }
+  };
+  var handleBlur = function handleBlur(e) {
+    var _listener$Widgets2;
+    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, effectiveDecimalPlaces);
+    if (formattedValue) {
+      setInternalValue(formattedValue);
+    }
+    if (updateon === "blur") {
+      debouncedUpdateValue(datavalue);
+    }
+    onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+    var validation = validateNumber(datavalue);
+    if (!validation.isValid && (required || maxvalue || minvalue)) {
+      setIsDirty(true);
+    } else {
+      setIsDirty(false);
+    }
+    if (!validation.isValid && regexp != ".*") {
+      setIsTouched(true);
+      setIsDirty(true);
+      setShowError(true);
+    }
+  };
+  var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
+    event.preventDefault();
+    if (readonly || disabled || !step || step === 0) {
+      return;
+    }
+    var targetVal = event.target.value;
+    var currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
+    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, effectiveDecimalPlaces, minvalue, maxvalue);
+    var currentPrevValue = datavalue;
+    var cleanValue = newValue.toString();
+    setInternalValue(cleanValue);
+    setDatavalue(newValue);
+    setPrevDatavalue(currentPrevValue);
+    setRawInputValue(cleanValue);
+    var validation = validateNumber(newValue);
+    setShowError(!validation.isValid);
+    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
+      var _listener$onChange2;
+      var syntheticEvent = {
+        target: {
+          value: newValue.toString(),
+          name: name
+        },
+        currentTarget: inputEl.current
+      };
+      // For max widgets, use max-prefixed properties to avoid conflicts with regular widgets
+      var updatedWidgetData = isMaxWidget ? {
+        maxDataValue: newValue == null ? "" : newValue,
+        maxvalue: newValue == null ? "" : newValue,
+        maxdisplayValue: newValue == null ? "" : newValue.toString()
+      } : {
+        datavalue: newValue == null ? "" : newValue,
+        value: newValue == null ? "" : newValue,
+        displayValue: newValue == null ? "" : newValue.toString()
+      };
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || name, updatedWidgetData, newValue, currentPrevValue);
+      if (onChange) {
+        // Create updated props object with new datavalue and displayValue
+        var updatedProps = _objectSpread(_objectSpread({}, props), {}, {
+          datavalue: newValue,
+          displayValue: newValue == null ? "" : newValue.toString()
+        });
+        onChange(syntheticEvent, updatedProps, newValue, currentPrevValue);
+      }
+    }
+    if (updateon === "keypress") {
+      debouncedUpdateValue(newValue);
+    }
+    setPrevDatavalue(newValue);
+  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, effectiveDecimalPlaces, validateNumber, onChange, name, props, listener, updateon, debouncedUpdateValue]);
+  var handleKeyDown = function handleKeyDown(e) {
+    var _listener$Widgets4;
+    if (step && step !== 0) {
+      if (e.key === "ArrowUp") {
+        handleArrowPress(e, "UP");
+        return;
+      } else if (e.key === "ArrowDown") {
+        handleArrowPress(e, "DOWN");
+        return;
+      } else {
+        var _listener$Widgets3;
+        onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+      }
+    }
+    if (e.key === "Enter") {
+      debouncedUpdateValue(datavalue);
+    }
+    onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+  };
+  var handleKeyUp = function handleKeyUp(e) {
+    var _listener$Widgets5;
+    onKeyup === null || onKeyup === void 0 || onKeyup(e, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+  };
+  var handleFocus = function handleFocus(e) {
+    var _listener$Widgets6;
+    onFocus === null || onFocus === void 0 || onFocus(e, listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
+  };
+  var handleClick = function handleClick(e) {
+    var _listener$Widgets7;
+    onClick === null || onClick === void 0 || onClick(e, listener === null || listener === void 0 || (_listener$Widgets7 = listener.Widgets) === null || _listener$Widgets7 === void 0 ? void 0 : _listener$Widgets7[name]);
+  };
+  var handleMouseEnter = function handleMouseEnter(e) {
+    var _listener$Widgets8;
+    setIsTouched(true);
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e, listener === null || listener === void 0 || (_listener$Widgets8 = listener.Widgets) === null || _listener$Widgets8 === void 0 ? void 0 : _listener$Widgets8[name]);
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    var _listener$Widgets9;
+    setIsTouched(false);
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e, listener === null || listener === void 0 || (_listener$Widgets9 = listener.Widgets) === null || _listener$Widgets9 === void 0 ? void 0 : _listener$Widgets9[name]);
+  };
+  var handleKeyPress = function handleKeyPress(e) {
+    var _listener$Widgets0;
+    onKeypress === null || onKeypress === void 0 || onKeypress(e, listener === null || listener === void 0 || (_listener$Widgets0 = listener.Widgets) === null || _listener$Widgets0 === void 0 ? void 0 : _listener$Widgets0[name]);
+  };
+  (0, _react.useEffect)(function () {
+    // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue)
+    // For regular widgets: use regular properties (datavalue)
+    var currentInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== undefined ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== undefined ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== undefined ? initialDataValue : null;
+
+    // Only update if the incoming value is different from current state
+    // Use a more robust comparison that handles null/undefined/empty string cases
+    var currentValue = datavalue !== null && datavalue !== undefined ? datavalue : null;
+    var newValue = currentInitialValue;
+    if (currentValue !== newValue) {
+      setDatavalue(newValue);
+      var cleanValue = newValue !== null ? newValue.toString() : "";
+      setInternalValue(cleanValue);
+      setRawInputValue(cleanValue);
+      setPrevDatavalue(currentValue);
+    }
+  }, [initialDataValue, initialMaxDataValue, initialMaxValue, isMaxWidget]);
+  (0, _react.useEffect)(function () {
+    if (inputEl.current) {
+      var focus = function focus() {
+        var _inputEl$current2;
+        (_inputEl$current2 = inputEl.current) === null || _inputEl$current2 === void 0 || _inputEl$current2.focus();
+      };
+      if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
+        listener.Widgets[name].focus = focus;
+      }
+    }
+  }, []);
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown
+  }, onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), onClick ? {
+    onClick: handleClick
+  } : {}), onFocus ? {
+    onFocus: handleFocus
+  } : {}), onKeyup ? {
+    onKeyUp: handleKeyUp
+  } : {}), onKeypress ? {
+    onKeyPress: handleKeyPress
+  } : {}), updateon === "blur" || onBlur ? {
+    onBlur: handleBlur
+  } : {});
+  var value = (0, _util.sanitizeInputValue)(internalValue);
+  return __jsx(_TextField["default"], (0, _extends2["default"])({}, events, {
+    hidden: props.hidden,
+    title: hint || "Number Input",
+    name: name,
+    inputRef: inputEl,
+    variant: "standard",
+    autoFocus: autofocus,
+    disabled: disabled,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter number",
+    type: "text",
+    id: id || name,
+    value: value,
+    error: displayError,
+    className: (0, _clsx["default"])("app-input-wrapper", "wm-number-textfield", disabled && "wm-number-textfield-disabled", isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
+    slotProps: {
+      htmlInput: {
+        step: step,
+        min: minvalue,
+        max: maxvalue,
+        readOnly: readonly,
+        required: required,
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className, "wm-number-slot-input", isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
+        style: styles,
+        "aria-label": arialabel,
+        pattern: regexp,
+        tabIndex: tabindex
+      },
+      formHelperText: {
+        className: (0, _clsx["default"])("wm-number-helper-text", displayError && "wm-number-helper-text-error")
+      }
+    },
+    sx: styles
+  }));
+}, function (prev, current) {
+  var keys = ["datavalue", "maxDataValue", "isMaxWidget", "disabled", "required", "readonly", "placeholder", "tabindex", "shortcutkey", "autofocus", "arialabel", "inputmode", "trailingzero", "decimalplaces", "minvalue", "maxvalue", "className", "hidden", "show", "error"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmNumber.displayName = "WmNumber";
+var WithForm = (0, _withFormController["default"])(WmNumber);
+var WmNumberStandalone = exports.WmNumber = (0, _withStandalone["default"])(WithForm);
+/**
+ * The WmNumber component provides a numeric input with step controls, formatting, and validation.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-number--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-number--docs)
+ *
+ * @param props - {@link WmNumberProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);

package/components/input/number/props.d.ts

@@ -0,0 +1,119 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmNumber component.
+ */
+export interface NumberProps {
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * Regular expression pattern for input validation.
+     */
+    regexp?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Input mode for the number widget.
+     * - `"natural"`: Standard number input.
+     * - `"financial"`: Financial format with trailing zeros.
+     * @default "natural"
+     */
+    inputmode?: "natural" | "financial";
+    /**
+     * Whether to display trailing zeros.
+     */
+    trailingzero?: boolean;
+    /**
+     * Step increment for the number input.
+     */
+    step?: number;
+    /**
+     * Minimum value allowed.
+     */
+    minvalue?: number;
+    /**
+     * Maximum value allowed.
+     */
+    maxvalue?: number;
+    /**
+     * Placeholder text shown when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Keyboard shortcut key to focus the input.
+     */
+    shortcutkey?: string;
+    /**
+     * Whether the input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * The bound data value of the number input.
+     */
+    datavalue?: number | null;
+    /**
+     * Maximum data value for range number inputs.
+     */
+    maxDataValue?: number | null;
+    /**
+     * Whether this is a max-value widget in a range input.
+     */
+    isMaxWidget?: boolean;
+    /**
+     * Delay in milliseconds before updating the data value.
+     * @default "0"
+     */
+    updatedelay?: string;
+    /**
+     * When the data value should be updated.
+     * @default "blur"
+     */
+    updateon?: "blur" | "keypress";
+    /**
+     * Whether the input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Number of decimal places to display.
+     */
+    decimalplaces?: number;
+    /**
+     * Callback invoked when the number value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    /**
+     * Callback invoked when the number input is clicked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the number input.
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the number input.
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Whether the input has a validation error (typically injected by form controller).
+     */
+    error?: boolean;
+    /**
+     * The unique ID for the widget.
+     */
+    id?: string;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+    /**
+     * Display value for the max widget.
+     */
+    maxdisplayValue?: string | null;
+}
+/**
+ * Combined props for the WmNumber component, including base WaveMaker props.
+ */
+export type WmNumberProps = Prettify<NumberProps & BaseProps>;

package/components/input/number/props.js

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