@etsoo/materialui 1.3.15 → 1.3.16

package/lib/IntInputField.d.ts

@@ -50,6 +50,6 @@ export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "
     boxProps?: BoxProps;
 };
 /**
- * Integer input field
+ * Integer input field (controlled)
  */
 export declare const IntInputField: React.ForwardRefExoticComponent<Omit<IntInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/IntInputField.js

@@ -5,7 +5,7 @@ import React from "react";
 import { NumberUtils } from "@etsoo/shared";
 import { InputField } from "./InputField";
 /**
- * Integer input field
+ * Integer input field (controlled)
  */
 export const IntInputField = React.forwardRef((props, ref) => {
     // Destruct

package/lib/MoneyInputField.d.ts

@@ -5,6 +5,6 @@ import { IntInputFieldProps } from "./IntInputField";
  */
 export type MoneyInputFieldProps = IntInputFieldProps & {};
 /**
- * Money input field
+ * Money input field (controlled)
  */
 export declare const MoneyInputField: React.ForwardRefExoticComponent<Omit<MoneyInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/MoneyInputField.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { IntInputField } from "./IntInputField";
 /**
- * Money input field
+ * Money input field (controlled)
  */
 export const MoneyInputField = React.forwardRef((props, ref) => {
     // Destruct

package/lib/NumberInputField.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { InputFieldProps } from "./InputField";
+/**
+ * Number input field properties
+ */
+export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> & {
+    /**
+     * Input field style
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step value
+     */
+    step?: number;
+};
+/**
+ * Number input field, for controlled only components, please see IntInputField and MoneyInputField
+ * @param props Props
+ * @returns Component
+ */
+export declare function NumberInputField(props: NumberInputFieldProps): React.JSX.Element;

package/lib/NumberInputField.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { InputField } from "./InputField";
+/**
+ * Number input field, for controlled only components, please see IntInputField and MoneyInputField
+ * @param props Props
+ * @returns Component
+ */
+export function NumberInputField(props) {
+    const { inputStyle = { textAlign: "right" }, min = 0, step = 1, max = 9999999, ...rest } = props;
+    return (React.createElement(InputField, { inputProps: {
+            min,
+            step,
+            max,
+            style: inputStyle,
+            inputMode: "numeric"
+        }, ...rest }));
+}

package/lib/index.d.ts

@@ -79,6 +79,7 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberInputField";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./PercentCircularProgress";

package/lib/index.js

@@ -79,6 +79,7 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberInputField";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./PercentCircularProgress";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
     "@emotion/styled": "^11.11.0",
     "@etsoo/appscript": "^1.4.53",
     "@etsoo/notificationbase": "^1.1.28",
-    "@etsoo/react": "^1.7.9",
+    "@etsoo/react": "^1.7.10",
     "@etsoo/shared": "^1.2.12",
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.9",

package/src/IntInputField.tsx

@@ -71,7 +71,7 @@ export type IntInputFieldProps = Omit<
 };
 
 /**
- * Integer input field
+ * Integer input field (controlled)
  */
 export const IntInputField = React.forwardRef<
   HTMLDivElement,

package/src/MoneyInputField.tsx

@@ -7,7 +7,7 @@ import { IntInputField, IntInputFieldProps } from "./IntInputField";
 export type MoneyInputFieldProps = IntInputFieldProps & {};
 
 /**
- * Money input field
+ * Money input field (controlled)
  */
 export const MoneyInputField = React.forwardRef<
   HTMLDivElement,

package/src/NumberInputField.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { InputField, InputFieldProps } from "./InputField";
+
+/**
+ * Number input field properties
+ */
+export type NumberInputFieldProps = Omit<
+  InputFieldProps,
+  "type" | "inputProps"
+> & {
+  /**
+   * Input field style
+   */
+  inputStyle?: React.CSSProperties;
+
+  /**
+   * Minimum value
+   */
+  min?: number;
+
+  /**
+   * Maximum value
+   */
+  max?: number;
+
+  /**
+   * Step value
+   */
+  step?: number;
+};
+
+/**
+ * Number input field, for controlled only components, please see IntInputField and MoneyInputField
+ * @param props Props
+ * @returns Component
+ */
+export function NumberInputField(props: NumberInputFieldProps) {
+  const {
+    inputStyle = { textAlign: "right" },
+    min = 0,
+    step = 1,
+    max = 9999999,
+    ...rest
+  } = props;
+
+  return (
+    <InputField
+      inputProps={{
+        min,
+        step,
+        max,
+        style: inputStyle,
+        inputMode: "numeric"
+      }}
+      {...rest}
+    />
+  );
+}

package/src/index.ts

@@ -83,6 +83,7 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberInputField";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./PercentCircularProgress";