@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/README.md +20 -2
- package/dist/index.cjs +32 -27
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +25 -22
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +19 -16
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +32 -28
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
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
|
|
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
|
|
2669
|
+
* - Blockchain address validation through the provided addressing capability
|
|
2666
2670
|
* - Automatic error handling and reporting
|
|
2667
|
-
* - Chain-agnostic design (validation handled by
|
|
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,
|
|
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 (
|
|
2766
|
-
if (!
|
|
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,
|
|
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 (!
|
|
3440
|
-
const generatedField =
|
|
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,
|
|
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 (!
|
|
5181
|
-
const generatedField =
|
|
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
|
|
6207
|
+
* Hook for reporting network errors for a specific runtime-bound capability
|
|
6204
6208
|
*/
|
|
6205
|
-
function useNetworkErrorReporter(
|
|
6209
|
+
function useNetworkErrorReporter(capability) {
|
|
6206
6210
|
const { reportNetworkError } = useNetworkErrors();
|
|
6207
6211
|
return {
|
|
6208
6212
|
reportRpcError: useCallback((message) => {
|
|
6209
|
-
if (!
|
|
6210
|
-
reportNetworkError("rpc",
|
|
6211
|
-
}, [
|
|
6213
|
+
if (!capability) return;
|
|
6214
|
+
reportNetworkError("rpc", capability.networkConfig.id, capability.networkConfig.name, message);
|
|
6215
|
+
}, [capability, reportNetworkError]),
|
|
6212
6216
|
reportExplorerError: useCallback((message) => {
|
|
6213
|
-
if (!
|
|
6214
|
-
reportNetworkError("explorer",
|
|
6215
|
-
}, [
|
|
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(
|
|
6228
|
+
function useNetworkErrorAwareAdapter(capability) {
|
|
6225
6229
|
const { reportNetworkError } = useNetworkErrors();
|
|
6226
|
-
const
|
|
6230
|
+
const wrappedCapabilityRef = useRef(null);
|
|
6227
6231
|
useEffect(() => {
|
|
6228
|
-
if (!
|
|
6229
|
-
|
|
6232
|
+
if (!capability) {
|
|
6233
|
+
wrappedCapabilityRef.current = null;
|
|
6230
6234
|
return;
|
|
6231
6235
|
}
|
|
6232
|
-
|
|
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
|
-
}, [
|
|
6247
|
-
return
|
|
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
|