haze-ui 1.8.1 → 1.9.0

package/README.md

@@ -4,6 +4,9 @@
 
 English | [简体中文](./README-zh_CN.md)
 
+[![npm](https://img.shields.io/npm/v/haze-ui)](https://www.npmjs.com/package/haze-ui)
+[![CI](https://github.com/wmzy/haze-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/wmzy/haze-ui/actions/workflows/ci.yml)
+
 ## Features
 
 - Integrated [react use control](https://github.com/wmzy/react-use-control) provides component internal states
@@ -86,6 +89,40 @@ function ProfileForm() {
 surfaces the first error in a `role="alert"` element — no manual
 `FieldError` wiring.
 
+#### `mode`: per-field validation timing (react-f0rm ≥ 0.6)
+
+Pass `mode` to validate one field on its own schedule instead of the
+form-wide validation mode — other fields are unaffected. It accepts
+react-f0rm's `ValidationMode` values: `'onSubmit'` (default form
+behavior), `'onBlur'`, `'onChange'`, `'onTouched'` or `'all'`. Omit it to
+keep the form's mode.
+
+```jsx
+<FormItem
+  form={form}
+  name="email"
+  label="Email"
+  mode="onBlur"
+  validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
+>
+  {({ id, errorId, invalid, onBlur, control }) => (
+    <Input
+      id={id}
+      value={control}
+      aria-invalid={invalid}
+      aria-describedby={errorId}
+      onBlur={onBlur}
+    />
+  )}
+</FormItem>
+```
+
+With `mode="onBlur"` (and the binding's `onBlur` passed to the control,
+as above) the email field is validated the moment it loses focus — no
+submit needed. `mode` accepts `'onSubmit'`, `'onBlur'`, `'onChange'`,
+`'onTouched'` or `'all'`; only this field's schedule changes, the rest
+of the form keeps its own `mode`.
+
 ## Related Projects
 
 - [react-use-control](https://github.com/wmzy/react-use-control)

package/dist/form/FormItem.js

@@ -6,34 +6,34 @@ import { useId as i } from "react";
 import { useField as a, useFieldErrors as o } from "react-f0rm";
 //#region src/lib/form/FormItem.tsx
 var s = "haze-FormItem__item", c = "haze-FormItem__labelText", l = "haze-FormItem__errorText";
-function u({ form: u, name: d, label: f, validate: p, className: m, children: h }) {
-	let g = `haze-field-${i()}`, _ = `${g}-error`;
-	a({
+function u({ form: u, name: d, label: f, validate: p, mode: m, className: h, children: g }) {
+	let _ = `haze-field-${i()}`, v = `${_}-error`, { onBlur: y } = a({
 		form: u,
 		name: d,
-		validate: p
-	});
-	let v = o(u, d), y = t(u, d), b = v.length > 0;
+		validate: p,
+		mode: m
+	}), b = o(u, d), x = t(u, d), S = b.length > 0;
 	return /* @__PURE__ */ r("div", {
-		className: e([s, m]),
+		className: e([s, h]),
 		children: [
 			f !== void 0 && /* @__PURE__ */ n("label", {
-				htmlFor: g,
+				htmlFor: _,
 				className: e(c),
 				children: f
 			}),
-			h({
-				id: g,
-				errorId: _,
-				invalid: b,
-				errors: v,
-				control: y
-			}),
-			b && /* @__PURE__ */ n("span", {
+			g({
 				id: _,
+				errorId: v,
+				invalid: S,
+				errors: b,
+				onBlur: y,
+				control: x
+			}),
+			S && /* @__PURE__ */ n("span", {
+				id: v,
 				role: "alert",
 				className: e(l),
-				children: v[0].message
+				children: b[0].message
 			})
 		]
 	});

package/dist/types/form/FormItem.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { FieldError, FieldPath, Name } from 'react-f0rm';
+import type { FieldError, FieldPath, Name, ValidationMode } from 'react-f0rm';
 import type { Control } from 'react-use-control';
 import type { FormInstance, PathValueOf } from './useFormControl';
 /**
@@ -22,6 +22,10 @@ export type FormItemBinding<TValues, P extends FieldPath<TValues> | Name> = {
     invalid: boolean;
     /** every error registered for the field, in insertion order */
     errors: FieldError[];
+    /** react-f0rm blur hook for this field — pass to the control's `onBlur`
+     * (`<Input onBlur={onBlur}/>`) so blur-scheduled validation modes
+     * (`mode='onBlur' | 'onTouched' | 'all'`) fire when the field loses focus. */
+    onBlur: () => void;
     /** Control bound to the field value — pass to a control prop */
     control: Control<PathValueOf<TValues, P>>;
 };
@@ -32,6 +36,11 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
     /** Field-level validator, registered through react-f0rm's own
      * `useField` channel — validated per the form's `mode` and on submit. */
     validate?: FieldValidator;
+    /** Per-field validation mode override (react-f0rm ≥0.6): when given,
+     * this field validates on its own schedule — e.g. `'onBlur'` — instead
+     * of the form's `mode`; other fields are unaffected. Omit to keep the
+     * form-wide behavior. */
+    mode?: ValidationMode;
     className?: string;
     children: (binding: FormItemBinding<TValues, P>) => ReactNode;
 };
@@ -52,4 +61,4 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * `<span id={errorId} role='alert'>` next to the children; with no errors
  * no extra element is rendered.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -98,7 +98,7 @@
     "ramda": "^0.32.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-f0rm": "^0.5.0",
+    "react-f0rm": "^0.6.0",
     "react-icons": "^5.7.0",
     "rollup-plugin-type-as-json-schema": "^0.2.6",
     "semantic-release": "^25.0.9",