@panneau/forms 4.1.1 → 5.0.0-alpha.0

package/dist/Form.css

@@ -0,0 +1,151 @@
+.panneau-form-SbGXMC {
+    container: panneau-form / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-6);
+    min-width: 0;
+}
+
+.panneau-layout-ZLMO4i {
+    display: grid;
+    gap: var(--panneau-space-6);
+    min-width: 0;
+}
+
+@container panneau-form (min-width: 56rem) {
+    .panneau-withSidebar-EZX3tW {
+        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+        align-items: start;
+    }
+}
+
+.panneau-stack-PjhKm6 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-5);
+    min-width: 0;
+}
+
+.panneau-row-Yi7-zn {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: var(--panneau-space-5) var(--panneau-space-4);
+    min-width: 0;
+}
+
+.panneau-cell--1VhEt {
+    grid-column: span var(--panneau-span, 12);
+    min-width: 0;
+}
+
+/* Narrow containers (phones, side panels): every cell takes the full width. */
+@container panneau-form (max-width: 36rem) {
+    .panneau-cell--1VhEt {
+        grid-column: 1 / -1;
+    }
+}
+
+.panneau-section-TsDtP1 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-4);
+    min-width: 0;
+    padding: var(--panneau-space-4) var(--panneau-space-5);
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+}
+
+@container panneau-form (max-width: 36rem) {
+    .panneau-section-TsDtP1 {
+        padding: var(--panneau-space-3);
+    }
+}
+
+.panneau-sectionHeader-ewRbEd {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-sectionTitle-13j1RU {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    font-size: var(--panneau-font-size-lg);
+    font-weight: var(--panneau-font-weight-bold);
+    line-height: var(--panneau-line-height-tight);
+}
+
+.panneau-sectionDescription-wMAdQR,
+.panneau-text-8QehWk {
+    font-size: var(--panneau-font-size-md);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-sidebar-sKhl3G {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-5);
+    min-width: 0;
+}
+
+.panneau-field-4Wbt9T {
+    min-width: 0;
+    scroll-margin: var(--panneau-space-10);
+}
+
+.panneau-footer-PD5XO8 {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--panneau-space-2) var(--panneau-space-3);
+    padding: var(--panneau-space-3) 0;
+    background-color: var(--panneau-color-bg);
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-dirty-pKx-lf {
+    margin-inline-end: auto;
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-summary-mM2QXV:focus {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-summaryList-BPalHL {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    margin: 0;
+    padding-inline-start: var(--panneau-space-5);
+}
+
+.panneau-summaryLink-wCCmoV {
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    text-decoration: underline;
+    cursor: pointer;
+    background: none;
+    border: 0;
+}
+
+.panneau-summaryLink-wCCmoV:focus-visible {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+@container panneau-form (max-width: 36rem) {
+    .panneau-footer-PD5XO8 > :not(.panneau-dirty-pKx-lf) {
+        flex: 1 1 auto;
+    }
+}

package/dist/Form.d.ts

@@ -0,0 +1,20 @@
+import { type FormOptions } from '@panneau/core';
+import type { Field, LayoutNode } from '@panneau/protocol';
+import { type FormViewProps } from './FormView';
+export interface FormProps extends Omit<FormViewProps, 'form' | 'fields' | 'layout'>, Pick<FormOptions, 'values' | 'version' | 'mode' | 'store' | 'formatError' | 'onSubmit'> {
+    /** The fields of the form. Without a layout, they are rendered in order. */
+    fields: readonly Field[];
+    /** The layout tree. Fields that no node references are added at the end. */
+    layout?: readonly LayoutNode[];
+}
+/**
+ * A form from a list of fields and an `onSubmit`, with or without a definition. It creates its
+ * state with `useForm()` of `@panneau/core`: values, validation with the portable rules, server
+ * errors (`422`) and version conflicts (`412`) from what `onSubmit` throws. Rule messages are
+ * translated with react-intl.
+ *
+ * Initial values and the version are read once: give the form a new `key` to start from another
+ * item, or use `useForm()` and `FormView`.
+ */
+export declare function Form({ fields, layout, values, version, mode, store, formatError, onSubmit, locales, ...props }: FormProps): import("react").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAsC,MAAM,eAAe,CAAC;AACrF,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAG1D,MAAM,WAAW,SACb,SACI,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC,EACjD,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC;IAC3F,4EAA4E;IAC5E,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CAClC;AAED;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,EACjB,MAAM,EACN,MAAW,EACX,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACX,EAAE,SAAS,+BAwBX"}

package/dist/Form.js

@@ -0,0 +1,41 @@
+import { FormView } from "./FormView.js";
+import { useFormatRuleFailure } from "./formatError.js";
+import { resolveFields, useForm, usePanneau } from "@panneau/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Form.tsx
+/**
+* A form from a list of fields and an `onSubmit`, with or without a definition. It creates its
+* state with `useForm()` of `@panneau/core`: values, validation with the portable rules, server
+* errors (`422`) and version conflicts (`412`) from what `onSubmit` throws. Rule messages are
+* translated with react-intl.
+*
+* Initial values and the version are read once: give the form a new `key` to start from another
+* item, or use `useForm()` and `FormView`.
+*/
+function Form({ fields, layout = [], values, version, mode, store, formatError, onSubmit, locales, ...props }) {
+	const { definition } = usePanneau();
+	const resolved = resolveFields(fields, layout, mode !== void 0 ? { mode } : {});
+	const formatRuleFailure = useFormatRuleFailure(resolved.fields);
+	const formLocales = locales ?? definition?.locales ?? [];
+	const { form } = useForm({
+		fields: resolved.fields,
+		locales: [...formLocales],
+		formatError: formatError ?? formatRuleFailure,
+		...values !== void 0 ? { values } : {},
+		...version !== void 0 ? { version } : {},
+		...mode !== void 0 ? { mode } : {},
+		...store !== void 0 ? { store } : {},
+		...onSubmit !== void 0 ? { onSubmit } : {}
+	});
+	return /* @__PURE__ */ jsx(FormView, {
+		...props,
+		form,
+		fields: resolved.fields,
+		layout: resolved.layout,
+		locales: formLocales
+	});
+}
+//#endregion
+export { Form };
+
+//# sourceMappingURL=Form.js.map

package/dist/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":[],"sources":["../src/Form.tsx"],"sourcesContent":["import { type FormOptions, resolveFields, useForm, usePanneau } from '@panneau/core';\nimport type { Field, LayoutNode } from '@panneau/protocol';\n\nimport { FormView, type FormViewProps } from './FormView';\nimport { useFormatRuleFailure } from './formatError';\n\nexport interface FormProps\n    extends\n        Omit<FormViewProps, 'form' | 'fields' | 'layout'>,\n        Pick<FormOptions, 'values' | 'version' | 'mode' | 'store' | 'formatError' | 'onSubmit'> {\n    /** The fields of the form. Without a layout, they are rendered in order. */\n    fields: readonly Field[];\n    /** The layout tree. Fields that no node references are added at the end. */\n    layout?: readonly LayoutNode[];\n}\n\n/**\n * A form from a list of fields and an `onSubmit`, with or without a definition. It creates its\n * state with `useForm()` of `@panneau/core`: values, validation with the portable rules, server\n * errors (`422`) and version conflicts (`412`) from what `onSubmit` throws. Rule messages are\n * translated with react-intl.\n *\n * Initial values and the version are read once: give the form a new `key` to start from another\n * item, or use `useForm()` and `FormView`.\n */\nexport function Form({\n    fields,\n    layout = [],\n    values,\n    version,\n    mode,\n    store,\n    formatError,\n    onSubmit,\n    locales,\n    ...props\n}: FormProps) {\n    const { definition } = usePanneau();\n    const resolved = resolveFields(fields, layout, mode !== undefined ? { mode } : {});\n    const formatRuleFailure = useFormatRuleFailure(resolved.fields);\n    const formLocales = locales ?? definition?.locales ?? [];\n    const { form } = useForm({\n        fields: resolved.fields,\n        locales: [...formLocales],\n        formatError: formatError ?? formatRuleFailure,\n        ...(values !== undefined ? { values } : {}),\n        ...(version !== undefined ? { version } : {}),\n        ...(mode !== undefined ? { mode } : {}),\n        ...(store !== undefined ? { store } : {}),\n        ...(onSubmit !== undefined ? { onSubmit } : {}),\n    });\n    return (\n        <FormView\n            {...props}\n            form={form}\n            fields={resolved.fields}\n            layout={resolved.layout}\n            locales={formLocales}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;AAyBA,SAAgB,KAAK,EACjB,QACA,SAAS,CAAA,GACT,QACA,SACA,MACA,OACA,aACA,UACA,SACA,GAAG,SACO;CACV,MAAM,EAAE,eAAe,WAAW;CAClC,MAAM,WAAW,cAAc,QAAQ,QAAQ,SAAS,KAAA,IAAY,EAAE,KAAK,IAAI,CAAC,CAAC;CACjF,MAAM,oBAAoB,qBAAqB,SAAS,MAAM;CAC9D,MAAM,cAAc,WAAW,YAAY,WAAW,CAAA;CACtD,MAAM,EAAE,SAAS,QAAQ;EACrB,QAAQ,SAAS;EACjB,SAAS,CAAC,GAAG,WAAW;EACxB,aAAa,eAAe;EAC5B,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;EACzC,GAAI,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;EAC3C,GAAI,SAAS,KAAA,IAAY,EAAE,KAAK,IAAI,CAAC;EACrC,GAAI,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;EACvC,GAAI,aAAa,KAAA,IAAY,EAAE,SAAS,IAAI,CAAC;CACjD,CAAC;CACD,OACI,oBAAC,UAAD;EACI,GAAI;EACE;EACN,QAAQ,SAAS;EACjB,QAAQ,SAAS;EACjB,SAAS;CAAY,CAAA;AAGjC"}

package/dist/Form.module.js

@@ -0,0 +1,44 @@
+import "./Form.css";
+//#region src/Form.module.css
+var form = "panneau-form-SbGXMC";
+var layout = "panneau-layout-ZLMO4i";
+var withSidebar = "panneau-withSidebar-EZX3tW";
+var stack = "panneau-stack-PjhKm6";
+var row = "panneau-row-Yi7-zn";
+var cell = "panneau-cell--1VhEt";
+var section = "panneau-section-TsDtP1";
+var sectionHeader = "panneau-sectionHeader-ewRbEd";
+var sectionTitle = "panneau-sectionTitle-13j1RU";
+var sectionDescription = "panneau-sectionDescription-wMAdQR";
+var text = "panneau-text-8QehWk";
+var sidebar = "panneau-sidebar-sKhl3G";
+var field = "panneau-field-4Wbt9T";
+var footer = "panneau-footer-PD5XO8";
+var dirty = "panneau-dirty-pKx-lf";
+var summary = "panneau-summary-mM2QXV";
+var summaryList = "panneau-summaryList-BPalHL";
+var summaryLink = "panneau-summaryLink-wCCmoV";
+var Form_module_default = {
+	form,
+	layout,
+	withSidebar,
+	stack,
+	row,
+	cell,
+	section,
+	sectionHeader,
+	sectionTitle,
+	sectionDescription,
+	text,
+	sidebar,
+	field,
+	footer,
+	dirty,
+	summary,
+	summaryList,
+	summaryLink
+};
+//#endregion
+export { cell, Form_module_default as default, dirty, field, footer, form, layout, row, section, sectionDescription, sectionHeader, sectionTitle, sidebar, stack, summary, summaryLink, summaryList, text, withSidebar };
+
+//# sourceMappingURL=Form.module.js.map

package/dist/Form.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.module.js","names":[],"sources":["../src/Form.module.css"],"sourcesContent":[".form {\n    container: panneau-form / inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-6);\n    min-width: 0;\n}\n\n.layout {\n    display: grid;\n    gap: var(--panneau-space-6);\n    min-width: 0;\n}\n\n@container panneau-form (min-width: 56rem) {\n    .withSidebar {\n        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);\n        align-items: start;\n    }\n}\n\n.stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-5);\n    min-width: 0;\n}\n\n.row {\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    gap: var(--panneau-space-5) var(--panneau-space-4);\n    min-width: 0;\n}\n\n.cell {\n    grid-column: span var(--panneau-span, 12);\n    min-width: 0;\n}\n\n/* Narrow containers (phones, side panels): every cell takes the full width. */\n@container panneau-form (max-width: 36rem) {\n    .cell {\n        grid-column: 1 / -1;\n    }\n}\n\n.section {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    min-width: 0;\n    padding: var(--panneau-space-4) var(--panneau-space-5);\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n}\n\n@container panneau-form (max-width: 36rem) {\n    .section {\n        padding: var(--panneau-space-3);\n    }\n}\n\n.sectionHeader {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.sectionTitle {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-bold);\n    line-height: var(--panneau-line-height-tight);\n}\n\n.sectionDescription,\n.text {\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text-muted);\n}\n\n.sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-5);\n    min-width: 0;\n}\n\n.field {\n    min-width: 0;\n    scroll-margin: var(--panneau-space-10);\n}\n\n.footer {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--panneau-space-2) var(--panneau-space-3);\n    padding: var(--panneau-space-3) 0;\n    background-color: var(--panneau-color-bg);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.dirty {\n    margin-inline-end: auto;\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.summary:focus {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.summaryList {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    margin: 0;\n    padding-inline-start: var(--panneau-space-5);\n}\n\n.summaryLink {\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    text-align: start;\n    text-decoration: underline;\n    cursor: pointer;\n    background: none;\n    border: 0;\n}\n\n.summaryLink:focus-visible {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n@container panneau-form (max-width: 36rem) {\n    .footer > :not(.dirty) {\n        flex: 1 1 auto;\n    }\n}\n"],"mappings":""}

package/dist/FormBinding.d.ts

@@ -0,0 +1,8 @@
+import type { FieldBindingProps } from '@panneau/fields';
+/**
+ * Binds a field to the form by path: value, change, blur and errors. It hides fields whose
+ * `visibleWhen` is false, marks the field's element with its path for the error summary, and
+ * keeps a field that throws from breaking the form.
+ */
+export declare function FormBinding({ field, path, parentPath, render }: FieldBindingProps): import("react").JSX.Element | null;
+//# sourceMappingURL=FormBinding.d.ts.map

package/dist/FormBinding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBinding.d.ts","sourceRoot":"","sources":["../src/FormBinding.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAazD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,iBAAiB,sCAmCjF"}

package/dist/FormBinding.js

@@ -0,0 +1,122 @@
+import { messages } from "./messages.js";
+import Form_module_default from "./Form.module.js";
+import { FieldErrorBoundary } from "./FieldErrorBoundary.js";
+import { useFormContext, useFormState } from "./context.js";
+import { c } from "react/compiler-runtime";
+import { selectErrors, selectValue, selectVisible } from "@panneau/core";
+import { Alert, Button, usePanneauIntl } from "@panneau/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormBinding.tsx
+/** Fields that show the errors of their nested fields themselves. */
+function rendersNestedFields(field) {
+	return field.localized === true || field.type === "group" || field.type === "repeater";
+}
+/**
+* Binds a field to the form by path: value, change, blur and errors. It hides fields whose
+* `visibleWhen` is false, marks the field's element with its path for the error summary, and
+* keeps a field that throws from breaking the form.
+*/
+function FormBinding(t0) {
+	const $ = c(29);
+	const { field, path, parentPath, render } = t0;
+	const form = useFormContext();
+	const intl = usePanneauIntl();
+	const state = useFormState(form);
+	if (!selectVisible(state, field, parentPath)) return null;
+	let T0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== field || $[1] !== form || $[2] !== intl || $[3] !== path || $[4] !== render || $[5] !== state) {
+		let t5;
+		if ($[11] !== field) {
+			t5 = rendersNestedFields(field);
+			$[11] = field;
+			$[12] = t5;
+		} else t5 = $[12];
+		const errors = selectErrors(state, path, { nested: !t5 });
+		t3 = Form_module_default.field;
+		t4 = path;
+		T0 = FieldErrorBoundary;
+		if ($[13] !== field.label || $[14] !== field.name || $[15] !== intl) {
+			t1 = (retry) => /* @__PURE__ */ jsx(Alert, {
+				tone: "danger",
+				actions: /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onPress: retry,
+					children: intl.formatMessage(messages.retry)
+				}),
+				children: intl.formatMessage(messages.fieldCrashed, { field: field.label ?? field.name })
+			});
+			$[13] = field.label;
+			$[14] = field.name;
+			$[15] = intl;
+			$[16] = t1;
+		} else t1 = $[16];
+		let t6;
+		let t7;
+		if ($[17] !== form || $[18] !== path) {
+			t6 = (value) => form.setValue(path, value);
+			t7 = () => form.blur(path);
+			$[17] = form;
+			$[18] = path;
+			$[19] = t6;
+			$[20] = t7;
+		} else {
+			t6 = $[19];
+			t7 = $[20];
+		}
+		t2 = render({
+			value: selectValue(state, path),
+			onChange: t6,
+			onBlur: t7,
+			errors
+		});
+		$[0] = field;
+		$[1] = form;
+		$[2] = intl;
+		$[3] = path;
+		$[4] = render;
+		$[5] = state;
+		$[6] = T0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		T0 = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+	}
+	let t5;
+	if ($[21] !== T0 || $[22] !== t1 || $[23] !== t2) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			fallback: t1,
+			children: t2
+		});
+		$[21] = T0;
+		$[22] = t1;
+		$[23] = t2;
+		$[24] = t5;
+	} else t5 = $[24];
+	let t6;
+	if ($[25] !== t3 || $[26] !== t4 || $[27] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			"data-panneau-path": t4,
+			children: t5
+		});
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t5;
+		$[28] = t6;
+	} else t6 = $[28];
+	return t6;
+}
+//#endregion
+export { FormBinding };
+
+//# sourceMappingURL=FormBinding.js.map

