@igne-agency/react-web-ui 0.2.1 → 0.3.0

package/dist/lib/forms/use-connected-field.js

@@ -1,48 +1,74 @@
+import { FieldGroupContext } from "../../components/field/field-group-context.js";
 import { useFieldContext } from "./context.js";
 import { c } from "react/compiler-runtime";
+import { useContext, useLayoutEffect } from "react";
 // src/lib/forms/use-connected-field.ts
 /**
-* The field a bridge renders for, and the props every field takes from it:
-* its name, its errors as the validators returned them, `dirty`, `touched`,
-* `pending` while it validates, and the blur handler. The value and its change
-* handler are the control's own.
+* The TanStack Form field a control renders in, and the props every field
+* takes from it: its name, its errors as the validators returned them,
+* `dirty`, `touched`, `pending` while it validates, and the blur handler. The
+* value and its change handler are the control's own. Given the field's
+* label, it tells an enclosing field group, whose `formatError` receives it.
 *
 * @example
-* const { field, props } = useConnectedField<string>();
-* <TextField {...props} value={field.state.value} onValueChange={field.handleChange} label={label} optionalLabel={optionalLabel} />
+* const { field, props: { name, onBlur, ...state } } = useConnectedField<string>(label);
+* <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange} optionalLabel="optional">
+* 	<TextInput.Input name={name} onBlur={onBlur} />
+* </TextInput.Root>
 */
