@openzeppelin/ui-components 1.6.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -25,6 +25,10 @@ import { isMapEntryArray } from "@openzeppelin/ui-types";
25
25
  import { Toaster as Toaster$1, toast } from "sonner";
26
26
  import { useTheme } from "next-themes";
27
27
 
28
+ //#region src/version.ts
29
+ const VERSION = "2.0.0";
30
+
31
+ //#endregion
28
32
  //#region src/components/ui/accordion.tsx
29
33
  const accordionItemVariants = cva("", {
30
34
  variants: { variant: {
@@ -2658,13 +2662,13 @@ const MAX_SUGGESTIONS = 5;
2658
2662
  * 2. TransactionForm renders the overall form structure with React Hook Form
2659
2663
  * 3. DynamicFormField selects the appropriate field component (like AddressField) based on field type
2660
2664
  * 4. BaseField provides consistent layout and hook form integration
2661
- * 5. This component handles blockchain address-specific rendering and validation using the passed adapter
2665
+ * 5. This component handles blockchain address-specific rendering and validation using the passed addressing capability
2662
2666
  *
2663
2667
  * The component includes:
2664
2668
  * - Integration with React Hook Form
2665
- * - Blockchain address validation through adapter-provided custom validation
2669
+ * - Blockchain address validation through the provided addressing capability
2666
2670
  * - Automatic error handling and reporting
2667
- * - Chain-agnostic design (validation handled by adapters)
2671
+ * - Chain-agnostic design (validation handled by capabilities)
2668
2672
  * - Full accessibility support with ARIA attributes
2669
2673
  * - Keyboard navigation
2670
2674
  *
@@ -2679,7 +2683,7 @@ const MAX_SUGGESTIONS = 5;
2679
2683
  * The suggestion dropdown includes built-in debouncing, keyboard navigation (Arrow keys,
2680
2684
  * Enter, Escape), click-outside dismissal, and ARIA listbox semantics.
2681
2685
  */
2682
- function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, adapter, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
2686
+ function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, addressing, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
2683
2687
  const isRequired = !!validation?.required;
2684
2688
  const errorId = `${id}-error`;
2685
2689
  const descriptionId = `${id}-description`;
@@ -2762,8 +2766,8 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
2762
2766
  if (value === void 0 || value === null || value === "") return validation?.required ? "This field is required" : true;
2763
2767
  const standardValidationResult = validateField(value, validation);
2764
2768
  if (standardValidationResult !== true) return standardValidationResult;
2765
- if (adapter && typeof value === "string") {
2766
- if (!adapter.isValidAddress(value)) return "Invalid address format for the selected chain";
2769
+ if (addressing && typeof value === "string") {
2770
+ if (!addressing.isValidAddress(value)) return "Invalid address format for the selected chain";
2767
2771
  }
2768
2772
  return true;
2769
2773
  } },
@@ -3319,7 +3323,7 @@ ArrayField.displayName = "ArrayField";
3319
3323
  * The component combines the functionality of ArrayField and ObjectField to handle
3320
3324
  * complex nested data structures commonly found in blockchain contracts.
3321
3325
  */
3322
- function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, adapter, contractSchema }) {
3326
+ function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, typeMapping, contractSchema }) {
3323
3327
  const isRequired = !!validation?.required;
3324
3328
  const errorId = `${id}-error`;
3325
3329
  const descriptionId = `${id}-description`;
@@ -3436,8 +3440,8 @@ function ArrayObjectField({ id, label, helperText, control, name, width = "full"
3436
3440
  }), !isCollapsed && /* @__PURE__ */ jsx("div", {
3437
3441
  className: "space-y-4 mt-4",
3438
3442
  children: components.map((component) => {
3439
- if (!adapter) throw new Error(`ArrayObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
3440
- const generatedField = adapter.generateDefaultField(component, contractSchema);
3443
+ if (!typeMapping) throw new Error(`ArrayObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
3444
+ const generatedField = typeMapping.generateDefaultField(component, contractSchema);
3441
3445
  const propertyField = {
3442
3446
  ...generatedField,
3443
3447
  id: `${id}-${index}-${component.name}`,
@@ -5150,7 +5154,7 @@ NumberField.displayName = "NumberField";
5150
5154
  * The component reuses existing field components for individual properties,
5151
5155
  * maintaining consistency across the form system while supporting complex nested structures.
5152
5156
  */
5153
- function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, adapter, contractSchema }) {
5157
+ function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, typeMapping, contractSchema }) {
5154
5158
  const isRequired = !!validation?.required;
5155
5159
  const errorId = `${id}-error`;
5156
5160
  const descriptionId = `${id}-description`;
@@ -5177,8 +5181,8 @@ function ObjectField({ id, label, helperText, control, name, width = "full", val
5177
5181
  className: "text-muted-foreground text-sm",
5178
5182
  children: "No properties defined for this object"
5179
5183
  }) : components.map((component) => {
5180
- if (!adapter) throw new Error(`ObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
5181
- const generatedField = adapter.generateDefaultField(component, contractSchema);
5184
+ if (!typeMapping) throw new Error(`ObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
5185
+ const generatedField = typeMapping.generateDefaultField(component, contractSchema);
5182
5186
  const propertyField = {
5183
5187
  ...generatedField,
5184
5188
  id: `${id}-${component.name}`,
@@ -6200,19 +6204,19 @@ function useNetworkErrors() {
6200
6204
  return context;
6201
6205
  }
6202
6206
  /**
6203
- * Hook for reporting network errors for a specific adapter
6207
+ * Hook for reporting network errors for a specific runtime-bound capability
6204
6208
  */
6205
- function useNetworkErrorReporter(adapter) {
6209
+ function useNetworkErrorReporter(capability) {
6206
6210
  const { reportNetworkError } = useNetworkErrors();
6207
6211
  return {
6208
6212
  reportRpcError: useCallback((message) => {
6209
- if (!adapter) return;
6210
- reportNetworkError("rpc", adapter.networkConfig.id, adapter.networkConfig.name, message);
6211
- }, [adapter, reportNetworkError]),
6213
+ if (!capability) return;
6214
+ reportNetworkError("rpc", capability.networkConfig.id, capability.networkConfig.name, message);
6215
+ }, [capability, reportNetworkError]),
6212
6216
  reportExplorerError: useCallback((message) => {
6213
- if (!adapter) return;
6214
- reportNetworkError("explorer", adapter.networkConfig.id, adapter.networkConfig.name, message);
6215
- }, [adapter, reportNetworkError])
6217
+ if (!capability) return;
6218
+ reportNetworkError("explorer", capability.networkConfig.id, capability.networkConfig.name, message);
6219
+ }, [capability, reportNetworkError])
6216
6220
  };
6217
6221
  }
6218
6222
 
@@ -6221,15 +6225,15 @@ function useNetworkErrorReporter(adapter) {
6221
6225
  /**
6222
6226
  * Creates an adapter proxy that intercepts and reports network errors
6223
6227
  */
6224
- function useNetworkErrorAwareAdapter(adapter) {
6228
+ function useNetworkErrorAwareAdapter(capability) {
6225
6229
  const { reportNetworkError } = useNetworkErrors();
6226
- const wrappedAdapterRef = useRef(null);
6230
+ const wrappedCapabilityRef = useRef(null);
6227
6231
  useEffect(() => {
6228
- if (!adapter) {
6229
- wrappedAdapterRef.current = null;
6232
+ if (!capability) {
6233
+ wrappedCapabilityRef.current = null;
6230
6234
  return;
6231
6235
  }
6232
- wrappedAdapterRef.current = new Proxy(adapter, { get(target, prop, receiver) {
6236
+ wrappedCapabilityRef.current = new Proxy(capability, { get(target, prop, receiver) {
6233
6237
  const value = Reflect.get(target, prop, receiver);
6234
6238
  if (typeof value === "function" && (prop === "queryViewFunction" || prop === "loadContract")) return async (...args) => {
6235
6239
  try {
@@ -6243,8 +6247,8 @@ function useNetworkErrorAwareAdapter(adapter) {
6243
6247
  };
6244
6248
  return value;
6245
6249
  } });
6246
- }, [adapter, reportNetworkError]);
6247
- return wrappedAdapterRef.current;
6250
+ }, [capability, reportNetworkError]);
6251
+ return wrappedCapabilityRef.current;
6248
6252
  }
6249
6253
 
6250
6254
  //#endregion
@@ -6325,5 +6329,5 @@ const Toaster = ({ ...props }) => {
6325
6329
  };
6326
6330
 
6327
6331
  //#endregion
6328
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
6332
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, VERSION, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
6329
6333
  //# sourceMappingURL=index.mjs.map