package/dist/FormBinding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBinding.js","names":["path","retry","_c","styles"],"sources":["../src/FormBinding.tsx"],"sourcesContent":["import { selectErrors, selectValue, selectVisible } from '@panneau/core';\nimport type { FieldBindingProps } from '@panneau/fields';\nimport { Alert, Button, usePanneauIntl } from '@panneau/ui';\n\nimport { FieldErrorBoundary } from './FieldErrorBoundary';\nimport styles from './Form.module.css';\nimport { useFormContext, useFormState } from './context';\nimport { messages } from './messages';\n\n/** Fields that show the errors of their nested fields themselves. */\nfunction rendersNestedFields(field: FieldBindingProps['field']): boolean {\n    return field.localized === true || field.type === 'group' || field.type === 'repeater';\n}\n\n/**\n * Binds a field to the form by path: value, change, blur and errors. It hides fields whose\n * `visibleWhen` is false, marks the field's element with its path for the error summary, and\n * keeps a field that throws from breaking the form.\n */\nexport function FormBinding({ field, path, parentPath, render }: FieldBindingProps) {\n    const form = useFormContext();\n    const intl = usePanneauIntl();\n    const state = useFormState(form);\n    if (!selectVisible(state, field, parentPath)) {\n        return null;\n    }\n    const errors = selectErrors(state, path, { nested: !rendersNestedFields(field) });\n    return (\n        <div className={styles.field} data-panneau-path={path}>\n            <FieldErrorBoundary\n                fallback={(retry) => (\n                    <Alert\n                        tone=\"danger\"\n                        actions={\n                            <Button size=\"sm\" onPress={retry}>\n                                {intl.formatMessage(messages.retry)}\n                            </Button>\n                        }\n                    >\n                        {intl.formatMessage(messages.fieldCrashed, {\n                            field: field.label ?? field.name,\n                        })}\n                    </Alert>\n                )}\n            >\n                {render({\n                    value: selectValue(state, path),\n                    onChange: (value) => form.setValue(path, value),\n                    onBlur: () => form.blur(path),\n                    errors,\n                })}\n            </FieldErrorBoundary>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAS,oBAAoB,OAA4C;CACrE,OAAO,MAAM,cAAc,QAAQ,MAAM,SAAS,WAAW,MAAM,SAAS;AAChF;;;;;;AAOA,SAAO,YAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAqB,MAAA,EAAA,OAAA,MAAA,YAAA,WAAA;CACxB,MAAA,OAAa,eAAe;CAC5B,MAAA,OAAa,eAAe;CAC5B,MAAA,QAAc,aAAa,IAAI;CAC/B,IAAI,CAAC,cAAc,OAAO,OAAO,UAAU,GAAC,OACjC;CACV,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,QAAA,EAAA,OAAA,QAAA,EAAA,OAAA,QAAA,EAAA,OAAA,UAAA,EAAA,OAAA,OAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,OAAA;GACmD,KAAA,oBAAoB,KAAK;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAA9E,MAAA,SAAe,aAAa,OAAO,MAAM,EAAA,QAAU,CAAC,GAA2B,CAAC;EAE5D,KAAAC,oBAAM;EAA2BH,KAAA;EAC5C,KAAA;EAAkB,IAAA,EAAA,QAAA,MAAA,SAAA,EAAA,QAAA,MAAA,QAAA,EAAA,QAAA,MAAA;GACL,MAAA,UACN,oBAAC,OAAD;IACS,MAAA;IAED,SAAA,oBAAC,QAAD;KAAa,MAAA;KAAcC,SAAA;KACtB,UAAA,KAAI,cAAe,SAAQ,KAAM;IAD/B,CAAA;IAKV,UAAA,KAAI,cAAe,SAAQ,cAAe,EAAA,OAChC,MAAK,SAAU,MAAK,KAC/B,CAAC;GAVC,CAAA;GAYT,EAAA,MAAA,MAAA;GAAA,EAAA,MAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,QAAA,EAAA,QAAA,MAAA;GAIa,MAAA,UAAW,KAAI,SAAU,MAAM,KAAK;GACtC,WAAM,KAAI,KAAM,IAAI;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA;GAAA,KAAA,EAAA;GAAA,KAAA,EAAA;EAAA;EAHhC,KAAA,OAAO;GAAA,OACG,YAAY,OAAO,IAAI;GAAC,UACrB;GAAqC,QACvC;GAAqB;EAEjC,CAAC;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EArBN,KAAA,oBAAC,IAAD;GACc,UAAA;GAeT,UAAA;EAhBc,CAAA;EAsBE,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAvBzB,KAAA,oBAAA,OAAA;GAAgB,WAAA;GAAiCD,qBAAAA;GAC7C,UAAA;EAuBE,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAxBN;AAwBM"}

package/dist/FormView.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type Form } from '@panneau/core';
+import { type FieldEntry, type RelationSource } from '@panneau/fields';
+import type { Field, LayoutNode } from '@panneau/protocol';
+export interface FormViewProps {
+    /** The form state, from `useForm()` or `createForm()` of `@panneau/core`. */
+    form: Form;
+    /** The fields of the form. */
+    fields: readonly Field[];
+    /** The layout tree. Fields that no node references are added at the end. */
+    layout?: readonly LayoutNode[];
+    /** Locales of localized fields. Defaults to the definition's, from `PanneauProvider`. */
+    locales?: readonly string[];
+    /** Where relation fields search. Defaults to the one of a parent `FieldsProvider`. */
+    relationSource?: RelationSource | null;
+    /** Field entries by type, over the built-in ones and those of the plugins. */
+    components?: Readonly<Record<string, FieldEntry>>;
+    /** Label of the submit button. Defaults to "Save". `null` hides the button. */
+    submitLabel?: ReactNode;
+    /** Other buttons, next to the submit button. */
+    actions?: ReactNode;
+    /** Called after a successful submit, with what `onSubmit` returned. */
+    onSubmitted?: (result: unknown) => void;
+    /**
+     * Called by "Load the current version" in the conflict dialog when the backend didn't send the
+     * current item: fetch it, and `form.reset()` with it.
+     */
+    onReload?: () => void;
+    /** Asks for confirmation before the page is left with unsaved changes. Defaults to true. */
+    guardUnsavedChanges?: boolean;
+    /** Shows a toast after a successful submit. Defaults to true. */
+    showSavedToast?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    className?: string;
+    layoutClassName?: string;
+    sidebarClassName?: string;
+    footerClassName?: string;
+    summaryClassName?: string;
+}
+/**
+ * Renders a form: its fields in their layout, bound to the form state of `@panneau/core`, with
+ * an error summary, a scroll to the first error, error counts on tabs and sections, a guard for
+ * unsaved changes and the dialog of version conflicts. Saving is the job of the form's
+ * `onSubmit`.
+ */
+export declare function FormView({ form, fields, layout, locales, relationSource, components, submitLabel, actions, onSubmitted, onReload, guardUnsavedChanges, showSavedToast, id, 'aria-label': ariaLabel, className, layoutClassName, sidebarClassName, footerClassName, summaryClassName, }: FormViewProps): import("react").JSX.Element;
+//# sourceMappingURL=FormView.d.ts.map

package/dist/FormView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormView.d.ts","sourceRoot":"","sources":["../src/FormView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAEzD,OAAO,EACH,KAAK,IAAI,EAQZ,MAAM,eAAe,CAAC;AACvB,OAAO,EACH,KAAK,UAAU,EAEf,KAAK,cAAc,EAEtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAa3D,MAAM,WAAW,aAAa;IAC1B,6EAA6E;IAC7E,IAAI,EAAE,IAAI,CAAC;IACX,8BAA8B;IAC9B,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,sFAAsF;IACtF,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD,+EAA+E;IAC/E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4FAA4F;IAC5F,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAqCD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,MAAW,EACX,OAAO,EACP,cAAc,EACd,UAAU,EACV,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,EACR,mBAA0B,EAC1B,cAAqB,EACrB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACnB,EAAE,aAAa,+BAgMf"}