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

package/components/input/fileupload/useFileUpload.d.ts

@@ -0,0 +1,36 @@
+import { WmFileUploadProps, FileUploadState } from "./props";
+export declare const useFileUpload: (props: WmFileUploadProps) => {
+    onError?: (event: React.MouseEvent | React.ChangeEvent, widget: any, file: File) => void;
+    onBeforeselect?: (event: React.MouseEvent | React.ChangeEvent, widget?: Record<string, unknown>, selectedFiles?: File[]) => void;
+    fileInputRef: import("react").RefObject<HTMLInputElement>;
+    chooseFilter: string;
+    highlightDropArea: boolean;
+    uploadedFiles: (File & FileUploadState)[];
+    selectedFolders: File[];
+    setSelectedFolders: import("react").Dispatch<import("react").SetStateAction<File[]>>;
+    dragOverHandler: (e: React.DragEvent) => void;
+    onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFileDrop: (e: React.DragEvent) => void;
+    setHighlightDropArea: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    clearSelectedFile: (file: FileUploadState & File) => void;
+    triggerFileSelect: () => void;
+    onFileDelete: (e: React.MouseEvent, file: FileUploadState & File) => void;
+    confirmDialogOpen: boolean;
+    confirmDialogProps: {
+        title: string;
+        message: string;
+        oktext: string;
+        canceltext: string;
+        onOk: () => void;
+        onCancel: () => void;
+    };
+    showConfirmDialog: (props: {
+        title: string;
+        message: string;
+        oktext?: string;
+        canceltext?: string;
+        onOk: () => void;
+        onCancel?: () => void;
+    }) => void;
+    closeConfirmDialog: () => void;
+};

package/components/input/fileupload/useFileUpload.js

