@openzeppelin/ui-components 3.1.0 → 3.2.0

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "3.1.0";
+const VERSION = "3.2.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -3057,6 +3057,10 @@ TextAreaField.displayName = "TextAreaField";
 //#region src/components/fields/AddressListField/labels.ts
 /** Default English labels for {@link AddressListField}. */
 const DEFAULT_ADDRESS_LIST_FIELD_LABELS = {
+	addSingleAddress: "Add",
+	invalidSingleAddress: "Enter a valid address",
+	enableBulkEntry: "Bulk paste",
+	enableSingleEntry: "Single entry",
 	addAddresses: "Add addresses",
 	addAddressCount: (count) => `Add ${count} address${count === 1 ? "" : "es"}`,
 	invalidPrefix: "Invalid:",
@@ -3109,41 +3113,9 @@ function formatAddressBulkSummary(classification, addedCount, labels) {
 }
 
 //#endregion
-//#region src/components/fields/AddressListField/AddressListField.tsx
-/**
-* Multi-address list field for bulk paste workflows.
-*
-* Architecture flow:
-* 1. App or wizard steps hold the committed address list in local or form state
-* 2. AddressListField renders a draft textarea plus the committed list rows
-* 3. Parsing and classification run via `@openzeppelin/ui-utils` helpers
-* 4. Optional {@link AddressingCapability} validates candidates before add
-* 5. {@link AddressDisplay} renders each committed row with copy and explorer links
-*
-* The component includes:
-* - Delimiter-aware bulk paste (newlines, commas, semicolons)
-* - Live preview of accepted, invalid, duplicate, and already-listed candidates
-* - Optional `maxItems` cap with disabled input at the limit
-* - Removable list rows with accessible remove buttons
-* - Caller-controlled copy for placeholders and format hints
-* - Optional `labels` overrides for built-in button and status strings
-*
-* @example
-* ```tsx
-* const [addresses, setAddresses] = useState<string[]>([]);
-*
-* <AddressListField
-*   value={addresses}
-*   onChange={setAddresses}
-*   placeholder="Paste addresses (one per line or comma-separated)"
-*   formatHint="Each entry is validated before it is added."
-*   addressing={capabilities}
-* />
-* ```
-*/
-function AddressListField({ value, onChange, placeholder, formatHint, addressing, getExplorerUrl, label, helperText, maxItems, disabled = false, maxInvalidPreview = 3, className, labels: labelOverrides }) {
-	const fieldId = (0, react.useId)();
-	const labels = (0, react.useMemo)(() => resolveAddressListFieldLabels(labelOverrides), [labelOverrides]);
+//#region src/components/fields/AddressListField/AddressListBulkEntry.tsx
+/** Bulk paste entry — info callout, textarea, and add action in a compact stack. */
+function AddressListBulkEntry({ fieldId, value, onAdd, placeholder, formatHint, addressing, maxItems, disabled = false, maxInvalidPreview = 3, labels, modeToggle }) {
 	const atLimit = maxItems != null && value.length >= maxItems;
 	const inputDisabled = disabled || atLimit;
 	const [feedback, setFeedback] = (0, react.useState)(null);
@@ -3162,97 +3134,270 @@ function AddressListField({ value, onChange, placeholder, formatHint, addressing
 		maxItems
 	]);
 	const previewSummary = (0, react.useMemo)(() => buildAddressListPreviewSummary(classification, labels), [classification, labels]);
-	const inlineHelperText = rawInput.trim() ? previewSummary ?? void 0 : feedback ?? void 0;
+	const statusMessage = rawInput.trim() ? previewSummary ?? void 0 : feedback ?? void 0;
 	const handleAdd = (0, react.useCallback)(() => {
 		if (!classification || classification.accepted.length === 0 || atLimit) return;
-		onChange([...value, ...classification.accepted]);
+		onAdd(classification.accepted);
 		reset({ input: "" });
 		setFeedback(formatAddressBulkSummary(classification, classification.accepted.length, labels));
 	}, [
 		classification,
 		atLimit,
-		onChange,
-		value,
+		onAdd,
 		reset,
 		labels
 	]);
-	const handleRemove = (0, react.useCallback)((index) => {
-		onChange(value.filter((_, currentIndex) => currentIndex !== index));
-		setFeedback(null);
-	}, [onChange, value]);
 	const acceptedCount = classification?.accepted.length ?? 0;
 	const addButtonLabel = acceptedCount > 0 ? labels.addAddressCount(acceptedCount) : labels.addAddresses;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _openzeppelin_ui_utils.cn)("space-y-3", className),
+		className: "space-y-3",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-1",
-				children: [helperText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-muted-foreground",
-					children: helperText
-				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-muted-foreground",
+				className: "flex items-start gap-2 rounded-lg border border-border/70 bg-muted/30 px-3 py-2.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-xs leading-relaxed text-muted-foreground",
 					children: formatHint
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAreaField, {
-				id: `address-list-field-${fieldId}`,
-				name: "input",
-				label: label ?? "",
-				placeholder,
-				helperText: inlineHelperText,
-				control,
-				rows: 4,
-				validation: { required: false },
-				readOnly: inputDisabled
-			}),
-			classification && classification.invalid.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "text-xs text-destructive",
-				children: [
-					labels.invalidPrefix,
-					" ",
-					classification.invalid.slice(0, maxInvalidPreview).join(", "),
-					classification.invalid.length > maxInvalidPreview ? ` ${labels.invalidMore(classification.invalid.length - maxInvalidPreview)}` : ""
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAreaField, {
+					id: `address-list-bulk-${fieldId}`,
+					name: "input",
+					label: "",
+					placeholder,
+					helperText: statusMessage,
+					control,
+					rows: 4,
+					validation: { required: false },
+					readOnly: inputDisabled
+				})
+			}), modeToggle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-end pr-2",
+				children: modeToggle
+			}) : null] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1",
+					children: [classification && classification.invalid.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "text-xs text-destructive",
+						children: [
+							labels.invalidPrefix,
+							" ",
+							classification.invalid.slice(0, maxInvalidPreview).join(", "),
+							classification.invalid.length > maxInvalidPreview ? ` ${labels.invalidMore(classification.invalid.length - maxInvalidPreview)}` : ""
+						]
+					}) : null, atLimit && maxItems != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: labels.maxItemsReached(maxItems)
+					}) : null]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+					type: "button",
+					size: "sm",
+					className: "shrink-0",
+					disabled: inputDisabled || acceptedCount === 0,
+					onClick: () => handleAdd(),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 size-4" }), addButtonLabel]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListEntries.tsx
+/** Renders committed addresses with remove actions. Shared by single and bulk entry modes. */
+function AddressListEntries({ value, getExplorerUrl, disabled = false, labels, onRemove }) {
+	if (value.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-xs text-muted-foreground",
+			children: labels.addressesAdded(value.length)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "max-h-44 space-y-1 overflow-y-auto rounded-md border border-border/70 p-1",
+			children: value.map((address, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between rounded bg-muted p-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressDisplay, {
+					address,
+					variant: "inline",
+					truncateWhenLabeled: true,
+					showCopyButton: true,
+					explorerUrl: getExplorerUrl?.(address) ?? void 0
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					className: "size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive",
+					onClick: () => onRemove(index),
+					disabled,
+					"aria-label": labels.removeAddress(index),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-3.5" })
+				})]
+			}, `${address}-${index}`))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListSingleEntry.tsx
+/** Single-address entry — inline {@link AddressField} with an Add button (address-book aware). */
+function AddressListSingleEntry({ fieldId, value, onAdd, placeholder, addressing, maxItems, disabled = false, labels, modeToggle }) {
+	const atLimit = maxItems != null && value.length >= maxItems;
+	const inputDisabled = disabled || atLimit;
+	const { control, reset, getValues, handleSubmit } = (0, react_hook_form.useForm)({
+		defaultValues: { draft: "" },
+		mode: "onChange"
+	});
+	const trimmedDraft = ((0, react_hook_form.useWatch)({
+		control,
+		name: "draft"
+	}) ?? "").trim();
+	const validationState = (0, react.useMemo)(() => {
+		if (!trimmedDraft) return {
+			canAdd: false,
+			showInvalid: false
+		};
+		if (value.includes(trimmedDraft)) return {
+			canAdd: false,
+			showInvalid: false
+		};
+		if (atLimit) return {
+			canAdd: false,
+			showInvalid: false
+		};
+		if (addressing && !addressing.isValidAddress(trimmedDraft)) return {
+			canAdd: false,
+			showInvalid: true
+		};
+		return {
+			canAdd: true,
+			showInvalid: false
+		};
+	}, [
+		trimmedDraft,
+		value,
+		atLimit,
+		addressing
+	]);
+	const submitAdd = (0, react.useCallback)(() => {
+		if (!validationState.canAdd) return;
+		onAdd(getValues("draft").trim());
+		reset({ draft: "" });
+	}, [
+		validationState.canAdd,
+		onAdd,
+		getValues,
+		reset
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressField, {
+					id: `address-list-single-${fieldId}`,
+					name: "draft",
+					label: "",
+					placeholder,
+					helperText: validationState.showInvalid ? labels.invalidSingleAddress : void 0,
+					control,
+					addressing,
+					validation: { required: false },
+					readOnly: inputDisabled
+				}), modeToggle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "-mt-px flex justify-end pr-2",
+					children: modeToggle
+				}) : null]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 				type: "button",
-				size: "sm",
-				disabled: inputDisabled || acceptedCount === 0,
-				onClick: () => handleAdd(),
-				children: addButtonLabel
-			}),
-			atLimit && maxItems != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-xs text-muted-foreground",
-				children: labels.maxItemsReached(maxItems)
+				className: "h-10 shrink-0",
+				disabled: inputDisabled || !validationState.canAdd,
+				onClick: handleSubmit(submitAdd),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 size-4" }), labels.addSingleAddress]
+			})]
+		}), atLimit && maxItems != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-xs text-muted-foreground",
+			children: labels.maxItemsReached(maxItems)
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListField.tsx
+/**
+* Multi-address list field with single-entry default and optional bulk paste.
+*/
+function AddressListField({ value, onChange, placeholder, bulkPlaceholder, formatHint, addressing, getExplorerUrl, label, helperText, maxItems, disabled = false, maxInvalidPreview = 3, className, defaultEntryMode = "single", allowModeToggle = true, labels: labelOverrides }) {
+	const fieldId = (0, react.useId)();
+	const labels = (0, react.useMemo)(() => resolveAddressListFieldLabels(labelOverrides), [labelOverrides]);
+	const [entryMode, setEntryMode] = (0, react.useState)(defaultEntryMode);
+	const resolvedBulkPlaceholder = bulkPlaceholder ?? placeholder;
+	const handleRemove = (0, react.useCallback)((index) => {
+		onChange(value.filter((_, currentIndex) => currentIndex !== index));
+	}, [onChange, value]);
+	const handleAddSingle = (0, react.useCallback)((address) => {
+		onChange([...value, address]);
+	}, [onChange, value]);
+	const handleAddBulk = (0, react.useCallback)((addresses) => {
+		onChange([...value, ...addresses]);
+	}, [onChange, value]);
+	const switchToBulk = (0, react.useCallback)(() => setEntryMode("bulk"), []);
+	const switchToSingle = (0, react.useCallback)(() => setEntryMode("single"), []);
+	const toggleClassName = "inline-flex items-center gap-1 rounded-b-md rounded-t-none border border-t-0 border-input bg-muted/40 px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+	const modeToggle = !allowModeToggle ? void 0 : entryMode === "single" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: switchToBulk,
+		className: toggleClassName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ClipboardPaste, { className: "size-3" }), labels.enableBulkEntry]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: switchToSingle,
+		className: toggleClassName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PencilLine, { className: "size-3" }), labels.enableSingleEntry]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("space-y-3", className),
+		children: [
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+				className: "text-sm font-medium leading-none",
+				children: label
+			}) : null,
+			helperText && entryMode === "single" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm leading-relaxed text-muted-foreground",
+				children: helperText
+			}) : null,
+			entryMode === "single" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressListSingleEntry, {
+				fieldId,
+				value,
+				onAdd: handleAddSingle,
+				placeholder,
+				addressing,
+				maxItems,
+				disabled,
+				labels,
+				modeToggle
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressListBulkEntry, {
+				fieldId,
+				value,
+				onAdd: handleAddBulk,
+				placeholder: resolvedBulkPlaceholder,
+				formatHint,
+				addressing,
+				maxItems,
+				disabled,
+				maxInvalidPreview,
+				labels,
+				modeToggle
 			}),
-			value.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-xs text-muted-foreground",
-					children: labels.addressesAdded(value.length)
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "max-h-44 space-y-1 overflow-y-auto rounded-md border border-border/70 p-1",
-					children: value.map((address, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center justify-between rounded bg-muted p-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressDisplay, {
-							address,
-							variant: "inline",
-							truncateWhenLabeled: true,
-							showCopyButton: true,
-							explorerUrl: getExplorerUrl?.(address) ?? void 0
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive",
-							onClick: () => handleRemove(index),
-							disabled,
-							"aria-label": labels.removeAddress(index),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-3.5" })
-						})]
-					}, `${address}-${index}`))
-				})]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressListEntries, {
+				value,
+				getExplorerUrl,
+				disabled,
+				labels,
+				onRemove: handleRemove
 			})
 		]
 	});