@openzeppelin/ui-components 1.7.0 → 2.0.0

package/dist/index.mjs

@@ -26,7 +26,7 @@ import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
 
 //#region src/version.ts
-const VERSION = "1.7.0";
+const VERSION = "2.0.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -2662,13 +2662,13 @@ const MAX_SUGGESTIONS = 5;
 * 2. TransactionForm renders the overall form structure with React Hook Form
 * 3. DynamicFormField selects the appropriate field component (like AddressField) based on field type
 * 4. BaseField provides consistent layout and hook form integration
-* 5. This component handles blockchain address-specific rendering and validation using the passed adapter
+* 5. This component handles blockchain address-specific rendering and validation using the passed addressing capability
 *
 * The component includes:
 * - Integration with React Hook Form
-* - Blockchain address validation through adapter-provided custom validation
+* - Blockchain address validation through the provided addressing capability
 * - Automatic error handling and reporting
-* - Chain-agnostic design (validation handled by adapters)
+* - Chain-agnostic design (validation handled by capabilities)
 * - Full accessibility support with ARIA attributes
 * - Keyboard navigation
 *
@@ -2683,7 +2683,7 @@ const MAX_SUGGESTIONS = 5;
 * The suggestion dropdown includes built-in debouncing, keyboard navigation (Arrow keys,
 * Enter, Escape), click-outside dismissal, and ARIA listbox semantics.
 */
-function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, adapter, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
+function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, addressing, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -2766,8 +2766,8 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 				if (value === void 0 || value === null || value === "") return validation?.required ? "This field is required" : true;
 				const standardValidationResult = validateField(value, validation);
 				if (standardValidationResult !== true) return standardValidationResult;
-				if (adapter && typeof value === "string") {
-					if (!adapter.isValidAddress(value)) return "Invalid address format for the selected chain";
+				if (addressing && typeof value === "string") {
+					if (!addressing.isValidAddress(value)) return "Invalid address format for the selected chain";
 				}
 				return true;
 			} },
@@ -3323,7 +3323,7 @@ ArrayField.displayName = "ArrayField";
 * The component combines the functionality of ArrayField and ObjectField to handle
 * complex nested data structures commonly found in blockchain contracts.
 */
-function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, adapter, contractSchema }) {
+function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, typeMapping, contractSchema }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -3440,8 +3440,8 @@ function ArrayObjectField({ id, label, helperText, control, name, width = "full"
 								}), !isCollapsed && /* @__PURE__ */ jsx("div", {
 									className: "space-y-4 mt-4",
 									children: components.map((component) => {
-										if (!adapter) throw new Error(`ArrayObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
-										const generatedField = adapter.generateDefaultField(component, contractSchema);
+										if (!typeMapping) throw new Error(`ArrayObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
+										const generatedField = typeMapping.generateDefaultField(component, contractSchema);
 										const propertyField = {
 											...generatedField,
 											id: `${id}-${index}-${component.name}`,
@@ -5154,7 +5154,7 @@ NumberField.displayName = "NumberField";
 * The component reuses existing field components for individual properties,
 * maintaining consistency across the form system while supporting complex nested structures.
 */
-function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, adapter, contractSchema }) {
+function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, typeMapping, contractSchema }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -5181,8 +5181,8 @@ function ObjectField({ id, label, helperText, control, name, width = "full", val
 						className: "text-muted-foreground text-sm",
 						children: "No properties defined for this object"
 					}) : components.map((component) => {
-						if (!adapter) throw new Error(`ObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
-						const generatedField = adapter.generateDefaultField(component, contractSchema);
+						if (!typeMapping) throw new Error(`ObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
+						const generatedField = typeMapping.generateDefaultField(component, contractSchema);
 						const propertyField = {
 							...generatedField,
 							id: `${id}-${component.name}`,
@@ -6204,19 +6204,19 @@ function useNetworkErrors() {
 	return context;
 }
 /**
-* Hook for reporting network errors for a specific adapter
+* Hook for reporting network errors for a specific runtime-bound capability
 */
-function useNetworkErrorReporter(adapter) {
+function useNetworkErrorReporter(capability) {
 	const { reportNetworkError } = useNetworkErrors();
 	return {
 		reportRpcError: useCallback((message) => {
-			if (!adapter) return;
-			reportNetworkError("rpc", adapter.networkConfig.id, adapter.networkConfig.name, message);
-		}, [adapter, reportNetworkError]),
+			if (!capability) return;
+			reportNetworkError("rpc", capability.networkConfig.id, capability.networkConfig.name, message);
+		}, [capability, reportNetworkError]),
 		reportExplorerError: useCallback((message) => {
-			if (!adapter) return;
-			reportNetworkError("explorer", adapter.networkConfig.id, adapter.networkConfig.name, message);
-		}, [adapter, reportNetworkError])
+			if (!capability) return;
+			reportNetworkError("explorer", capability.networkConfig.id, capability.networkConfig.name, message);
+		}, [capability, reportNetworkError])
 	};
 }
 
@@ -6225,15 +6225,15 @@ function useNetworkErrorReporter(adapter) {
 /**
 * Creates an adapter proxy that intercepts and reports network errors
 */
-function useNetworkErrorAwareAdapter(adapter) {
+function useNetworkErrorAwareAdapter(capability) {
 	const { reportNetworkError } = useNetworkErrors();
-	const wrappedAdapterRef = useRef(null);
+	const wrappedCapabilityRef = useRef(null);
 	useEffect(() => {
-		if (!adapter) {
-			wrappedAdapterRef.current = null;
+		if (!capability) {
+			wrappedCapabilityRef.current = null;
 			return;
 		}
-		wrappedAdapterRef.current = new Proxy(adapter, { get(target, prop, receiver) {
+		wrappedCapabilityRef.current = new Proxy(capability, { get(target, prop, receiver) {
 			const value = Reflect.get(target, prop, receiver);
 			if (typeof value === "function" && (prop === "queryViewFunction" || prop === "loadContract")) return async (...args) => {
 				try {
@@ -6247,8 +6247,8 @@ function useNetworkErrorAwareAdapter(adapter) {
 			};
 			return value;
 		} });
-	}, [adapter, reportNetworkError]);
-	return wrappedAdapterRef.current;
+	}, [capability, reportNetworkError]);
+	return wrappedCapabilityRef.current;
 }
 
 //#endregion