@@ -0,0 +1,414 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFileUpload = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+var _constants = require("@wavemaker-ai/react-runtime/components/constants");
+var _Utils = require("./Utils");
+var _eventNotifier = require("@wavemaker-ai/react-runtime/core/event-notifier");
+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 useFileUpload = exports.useFileUpload = function useFileUpload(props) {
+  var _listener$appConfig;
+  var name = props.name,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.MULTIPLE : _props$multiple,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? !_constants.fileUploadConstants.DEFAULT_VALUES.ENABLED : _props$disabled,
+    _props$contenttype = props.contenttype,
+    contenttype = _props$contenttype === void 0 ? "" : _props$contenttype,
+    maxfilesize = props.maxfilesize,
+    uploadpath = props.uploadpath,
+    datasource = props.datasource,
+    extensions = props.extensions,
+    filetype = props.filetype,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    deletedatasource = props.deletedatasource,
+    onError = props.onError,
+    onSelect = props.onSelect,
+    onBeforeselect = props.onBeforeselect,
+    onDelete = props.onDelete,
+    listener = props.listener;
+  var allowedFileUploadExtensions = listener === null || listener === void 0 || (_listener$appConfig = listener.appConfig) === null || _listener$appConfig === void 0 || (_listener$appConfig = _listener$appConfig.appProperties) === null || _listener$appConfig === void 0 ? void 0 : _listener$appConfig.allowedFileUploadExtensions;
+  var fileInputRef = (0, _react.useRef)(null);
+
+  // State for managing confirm dialog
+  var _useState = (0, _react.useState)(false),
+    confirmDialogOpen = _useState[0],
+    setConfirmDialogOpen = _useState[1];
+  var _useState2 = (0, _react.useState)({
+      title: "",
+      message: "",
+      oktext: "OK",
+      canceltext: "Cancel",
+      onOk: function onOk() {},
+      onCancel: function onCancel() {}
+    }),
+    confirmDialogProps = _useState2[0],
+    setConfirmDialogProps = _useState2[1];
+
+  // Function to show confirm dialog
+  var showConfirmDialog = function showConfirmDialog(props) {
+    setConfirmDialogProps({
+      title: props.title,
+      message: props.message,
+      oktext: props.oktext || "OK",
+      canceltext: props.canceltext || "Cancel",
+      onOk: props.onOk,
+      onCancel: props.onCancel || function () {}
+    });
+    setConfirmDialogOpen(true);
+  };
+
+  // Function to close confirm dialog
+  var closeConfirmDialog = function closeConfirmDialog() {
+    setConfirmDialogOpen(false);
+  };
+
+  // Helper function to normalize extensions (handles both space and comma separated)
+  var normalizeExtensions = (0, _react.useCallback)(function (extensionString) {
+    if (!extensionString) return "";
+
+    // Split by both comma and space, then filter out empty strings
+    var extensions = extensionString.split(/[,\s]+/).filter(function (ext) {
+      return ext.trim();
+    });
+    return extensions.map(function (ext) {
+      var trimmedExt = ext.trim();
+      // Handle MIME type patterns (e.g., "image/*")
+      if (trimmedExt.includes("/")) {
+        return trimmedExt;
+      }
+      // Ensure extensions start with a dot
+      if (trimmedExt.startsWith(".")) {
+        return trimmedExt;
+      }
+      return ".".concat(trimmedExt);
+    }).join(",");
+  }, []);
+  var getChooseFilter = function getChooseFilter() {
+    var normalizedContenttype = normalizeExtensions(contenttype);
+    var normalizedExtensions = normalizeExtensions(extensions || "");
+    var normalizedFiletype = normalizeExtensions(filetype || "");
+    var defaultFilter = (0, _Utils.getDefaultChooseFilter)(DEFAULT_ALLOWED_EXTENSIONS);
+    return normalizedContenttype || normalizedExtensions || normalizedFiletype || defaultFilter;
+  };
+  var DEFAULT_ALLOWED_EXTENSIONS = (allowedFileUploadExtensions === null || allowedFileUploadExtensions === void 0 ? void 0 : allowedFileUploadExtensions.split(" ").map(function (item) {
+    return item.trim();
+  }).map(function (item) {
+    return item.endsWith("/*") ? item : ".".concat(item);
+  })) || [];
+  var _useState3 = (0, _react.useState)(function () {
+      return getChooseFilter();
+    }),
+    chooseFilter = _useState3[0],
+    setChooseFilter = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    highlightDropArea = _useState4[0],
+    setHighlightDropArea = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    uploadedFiles = _useState5[0],
+    setUploadedFiles = _useState5[1];
+  var _useState6 = (0, _react.useState)([]),
+    selectedFolders = _useState6[0],
+    setSelectedFolders = _useState6[1];
+  var invokeEventCallback = (0, _react.useCallback)(function (eventName, payload) {
+    var _listener$Widgets;
+    var eventHandler = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[name]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[eventName];
+    return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
+  }, [listener, name]);
+  var fileUploadProgress = function fileUploadProgress(progress) {
+    setUploadedFiles(function (prevFiles) {
+      return prevFiles.map(function (file) {
+        if (file.name === progress.fileName && file.uniqueId === progress.uniqueId) {
+          file.progress = progress.progress;
+          if (file.progress === 100) {
+            file.status = "success";
+          } else {
+            file.status = progress.status;
+            if (progress.errMsg) {
+              file.errMsg = progress.errMsg;
+              file.status = "error";
+            }
+          }
+        }
+        return file;
+      });
+    });
+  };
+
+  // Setup progress tracking with EventNotifier
+  (0, _react.useEffect)(function () {
+    var progressObs = datasource && datasource._progressObservable;
+    if (progressObs) {
+      progressObs.subscribe(function (progress) {
+        fileUploadProgress(progress);
+
+        // Move notifyApp calls outside of setState to avoid render phase issues
+        if (progress.progress === 100) {
+          var _listener$App;
+          listener === null || listener === void 0 || (_listener$App = listener.App) === null || _listener$App === void 0 || _listener$App.notifyApp("File uploaded successfully", "Success");
+        } else if (progress.errMsg) {
+          var _listener$App2;
+          listener === null || listener === void 0 || (_listener$App2 = listener.App) === null || _listener$App2 === void 0 || _listener$App2.notifyApp("File upload failed", "Error");
+        }
+      });
+    }
+    return function () {
+      var progressObs = datasource && datasource._progressObservable;
+      if (progressObs !== null && progressObs !== void 0 && progressObs.unsubscribe) {
+        progressObs.unsubscribe();
+      }
+    };
+  }, [invokeEventCallback]);
+  (0, _react.useEffect)(function () {
+    // Normalize extensions to handle both space and comma separated values
+    var selected = getChooseFilter();
+    setChooseFilter(selected);
+  }, [contenttype, extensions, filetype, normalizeExtensions, DEFAULT_ALLOWED_EXTENSIONS]);
+  (0, _react.useEffect)(function () {
+    var _ref, _ref2;
+    var selected = (_ref = (_ref2 = contenttype !== null && contenttype !== void 0 ? contenttype : extensions) !== null && _ref2 !== void 0 ? _ref2 : filetype) !== null && _ref !== void 0 ? _ref : (0, _Utils.getDefaultChooseFilter)(DEFAULT_ALLOWED_EXTENSIONS);
+    setChooseFilter(selected);
+  }, [contenttype, extensions, filetype]);
+  (0, _react.useEffect)(function () {
+    // Add event listeners for drag and drop
+    if (disabled || readonly) {
+      setHighlightDropArea(false);
+      window.removeEventListener("focus", _disableDropZone);
+    } else {
+      document.addEventListener("dragover", dragOverCb);
+      document.addEventListener("drop", dropCb);
+      document.addEventListener("mouseleave", dropCb);
+    }
+    return function () {
+      document.removeEventListener("dragover", dragOverCb);
+      document.removeEventListener("drop", dropCb);
+      document.removeEventListener("mouseleave", dropCb);
+    };
+  }, [disabled, readonly]);
+  var dragOverCb = function dragOverCb(e) {
+    e.preventDefault();
+    var dropzone = document.getElementById("dropzone");
+    if (dropzone) {
+      dropzone.classList.add("highlight-drop-box");
+    }
+  };
+  var dropCb = function dropCb() {
+    var dropzone = document.getElementById("dropzone");
+    if (dropzone) {
+      dropzone.classList.remove("highlight-drop-box");
+    }
+    setHighlightDropArea(false);
+  };
+  var dragOverHandler = function dragOverHandler(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setHighlightDropArea(true);
+  };
+  var _disableDropZone = function disableDropZone() {
+    setHighlightDropArea(false);
+    window.removeEventListener("focus", _disableDropZone);
+  };
+  var onBeforeSelectEventCall = function onBeforeSelectEventCall($event, $files) {
+    var files = (0, _Utils.getValidFiles)($files, contenttype, extensions || "", filetype || "", chooseFilter, maxfilesize || "10", onError, listener);
+    if (!(0, _lodashEs.isEmpty)(files.errorFiles)) {
+      invokeEventCallback("error", {
+        $event: _objectSpread(_objectSpread({}, $event), {}, {
+          files: files.errorFiles
+        }),
+        files: files.errorFiles
+      });
+    }
+    if (files.validFiles.length) {
+      var beforeSelectVal = invokeEventCallback("beforeselect", {
+        $event: _objectSpread(_objectSpread({}, $event), {}, {
+          files: files.validFiles
+        }),
+        files: files.validFiles
+      });
+      if (onBeforeselect) {
+        var _listener$Widgets2;
+        var event = _objectSpread(_objectSpread({}, $event), {}, {
+          _reactName: "onBeforeselect"
+        });
+        onBeforeselect(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name], files.validFiles);
+      }
+      // Proceed only if neither callback returns false
+      if (beforeSelectVal !== false) {
+        var _filesWithIds$, _fileInputRef$current;
+        var filesWithIds = files.validFiles.map(function (file) {
+          var fileWithId = file;
+          if (!fileWithId.name) {
+            fileWithId.name = file.name;
+          }
+          if (!fileWithId.size) {
+            fileWithId.size = file.size;
+          }
+
+          // Add our custom properties
+          fileWithId.uniqueId = (0, _Utils.generateFileId)();
+
+          // Set initial status
+          if (datasource) {
+            fileWithId.status = "onProgress";
+            fileWithId.progress = 0;
+          }
+          return fileWithId;
+        });
+        if (datasource) {
+          datasource._progressObservable = (0, _eventNotifier.eventObserver)();
+          datasource.dataBinding = datasource.dataBinding || {};
+          datasource.dataBinding.files = filesWithIds;
+          datasource.dataSet = filesWithIds;
+        }
+        setUploadedFiles(function (prev) {
+          return multiple ? [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(filesWithIds)) : (0, _toConsumableArray2["default"])(filesWithIds);
+        });
+        listener === null || listener === void 0 || listener.onChange(name, {
+          selectedFiles: filesWithIds
+        });
+        var selectedFile = (_filesWithIds$ = filesWithIds[0]) !== null && _filesWithIds$ !== void 0 ? _filesWithIds$ : (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || (_fileInputRef$current = _fileInputRef$current.files) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current[0];
+        onSelect === null || onSelect === void 0 || onSelect($event, selectedFile, filesWithIds);
+      }
+    }
+  };
+  var onFileSelect = function onFileSelect(e) {
+    setSelectedFolders([]);
+    onBeforeSelectEventCall(e, e.target.files || []);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  var onFileDrop = function onFileDrop(e) {
+    e.preventDefault();
+    var listOfFiles = [];
+    setSelectedFolders([]);
+    var filesData = e.dataTransfer.items;
+    if (filesData.length > 0) {
+      var _loop = function _loop() {
+        var _webkitGetAsEntry, _ref3;
+        // Using explicit type assertion since webkitGetAsEntry is non-standard
+        var entry = (_webkitGetAsEntry = (_ref3 = filesData[i]).webkitGetAsEntry) === null || _webkitGetAsEntry === void 0 ? void 0 : _webkitGetAsEntry.call(_ref3);
+        if (entry && entry.isFile) {
+          var file = filesData[i].getAsFile();
+          if (file) listOfFiles.push(file);
+        } else if (entry && entry.isDirectory) {
+          var _file = filesData[i].getAsFile();
+          if (_file) setSelectedFolders(function (prev) {
+            return [].concat((0, _toConsumableArray2["default"])(prev), [_file]);
+          });
+        }
+      };
+      for (var i = 0; i < filesData.length; i++) {
+        _loop();
+      }
+      onBeforeSelectEventCall(e, listOfFiles);
+    }
+  };
+  var clearSelectedFile = function clearSelectedFile(file) {
+    // setSelectedFilesList((prev) => clearFile(prev as (File & FileUploadState)[], file));
+    setUploadedFiles(function (prev) {
+      return (0, _Utils.clearFile)(prev, file);
+    });
+  };
+  var triggerFileSelect = function triggerFileSelect() {
+    if (fileInputRef.current && !disabled && !readonly) {
+      fileInputRef.current.click();
+    }
+  };
+  var deleteFileProgress = function deleteFileProgress(file) {
+    if (!deletedatasource) return;
+    deletedatasource._deleteFileObservable.subscribe(function (response) {
+      if (response.status === "success") {
+        setUploadedFiles(function (prev) {
+          return prev.filter(function (fileObj) {
+            return file !== fileObj;
+          }) || [];
+        });
+        setSelectedFolders(function (prev) {
+          return prev.filter(function (fileObj) {
+            return file !== fileObj;
+          }) || [];
+        });
+      }
+    });
+  };
+  var onFileDelete = function onFileDelete(e, file) {
+    if (!file || readonly) return;
+    var beforeDeleteVal = invokeEventCallback("beforedelete", {
+      $event: file
+    });
+    if (beforeDeleteVal !== false) {
+      showConfirmDialog({
+        title: "Delete file",
+        message: "Are you sure you want to delete this file?",
+        oktext: "Ok",
+        canceltext: "Cancel",
+        onOk: function onOk() {
+          try {
+            if (deletedatasource) {
+              var _response, _fileResponse$fileNam, _listener$Widgets3, _listener$App3;
+              deletedatasource._deleteFileObservable = (0, _eventNotifier.eventObserver)();
+              deleteFileProgress(file);
+              var fileResponse = (_response = file._response) === null || _response === void 0 ? void 0 : _response[0];
+              var fileName = (_fileResponse$fileNam = fileResponse === null || fileResponse === void 0 ? void 0 : fileResponse.fileName) !== null && _fileResponse$fileNam !== void 0 ? _fileResponse$fileNam : file.name;
+              deletedatasource.setInput("file", fileName);
+              var event = _objectSpread(_objectSpread({}, e), {}, {
+                _reactName: "onDelete"
+              });
+              onDelete === null || onDelete === void 0 || onDelete(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+              listener && (listener === null || listener === void 0 || (_listener$App3 = listener.App) === null || _listener$App3 === void 0 ? void 0 : _listener$App3.notifyApp("File deleted successfully", "Success"));
+            }
+          } catch (error) {
+            var _listener$App4;
+            listener && (listener === null || listener === void 0 || (_listener$App4 = listener.App) === null || _listener$App4 === void 0 ? void 0 : _listener$App4.notifyApp("Service Call Failed", "Error"));
+          } finally {
+            closeConfirmDialog();
+          }
+        },
+        onCancel: function onCancel() {
+          closeConfirmDialog();
+        }
+      });
+    }
+  };
+  var handleBeforeSelect = (0, _react.useCallback)(function (event, widget, selectedFiles) {
+    onBeforeselect === null || onBeforeselect === void 0 || onBeforeselect(event, widget !== null && widget !== void 0 ? widget : {}, selectedFiles !== null && selectedFiles !== void 0 ? selectedFiles : []);
+  }, [onBeforeselect]);
+  var handleError = (0, _react.useCallback)(function (event, widget, file) {
+    onError === null || onError === void 0 || onError(event, widget, file);
+  }, [onError]);
+  var events = _objectSpread(_objectSpread({}, onBeforeselect ? {
+    onBeforeselect: handleBeforeSelect
+  } : {}), onError ? {
+    onError: handleError
+  } : {});
+  return _objectSpread({
+    fileInputRef: fileInputRef,
+    chooseFilter: chooseFilter,
+    highlightDropArea: highlightDropArea,
+    uploadedFiles: uploadedFiles,
+    selectedFolders: selectedFolders,
+    setSelectedFolders: setSelectedFolders,
+    dragOverHandler: dragOverHandler,
+    onFileSelect: onFileSelect,
+    onFileDrop: onFileDrop,
+    setHighlightDropArea: setHighlightDropArea,
+    clearSelectedFile: clearSelectedFile,
+    triggerFileSelect: triggerFileSelect,
+    onFileDelete: onFileDelete,
+    // Confirm dialog state and functions
+    confirmDialogOpen: confirmDialogOpen,
+    confirmDialogProps: confirmDialogProps,
+    showConfirmDialog: showConfirmDialog,
+    closeConfirmDialog: closeConfirmDialog
+  }, events);
+};

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

@@ -0,0 +1,164 @@
+import React from "react";
+declare const WmNumberStandalone: React.ComponentType<import("../../data/form/form-controller/props").WithFormControllerProps & {
+    required?: boolean;
+    regexp?: string;
+    disabled?: boolean;
+    inputmode?: "natural" | "financial";
+    trailingzero?: boolean;
+    step?: number;
+    minvalue?: number;
+    maxvalue?: number;
+    placeholder?: string;
+    shortcutkey?: string;
+    autofocus?: boolean;
+    datavalue?: any;
+    maxDataValue?: number | null;
+    isMaxWidget?: boolean;
+    updatedelay?: string;
+    updateon?: "blur" | "keypress";
+    readonly?: boolean;
+    decimalplaces?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    onClick?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseLeave?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    error?: boolean;
+    id?: string;
+    fieldName?: string;
+    maxdisplayValue?: string | null;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    dataset?: any;
+    prefabName?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmNumberStandalone as WmNumber };
+/**
+ * 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}
+ */
+declare const _default: React.ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | (RegExp & string);
+    validationmessage?: string;
+    hint?: string;
+    type?: string;
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    disabled?: boolean;
+    inputmode?: "natural" | "financial";
+    trailingzero?: boolean;
+    step?: number;
+    minvalue?: number;
+    maxvalue?: number;
+    placeholder?: string;
+    shortcutkey?: string;
+    autofocus?: boolean;
+    maxDataValue?: number | null;
+    isMaxWidget?: boolean;
+    updatedelay?: string;
+    updateon?: "blur" | "keypress";
+    readonly?: boolean;
+    decimalplaces?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    onClick?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseLeave?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    error?: boolean;
+    id?: string;
+    fieldName?: string;
+    maxdisplayValue?: string | null;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;