@rnaga/wp-next-ui 1.1.7 → 1.1.8

package/Input.d.ts

@@ -3,6 +3,8 @@ export declare const Input: (props: {
     onChange?: (value: string, e?: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (value: string) => void;
     onClear?: () => void | Promise<void>;
+    onError?: (message: string | null) => void;
+    validate?: string | ((value: string) => boolean);
     canClear?: boolean;
     value?: string | number;
     size?: "small" | "medium" | "large";

package/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAKnE,eAAO,MAAM,KAAK,GAChB,OAAO;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CACtD,4CAsIF,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAKnE,eAAO,MAAM,KAAK,GAChB,OAAO;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CACtD,4CAmJF,CAAC"}

package/Input.js

@@ -3,12 +3,22 @@ import { Box, IconButton, Input as MuiInput } from "@mui/material";
 import { useEffect, useState } from "react";
 import ClearIcon from "@mui/icons-material/Clear";
 export const Input = (props) => {
-    const { onChange, onBlur, onClear, canClear, size, disableBorder, sx, readOnly = false, clearable = false, removeBorderOnFocus = false, multiline, value: _value, isEmpty, ...rest } = props;
+    const { onChange, onBlur, onClear, onError, validate, canClear, size, disableBorder, sx, readOnly = false, clearable = false, removeBorderOnFocus = false, multiline, value: _value, isEmpty, ...rest } = props;
     const [value, setValue] = useState(_value ?? "");
     const handleChange = (e) => {
-        const value = e.target.value;
-        setValue(value);
-        onChange && onChange(value);
+        const newValue = e.target.value;
+        if (validate) {
+            const isValid = typeof validate === "string"
+                ? new RegExp(validate).test(newValue)
+                : validate(newValue);
+            if (!isValid) {
+                onError?.("Invalid value");
+                return;
+            }
+            onError?.(null);
+        }
+        setValue(newValue);
+        onChange && onChange(newValue);
     };
     const handleBlur = (e) => {
         const value = e.target.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnaga/wp-next-ui",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "scripts": {
     "build": "node ../../scripts/build-ui.mjs",
     "release-old": "node ../../scripts/release.mjs",