@openzeppelin/ui-components 1.1.0 → 1.2.1
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/{ErrorMessage-DyO9ZWWz.js → ErrorMessage-BqOEJm84.mjs} +1 -1
- package/dist/ErrorMessage-BqOEJm84.mjs.map +1 -0
- package/dist/code-editor.cjs +4 -4
- package/dist/code-editor.d.cts +1 -2
- package/dist/code-editor.d.cts.map +1 -0
- package/dist/{code-editor-CxxSe1o8.d.ts → code-editor.d.mts} +1 -2
- package/dist/code-editor.d.mts.map +1 -0
- package/dist/{code-editor.js → code-editor.mjs} +5 -5
- package/dist/code-editor.mjs.map +1 -0
- package/dist/index.cjs +257 -195
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +47 -46
- package/dist/index.d.cts.map +1 -0
- package/dist/{index-BPV_9U9-.d.ts → index.d.mts} +56 -55
- package/dist/index.d.mts.map +1 -0
- package/dist/{index.js → index.mjs} +260 -199
- package/dist/index.mjs.map +1 -0
- package/package.json +18 -13
- package/dist/ErrorMessage-DyO9ZWWz.js.map +0 -1
- package/dist/code-editor-BKEEXGxt.d.cts +0 -122
- package/dist/code-editor-BKEEXGxt.d.cts.map +0 -1
- package/dist/code-editor-CxxSe1o8.d.ts.map +0 -1
- package/dist/code-editor.d.ts +0 -122
- package/dist/code-editor.js.map +0 -1
- package/dist/index-BPV_9U9-.d.ts.map +0 -1
- package/dist/index-CHsHzbhb.d.cts +0 -2450
- package/dist/index-CHsHzbhb.d.cts.map +0 -1
- package/dist/index.d.ts +0 -2450
- package/dist/index.js.map +0 -1
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { a as getValidationStateClasses, c as isDuplicateMapKey, d as INTEGER_HTML_PATTERN, f as INTEGER_INPUT_PATTERN, i as getErrorMessage, l as validateField, n as createValidationResult, o as handleValidationError, p as INTEGER_PATTERN, r as formatValidationError, s as hasFieldError, t as ErrorMessage, u as validateMapEntries } from "./ErrorMessage-
|
|
1
|
+
import { a as getValidationStateClasses, c as isDuplicateMapKey, d as INTEGER_HTML_PATTERN, f as INTEGER_INPUT_PATTERN, i as getErrorMessage, l as validateField, n as createValidationResult, o as handleValidationError, p as INTEGER_PATTERN, r as formatValidationError, s as hasFieldError, t as ErrorMessage, u as validateMapEntries } from "./ErrorMessage-BqOEJm84.mjs";
|
|
2
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, Network, Plus, Search, Settings, Timer, Upload, X } from "lucide-react";
|
|
2
5
|
import * as React$1 from "react";
|
|
3
6
|
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
4
|
-
import {
|
|
7
|
+
import { cn, getDefaultValueForType, getInvalidUrlMessage, getServiceDisplayName, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
|
|
5
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
7
|
-
import { cva } from "class-variance-authority";
|
|
8
|
-
import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, Network, Plus, Search, Timer, Upload, X } from "lucide-react";
|
|
9
|
-
import { cn, getDefaultValueForType, getInvalidUrlMessage, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
|
|
10
9
|
import { Slot, Slottable } from "@radix-ui/react-slot";
|
|
11
10
|
import { DayPicker } from "react-day-picker";
|
|
12
11
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
@@ -14,6 +13,7 @@ import { format } from "date-fns";
|
|
|
14
13
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
15
14
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
16
15
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
16
|
+
import { Controller, FormProvider, useFieldArray, useFormContext, useWatch } from "react-hook-form";
|
|
17
17
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
18
18
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
19
19
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
@@ -25,195 +25,6 @@ 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/components/fields/utils/accessibility.ts
|
|
29
|
-
/**
|
|
30
|
-
* Accessibility utilities for form field components
|
|
31
|
-
*/
|
|
32
|
-
/**
|
|
33
|
-
* Default aria-describedby ID generator based on field ID
|
|
34
|
-
*/
|
|
35
|
-
function getDescribedById(id, type = "error") {
|
|
36
|
-
return `${id}-${type}`;
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* Generates accessibility attributes for form fields
|
|
40
|
-
*/
|
|
41
|
-
function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
|
|
42
|
-
const describedByIds = [];
|
|
43
|
-
if (hasError) describedByIds.push(getDescribedById(id, "error"));
|
|
44
|
-
if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
|
|
45
|
-
if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
|
|
46
|
-
return {
|
|
47
|
-
"aria-invalid": hasError,
|
|
48
|
-
"aria-required": isRequired,
|
|
49
|
-
"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
|
|
50
|
-
"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
|
|
51
|
-
required: isRequired,
|
|
52
|
-
disabled: isDisabled,
|
|
53
|
-
readOnly: isReadOnly,
|
|
54
|
-
tabIndex: isDisabled ? -1 : 0
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Utility function to handle keyboard events for interactive elements
|
|
59
|
-
* Helps ensure keyboard users can interact with form controls
|
|
60
|
-
*/
|
|
61
|
-
function handleKeyboardEvent(event, handlers) {
|
|
62
|
-
switch (event.key) {
|
|
63
|
-
case "Enter":
|
|
64
|
-
if (handlers.onEnter) {
|
|
65
|
-
event.preventDefault();
|
|
66
|
-
handlers.onEnter();
|
|
67
|
-
}
|
|
68
|
-
break;
|
|
69
|
-
case " ":
|
|
70
|
-
if (handlers.onSpace) {
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
handlers.onSpace();
|
|
73
|
-
}
|
|
74
|
-
break;
|
|
75
|
-
case "Escape":
|
|
76
|
-
if (handlers.onEscape) {
|
|
77
|
-
event.preventDefault();
|
|
78
|
-
handlers.onEscape();
|
|
79
|
-
}
|
|
80
|
-
break;
|
|
81
|
-
case "ArrowUp":
|
|
82
|
-
if (handlers.onArrowUp) {
|
|
83
|
-
event.preventDefault();
|
|
84
|
-
handlers.onArrowUp();
|
|
85
|
-
}
|
|
86
|
-
break;
|
|
87
|
-
case "ArrowDown":
|
|
88
|
-
if (handlers.onArrowDown) {
|
|
89
|
-
event.preventDefault();
|
|
90
|
-
handlers.onArrowDown();
|
|
91
|
-
}
|
|
92
|
-
break;
|
|
93
|
-
case "ArrowLeft":
|
|
94
|
-
if (handlers.onArrowLeft) {
|
|
95
|
-
event.preventDefault();
|
|
96
|
-
handlers.onArrowLeft();
|
|
97
|
-
}
|
|
98
|
-
break;
|
|
99
|
-
case "ArrowRight":
|
|
100
|
-
if (handlers.onArrowRight) {
|
|
101
|
-
event.preventDefault();
|
|
102
|
-
handlers.onArrowRight();
|
|
103
|
-
}
|
|
104
|
-
break;
|
|
105
|
-
case "Tab":
|
|
106
|
-
if (handlers.onTab) {
|
|
107
|
-
event.preventDefault();
|
|
108
|
-
handlers.onTab();
|
|
109
|
-
}
|
|
110
|
-
break;
|
|
111
|
-
default: break;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
/**
|
|
115
|
-
* Field focus management utility
|
|
116
|
-
* For managing focus within a field group or complex form component
|
|
117
|
-
*/
|
|
118
|
-
function createFocusManager() {
|
|
119
|
-
return {
|
|
120
|
-
focusFirstElement(container) {
|
|
121
|
-
if (!container) return;
|
|
122
|
-
const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
|
|
123
|
-
if (focusable.length > 0) focusable[0].focus();
|
|
124
|
-
},
|
|
125
|
-
focusElementById(id) {
|
|
126
|
-
const element = document.getElementById(id);
|
|
127
|
-
if (element) element.focus();
|
|
128
|
-
},
|
|
129
|
-
trapFocus(event, container) {
|
|
130
|
-
if (!container || event.key !== "Tab") return;
|
|
131
|
-
const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
|
|
132
|
-
if (focusable.length === 0) return;
|
|
133
|
-
const firstElement = focusable[0];
|
|
134
|
-
const lastElement = focusable[focusable.length - 1];
|
|
135
|
-
if (event.shiftKey && document.activeElement === firstElement) {
|
|
136
|
-
event.preventDefault();
|
|
137
|
-
lastElement.focus();
|
|
138
|
-
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
139
|
-
event.preventDefault();
|
|
140
|
-
firstElement.focus();
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* Provides a handler for Escape key to clear input fields
|
|
147
|
-
*
|
|
148
|
-
* @param onChange - Function to call when value changes
|
|
149
|
-
* @param value - Current value of the input
|
|
150
|
-
* @returns A function to handle the Escape key press
|
|
151
|
-
*/
|
|
152
|
-
function handleEscapeKey(onChange, value) {
|
|
153
|
-
return (e) => {
|
|
154
|
-
if (e.key === "Escape") {
|
|
155
|
-
e.preventDefault();
|
|
156
|
-
if (value) onChange("");
|
|
157
|
-
else e.target.blur();
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
|
|
163
|
-
*
|
|
164
|
-
* @param onChange - Function to call when value changes
|
|
165
|
-
* @param value - Current value of the input
|
|
166
|
-
* @returns A function to handle the Space/Enter key press
|
|
167
|
-
*/
|
|
168
|
-
function handleToggleKeys(onChange, value) {
|
|
169
|
-
return (e) => {
|
|
170
|
-
if (e.key === " " || e.key === "Enter") {
|
|
171
|
-
e.preventDefault();
|
|
172
|
-
onChange(!value);
|
|
173
|
-
}
|
|
174
|
-
};
|
|
175
|
-
}
|
|
176
|
-
/**
|
|
177
|
-
* Provides a handler for arrow keys for numeric inputs
|
|
178
|
-
*
|
|
179
|
-
* @param onChange - Function to call when value changes
|
|
180
|
-
* @param value - Current numeric value
|
|
181
|
-
* @param step - Step amount for increments/decrements
|
|
182
|
-
* @param min - Minimum allowed value (optional)
|
|
183
|
-
* @param max - Maximum allowed value (optional)
|
|
184
|
-
* @returns A function to handle arrow key presses
|
|
185
|
-
*/
|
|
186
|
-
function handleNumericKeys(onChange, value, step = 1, min, max) {
|
|
187
|
-
return (e) => {
|
|
188
|
-
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
189
|
-
e.preventDefault();
|
|
190
|
-
const direction = e.key === "ArrowUp" ? 1 : -1;
|
|
191
|
-
let newValue = typeof value === "number" ? value + step * direction : 0;
|
|
192
|
-
if (typeof min === "number") newValue = Math.max(min, newValue);
|
|
193
|
-
if (typeof max === "number") newValue = Math.min(max, newValue);
|
|
194
|
-
onChange(newValue);
|
|
195
|
-
}
|
|
196
|
-
};
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
//#endregion
|
|
200
|
-
//#region src/components/fields/utils/layout.ts
|
|
201
|
-
/**
|
|
202
|
-
* Layout utility functions for form components
|
|
203
|
-
*/
|
|
204
|
-
/**
|
|
205
|
-
* Helper function to get width classes based on the field width
|
|
206
|
-
*/
|
|
207
|
-
function getWidthClasses(width) {
|
|
208
|
-
switch (width) {
|
|
209
|
-
case "half": return "form-field-half";
|
|
210
|
-
case "third": return "form-field-third";
|
|
211
|
-
case "full":
|
|
212
|
-
default: return "form-field-full";
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
//#endregion
|
|
217
28
|
//#region src/components/ui/accordion.tsx
|
|
218
29
|
const accordionItemVariants = cva("", {
|
|
219
30
|
variants: { variant: {
|
|
@@ -1694,6 +1505,195 @@ function ViewContractStateButton({ contractAddress, onToggle }) {
|
|
|
1694
1505
|
});
|
|
1695
1506
|
}
|
|
1696
1507
|
|
|
1508
|
+
//#endregion
|
|
1509
|
+
//#region src/components/fields/utils/accessibility.ts
|
|
1510
|
+
/**
|
|
1511
|
+
* Accessibility utilities for form field components
|
|
1512
|
+
*/
|
|
1513
|
+
/**
|
|
1514
|
+
* Default aria-describedby ID generator based on field ID
|
|
1515
|
+
*/
|
|
1516
|
+
function getDescribedById(id, type = "error") {
|
|
1517
|
+
return `${id}-${type}`;
|
|
1518
|
+
}
|
|
1519
|
+
/**
|
|
1520
|
+
* Generates accessibility attributes for form fields
|
|
1521
|
+
*/
|
|
1522
|
+
function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
|
|
1523
|
+
const describedByIds = [];
|
|
1524
|
+
if (hasError) describedByIds.push(getDescribedById(id, "error"));
|
|
1525
|
+
if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
|
|
1526
|
+
if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
|
|
1527
|
+
return {
|
|
1528
|
+
"aria-invalid": hasError,
|
|
1529
|
+
"aria-required": isRequired,
|
|
1530
|
+
"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
|
|
1531
|
+
"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
|
|
1532
|
+
required: isRequired,
|
|
1533
|
+
disabled: isDisabled,
|
|
1534
|
+
readOnly: isReadOnly,
|
|
1535
|
+
tabIndex: isDisabled ? -1 : 0
|
|
1536
|
+
};
|
|
1537
|
+
}
|
|
1538
|
+
/**
|
|
1539
|
+
* Utility function to handle keyboard events for interactive elements
|
|
1540
|
+
* Helps ensure keyboard users can interact with form controls
|
|
1541
|
+
*/
|
|
1542
|
+
function handleKeyboardEvent(event, handlers) {
|
|
1543
|
+
switch (event.key) {
|
|
1544
|
+
case "Enter":
|
|
1545
|
+
if (handlers.onEnter) {
|
|
1546
|
+
event.preventDefault();
|
|
1547
|
+
handlers.onEnter();
|
|
1548
|
+
}
|
|
1549
|
+
break;
|
|
1550
|
+
case " ":
|
|
1551
|
+
if (handlers.onSpace) {
|
|
1552
|
+
event.preventDefault();
|
|
1553
|
+
handlers.onSpace();
|
|
1554
|
+
}
|
|
1555
|
+
break;
|
|
1556
|
+
case "Escape":
|
|
1557
|
+
if (handlers.onEscape) {
|
|
1558
|
+
event.preventDefault();
|
|
1559
|
+
handlers.onEscape();
|
|
1560
|
+
}
|
|
1561
|
+
break;
|
|
1562
|
+
case "ArrowUp":
|
|
1563
|
+
if (handlers.onArrowUp) {
|
|
1564
|
+
event.preventDefault();
|
|
1565
|
+
handlers.onArrowUp();
|
|
1566
|
+
}
|
|
1567
|
+
break;
|
|
1568
|
+
case "ArrowDown":
|
|
1569
|
+
if (handlers.onArrowDown) {
|
|
1570
|
+
event.preventDefault();
|
|
1571
|
+
handlers.onArrowDown();
|
|
1572
|
+
}
|
|
1573
|
+
break;
|
|
1574
|
+
case "ArrowLeft":
|
|
1575
|
+
if (handlers.onArrowLeft) {
|
|
1576
|
+
event.preventDefault();
|
|
1577
|
+
handlers.onArrowLeft();
|
|
1578
|
+
}
|
|
1579
|
+
break;
|
|
1580
|
+
case "ArrowRight":
|
|
1581
|
+
if (handlers.onArrowRight) {
|
|
1582
|
+
event.preventDefault();
|
|
1583
|
+
handlers.onArrowRight();
|
|
1584
|
+
}
|
|
1585
|
+
break;
|
|
1586
|
+
case "Tab":
|
|
1587
|
+
if (handlers.onTab) {
|
|
1588
|
+
event.preventDefault();
|
|
1589
|
+
handlers.onTab();
|
|
1590
|
+
}
|
|
1591
|
+
break;
|
|
1592
|
+
default: break;
|
|
1593
|
+
}
|
|
1594
|
+
}
|
|
1595
|
+
/**
|
|
1596
|
+
* Field focus management utility
|
|
1597
|
+
* For managing focus within a field group or complex form component
|
|
1598
|
+
*/
|
|
1599
|
+
function createFocusManager() {
|
|
1600
|
+
return {
|
|
1601
|
+
focusFirstElement(container) {
|
|
1602
|
+
if (!container) return;
|
|
1603
|
+
const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
|
|
1604
|
+
if (focusable.length > 0) focusable[0].focus();
|
|
1605
|
+
},
|
|
1606
|
+
focusElementById(id) {
|
|
1607
|
+
const element = document.getElementById(id);
|
|
1608
|
+
if (element) element.focus();
|
|
1609
|
+
},
|
|
1610
|
+
trapFocus(event, container) {
|
|
1611
|
+
if (!container || event.key !== "Tab") return;
|
|
1612
|
+
const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
|
|
1613
|
+
if (focusable.length === 0) return;
|
|
1614
|
+
const firstElement = focusable[0];
|
|
1615
|
+
const lastElement = focusable[focusable.length - 1];
|
|
1616
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
1617
|
+
event.preventDefault();
|
|
1618
|
+
lastElement.focus();
|
|
1619
|
+
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
1620
|
+
event.preventDefault();
|
|
1621
|
+
firstElement.focus();
|
|
1622
|
+
}
|
|
1623
|
+
}
|
|
1624
|
+
};
|
|
1625
|
+
}
|
|
1626
|
+
/**
|
|
1627
|
+
* Provides a handler for Escape key to clear input fields
|
|
1628
|
+
*
|
|
1629
|
+
* @param onChange - Function to call when value changes
|
|
1630
|
+
* @param value - Current value of the input
|
|
1631
|
+
* @returns A function to handle the Escape key press
|
|
1632
|
+
*/
|
|
1633
|
+
function handleEscapeKey(onChange, value) {
|
|
1634
|
+
return (e) => {
|
|
1635
|
+
if (e.key === "Escape") {
|
|
1636
|
+
e.preventDefault();
|
|
1637
|
+
if (value) onChange("");
|
|
1638
|
+
else e.target.blur();
|
|
1639
|
+
}
|
|
1640
|
+
};
|
|
1641
|
+
}
|
|
1642
|
+
/**
|
|
1643
|
+
* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
|
|
1644
|
+
*
|
|
1645
|
+
* @param onChange - Function to call when value changes
|
|
1646
|
+
* @param value - Current value of the input
|
|
1647
|
+
* @returns A function to handle the Space/Enter key press
|
|
1648
|
+
*/
|
|
1649
|
+
function handleToggleKeys(onChange, value) {
|
|
1650
|
+
return (e) => {
|
|
1651
|
+
if (e.key === " " || e.key === "Enter") {
|
|
1652
|
+
e.preventDefault();
|
|
1653
|
+
onChange(!value);
|
|
1654
|
+
}
|
|
1655
|
+
};
|
|
1656
|
+
}
|
|
1657
|
+
/**
|
|
1658
|
+
* Provides a handler for arrow keys for numeric inputs
|
|
1659
|
+
*
|
|
1660
|
+
* @param onChange - Function to call when value changes
|
|
1661
|
+
* @param value - Current numeric value
|
|
1662
|
+
* @param step - Step amount for increments/decrements
|
|
1663
|
+
* @param min - Minimum allowed value (optional)
|
|
1664
|
+
* @param max - Maximum allowed value (optional)
|
|
1665
|
+
* @returns A function to handle arrow key presses
|
|
1666
|
+
*/
|
|
1667
|
+
function handleNumericKeys(onChange, value, step = 1, min, max) {
|
|
1668
|
+
return (e) => {
|
|
1669
|
+
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
1670
|
+
e.preventDefault();
|
|
1671
|
+
const direction = e.key === "ArrowUp" ? 1 : -1;
|
|
1672
|
+
let newValue = typeof value === "number" ? value + step * direction : 0;
|
|
1673
|
+
if (typeof min === "number") newValue = Math.max(min, newValue);
|
|
1674
|
+
if (typeof max === "number") newValue = Math.min(max, newValue);
|
|
1675
|
+
onChange(newValue);
|
|
1676
|
+
}
|
|
1677
|
+
};
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
//#endregion
|
|
1681
|
+
//#region src/components/fields/utils/layout.ts
|
|
1682
|
+
/**
|
|
1683
|
+
* Layout utility functions for form components
|
|
1684
|
+
*/
|
|
1685
|
+
/**
|
|
1686
|
+
* Helper function to get width classes based on the field width
|
|
1687
|
+
*/
|
|
1688
|
+
function getWidthClasses(width) {
|
|
1689
|
+
switch (width) {
|
|
1690
|
+
case "half": return "form-field-half";
|
|
1691
|
+
case "third": return "form-field-third";
|
|
1692
|
+
case "full":
|
|
1693
|
+
default: return "form-field-full";
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1697
1697
|
//#endregion
|
|
1698
1698
|
//#region src/components/fields/AddressField.tsx
|
|
1699
1699
|
/**
|
|
@@ -2701,7 +2701,7 @@ BooleanField.displayName = "BooleanField";
|
|
|
2701
2701
|
* 4. BaseField provides consistent layout and hook form integration
|
|
2702
2702
|
* 5. This component handles bytes-specific validation and formatting
|
|
2703
2703
|
*/
|
|
2704
|
-
function BytesField({ id, label, helperText, control, name, width = "full", validation, placeholder = "Enter hex or base64 encoded bytes", rows = 3, maxBytes, acceptedFormats = "both", autoPrefix = false, allowHexPrefix = true, readOnly }) {
|
|
2704
|
+
function BytesField({ id, label, helperText, control, name, width = "full", validation, placeholder = "Enter hex or base64 encoded bytes", rows = 3, maxBytes, exactBytes, acceptedFormats = "both", autoPrefix = false, allowHexPrefix = true, readOnly }) {
|
|
2705
2705
|
const isRequired = !!validation?.required;
|
|
2706
2706
|
const errorId = `${id}-error`;
|
|
2707
2707
|
const descriptionId = `${id}-description`;
|
|
@@ -2712,6 +2712,7 @@ function BytesField({ id, label, helperText, control, name, width = "full", vali
|
|
|
2712
2712
|
return validateBytesSimple(value, {
|
|
2713
2713
|
acceptedFormats,
|
|
2714
2714
|
maxBytes,
|
|
2715
|
+
exactBytes,
|
|
2715
2716
|
allowHexPrefix
|
|
2716
2717
|
});
|
|
2717
2718
|
};
|
|
@@ -2787,7 +2788,8 @@ function BytesField({ id, label, helperText, control, name, width = "full", vali
|
|
|
2787
2788
|
acceptedFormats === "hex" && "Hex format (e.g., 48656c6c6f or 0x48656c6c6f)",
|
|
2788
2789
|
acceptedFormats === "base64" && "Base64 format (e.g., SGVsbG8=)",
|
|
2789
2790
|
acceptedFormats === "both" && "Hex (e.g., 48656c6c6f) or Base64 (e.g., SGVsbG8=) format",
|
|
2790
|
-
|
|
2791
|
+
exactBytes && ` • Exactly ${exactBytes} bytes (${exactBytes * 2} hex chars)`,
|
|
2792
|
+
!exactBytes && maxBytes && ` • Max ${maxBytes} bytes`
|
|
2791
2793
|
]
|
|
2792
2794
|
})]
|
|
2793
2795
|
}),
|
|
@@ -5081,6 +5083,65 @@ function useNetworkErrorAwareAdapter(adapter) {
|
|
|
5081
5083
|
return wrappedAdapterRef.current;
|
|
5082
5084
|
}
|
|
5083
5085
|
|
|
5086
|
+
//#endregion
|
|
5087
|
+
//#region src/components/network-errors/NetworkServiceErrorBanner.tsx
|
|
5088
|
+
/**
|
|
5089
|
+
* User-friendly banner displayed when a network service connection fails.
|
|
5090
|
+
* Works with any service type (RPC, Explorer, Indexer, etc.) and provides
|
|
5091
|
+
* a clear explanation of the issue with a call-to-action to open the
|
|
5092
|
+
* network settings dialog where users can configure an alternative endpoint.
|
|
5093
|
+
*
|
|
5094
|
+
* This component can be used with or without the NetworkErrorNotificationProvider:
|
|
5095
|
+
* - With provider: The settings handler is obtained from context
|
|
5096
|
+
* - Without provider: Pass onOpenNetworkSettings prop directly, or the button won't render
|
|
5097
|
+
*/
|
|
5098
|
+
function NetworkServiceErrorBanner({ networkConfig, serviceType, errorMessage, title, description, onOpenNetworkSettings: onOpenNetworkSettingsProp }) {
|
|
5099
|
+
const context = useContext(NetworkErrorContext);
|
|
5100
|
+
const onOpenNetworkSettings = onOpenNetworkSettingsProp ?? context?.onOpenNetworkSettings;
|
|
5101
|
+
const handleOpenSettings = () => {
|
|
5102
|
+
onOpenNetworkSettings?.(networkConfig.id);
|
|
5103
|
+
};
|
|
5104
|
+
const serviceName = getServiceDisplayName(serviceType);
|
|
5105
|
+
const defaultTitle = `Unable to Connect to ${networkConfig.name}`;
|
|
5106
|
+
const defaultDescription = onOpenNetworkSettings ? `This could be due to network congestion, rate limiting, or the service being temporarily down. You can configure a custom ${serviceName.toLowerCase()} endpoint in the network settings.` : `This could be due to network congestion, rate limiting, or the service being temporarily down.`;
|
|
5107
|
+
return /* @__PURE__ */ jsxs(Alert, {
|
|
5108
|
+
variant: "destructive",
|
|
5109
|
+
className: "border-red-500/50 bg-red-50 dark:bg-red-950/20",
|
|
5110
|
+
children: [
|
|
5111
|
+
/* @__PURE__ */ jsx(CloudOff, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
|
|
5112
|
+
/* @__PURE__ */ jsx(AlertTitle, {
|
|
5113
|
+
className: "text-red-900 dark:text-red-100",
|
|
5114
|
+
children: title || defaultTitle
|
|
5115
|
+
}),
|
|
5116
|
+
/* @__PURE__ */ jsxs(AlertDescription, {
|
|
5117
|
+
className: "text-red-800 dark:text-red-200",
|
|
5118
|
+
children: [
|
|
5119
|
+
/* @__PURE__ */ jsx("p", {
|
|
5120
|
+
className: "mb-2",
|
|
5121
|
+
children: errorMessage || `The ${serviceName.toLowerCase()} for ${networkConfig.name} is currently unavailable or not responding.`
|
|
5122
|
+
}),
|
|
5123
|
+
/* @__PURE__ */ jsx("p", {
|
|
5124
|
+
className: "text-sm mb-3",
|
|
5125
|
+
children: description || defaultDescription
|
|
5126
|
+
}),
|
|
5127
|
+
onOpenNetworkSettings && /* @__PURE__ */ jsxs(Button, {
|
|
5128
|
+
onClick: handleOpenSettings,
|
|
5129
|
+
variant: "default",
|
|
5130
|
+
size: "sm",
|
|
5131
|
+
className: "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600",
|
|
5132
|
+
children: [
|
|
5133
|
+
/* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
|
|
5134
|
+
"Configure ",
|
|
5135
|
+
serviceName,
|
|
5136
|
+
" Settings"
|
|
5137
|
+
]
|
|
5138
|
+
})
|
|
5139
|
+
]
|
|
5140
|
+
})
|
|
5141
|
+
]
|
|
5142
|
+
});
|
|
5143
|
+
}
|
|
5144
|
+
|
|
5084
5145
|
//#endregion
|
|
5085
5146
|
//#region src/components/ui/sonner.tsx
|
|
5086
5147
|
const Toaster = ({ ...props }) => {
|
|
@@ -5100,5 +5161,5 @@ const Toaster = ({ ...props }) => {
|
|
|
5100
5161
|
};
|
|
5101
5162
|
|
|
5102
5163
|
//#endregion
|
|
5103
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, 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, 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, NetworkStatusBadge, NumberField, ObjectField, 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, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
|
|
5104
|
-
//# sourceMappingURL=index.
|
|
5164
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, 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, 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, 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, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
|
|
5165
|
+
//# sourceMappingURL=index.mjs.map
|