-var useConnectedField = () => {
-	const $ = c(10);
+var useConnectedField = (label) => {
+	const $ = c(15);
 	const field = useFieldContext();
+	const registerLabel = useContext(FieldGroupContext)?.registerLabel;
+	const { name } = field;
 	const { meta } = field.state;
 	let t0;
-	if ($[0] !== field.handleBlur || $[1] !== field.name || $[2] !== meta.errors || $[3] !== meta.isDirty || $[4] !== meta.isTouched || $[5] !== meta.isValidating) {
-		t0 = {
-			name: field.name,
+	let t1;
+	if ($[0] !== label || $[1] !== name || $[2] !== registerLabel) {
+		t0 = () => registerLabel === void 0 || label === void 0 ? void 0 : registerLabel(name, label);
+		t1 = [
+			registerLabel,
+			name,
+			label
+		];
+		$[0] = label;
+		$[1] = name;
+		$[2] = registerLabel;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	if ($[5] !== field.handleBlur || $[6] !== meta.errors || $[7] !== meta.isDirty || $[8] !== meta.isTouched || $[9] !== meta.isValidating || $[10] !== name) {
+		t2 = {
+			name,
 			errors: meta.errors,
 			dirty: meta.isDirty,
 			touched: meta.isTouched,
 			pending: meta.isValidating,
 			onBlur: field.handleBlur
 		};
-		$[0] = field.handleBlur;
-		$[1] = field.name;
-		$[2] = meta.errors;
-		$[3] = meta.isDirty;
-		$[4] = meta.isTouched;
-		$[5] = meta.isValidating;
-		$[6] = t0;
-	} else t0 = $[6];
-	let t1;
-	if ($[7] !== field || $[8] !== t0) {
-		t1 = {
+		$[5] = field.handleBlur;
+		$[6] = meta.errors;
+		$[7] = meta.isDirty;
+		$[8] = meta.isTouched;
+		$[9] = meta.isValidating;
+		$[10] = name;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== field || $[13] !== t2) {
+		t3 = {
 			field,
-			props: t0
+			props: t2
 		};
-		$[7] = field;
-		$[8] = t0;
-		$[9] = t1;
-	} else t1 = $[9];
-	return t1;
+		$[12] = field;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return t3;
 };
 export { useConnectedField };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@igne-agency/react-web-ui",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "IGNE's React web component kit: primitives and the presets over them, form controls in three tiers with a TanStack Form bridge, and DTCG tokens themed per app.",
 	"license": "MIT",
 	"repository": {
@@ -145,6 +145,10 @@
 			"types": "./dist/components/field-placeholder/index.d.ts",
 			"default": "./dist/components/field-placeholder/index.js"
 		},
+		"./fieldset": {
+			"types": "./dist/components/fieldset/index.d.ts",
+			"default": "./dist/components/fieldset/index.js"
+		},
 		"./file-field": {
 			"types": "./dist/components/file-field/index.d.ts",
 			"default": "./dist/components/file-field/index.js"

package/dist/components/field/fieldset.d.ts

@@ -1,22 +0,0 @@
-import type { ReactNode } from "react";
-import { type FieldLabelProps, type FieldProps, type FieldRootProps } from "./field.tsx";
-/** What the fieldset root of a group of choices takes. */
-export type FieldsetRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
-    /** A choice is made. */
-    filled?: boolean;
-    readOnly?: boolean;
-}>;
-/**
- * A field rendered as a fieldset, for a group of choices named by its legend.
- *
- * @example
- * <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
- */
-export declare const FieldsetRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, ...props }: FieldsetRootProps) => ReactNode;
-/**
- * The legend that names a {@link FieldsetRoot}.
- *
- * @example
- * <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
- */
-export declare const FieldsetLegend: (props: FieldLabelProps) => ReactNode;

package/dist/components/field/fieldset.js

@@ -1,130 +0,0 @@
-import { Field } from "./field.js";
-import { fieldStateAttributes } from "./field-state.js";
-import { useFieldState } from "./use-field-state.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-import { Fieldset } from "@base-ui/react/fieldset";
-// src/components/field/fieldset.tsx
-/**
-* A field rendered as a fieldset, for a group of choices named by its legend.
-*
-* @example
-* <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
-*/
-var FieldsetRoot = (t0) => {
-	const $ = c(29);
-	let dirty;
-	let disabled;
-	let errors;
-	let filled;
-	let pending;
-	let props;
-	let readOnly;
-	let requiredness;
-	let touched;
-	if ($[0] !== t0) {
-		({errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, ...props} = t0);
-		$[0] = t0;
-		$[1] = dirty;
-		$[2] = disabled;
-		$[3] = errors;
-		$[4] = filled;
-		$[5] = pending;
-		$[6] = props;
-		$[7] = readOnly;
-		$[8] = requiredness;
-		$[9] = touched;
-	} else {
-		dirty = $[1];
-		disabled = $[2];
-		errors = $[3];
-		filled = $[4];
-		pending = $[5];
-		props = $[6];
-		readOnly = $[7];
-		requiredness = $[8];
-		touched = $[9];
-	}
-	let t1;
-	if ($[10] !== dirty || $[11] !== disabled || $[12] !== errors || $[13] !== filled || $[14] !== pending || $[15] !== readOnly || $[16] !== requiredness || $[17] !== touched) {
-		t1 = {
-			errors,
-			requiredness,
-			dirty,
-			touched,
-			pending,
-			disabled,
-			readOnly,
-			filled
-		};
-		$[10] = dirty;
-		$[11] = disabled;
-		$[12] = errors;
-		$[13] = filled;
-		$[14] = pending;
-		$[15] = readOnly;
-		$[16] = requiredness;
-		$[17] = touched;
-		$[18] = t1;
-	} else t1 = $[18];
-	const field = useFieldState(t1);
-	let t2;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Fieldset.Root, {});
-		$[19] = t2;
-	} else t2 = $[19];
-	const t3 = field.disabled;
-	const t4 = field.invalid;
-	let t5;
-	if ($[20] !== field.state) {
-		t5 = fieldStateAttributes(field.state);
-		$[20] = field.state;
-		$[21] = t5;
-	} else t5 = $[21];
-	let t6;
-	if ($[22] !== dirty || $[23] !== field.disabled || $[24] !== field.invalid || $[25] !== props || $[26] !== t5 || $[27] !== touched) {
-		t6 = /* @__PURE__ */ jsx(Field.Root, {
-			render: t2,
-			disabled: t3,
-			invalid: t4,
-			dirty,
-			touched,
-			...t5,
-			...props
-		});
-		$[22] = dirty;
-		$[23] = field.disabled;
-		$[24] = field.invalid;
-		$[25] = props;
-		$[26] = t5;
-		$[27] = touched;
-		$[28] = t6;
-	} else t6 = $[28];
-	return t6;
-};
-/**
-* The legend that names a {@link FieldsetRoot}.
-*
-* @example
-* <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
-*/
-var FieldsetLegend = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(Fieldset.Legend, {});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx(Field.Label, {
-			nativeLabel: false,
-			render: t0,
-			...props
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-export { FieldsetLegend, FieldsetRoot };