react-better-html 1.1.62 → 1.1.64

package/dist/components/InputField.js

@@ -177,7 +177,7 @@ InputFieldComponent.password = (0, react_1.forwardRef)(function Password({ ...pr
 InputFieldComponent.search = (0, react_1.forwardRef)(function Search({ ...props }, ref) {
     return (0, jsx_runtime_1.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref: ref, ...props });
 });
-InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({ label, value, onChangeValue, ...props }, ref) {
+InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const [dropdownValue, setDropdownValue] = (0, react_1.useState)();
     const [inputFieldValue, setInputFieldValue] = (0, react_1.useState)(value?.toString() ?? "");
@@ -211,7 +211,7 @@ InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({
         setDropdownValue(country.phoneNumberExtension);
         setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default, { width: "100%", children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, minWidth: 116, withSearch: true, placeholder: label ?? "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default, { width: "100%", children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, minWidth: 116, withSearch: true, placeholder: label ?? "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
 });
 InputFieldComponent.date = (0, react_1.forwardRef)(function Date({ className, onFocus, onBlur, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/utils/hooks.d.ts

@@ -76,6 +76,7 @@ export declare function useForm<FormFields extends Record<string | number, strin
     reset: () => void;
     requiredFields: (keyof FormFields)[] | undefined;
     isDirty: boolean;
+    isValid: boolean;
 };
 export declare function useUrlQuery(): {
     setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;

package/dist/utils/hooks.js

@@ -379,6 +379,10 @@ function useForm(options) {
         setErrors({});
     }, [defaultValues]);
     const isDirty = (0, react_1.useMemo)(() => Object.keys(defaultValues).some((key) => defaultValues[key] !== values[key]), [defaultValues, values]);
+    const isValid = (0, react_1.useMemo)(() => {
+        const validationErrors = validate?.(values) || {};
+        return Object.keys(validationErrors).length === 0;
+    }, [validate, values]);
     return {
         values,
         errors,
@@ -396,6 +400,7 @@ function useForm(options) {
         reset,
         requiredFields,
         isDirty,
+        isValid,
     };
 }
 function useUrlQuery() {

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.62",
+   "version": "1.1.64",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [