@openzeppelin/ui-components 1.0.4 → 1.2.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/{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 +297 -193
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +77 -45
- package/dist/index.d.cts.map +1 -0
- package/dist/{index-B4RKqEg8.d.ts → index.d.mts} +80 -48
- package/dist/index.d.mts.map +1 -0
- package/dist/{index.js → index.mjs} +298 -197
- package/dist/index.mjs.map +1 -0
- package/package.json +20 -14
- 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-B4RKqEg8.d.ts.map +0 -1
- package/dist/index-mhkE-hOZ.d.cts +0 -2412
- package/dist/index-mhkE-hOZ.d.cts.map +0 -1
- package/dist/index.d.ts +0 -2412
- 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,205 +13,18 @@ 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";
|
|
20
20
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
21
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
21
22
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
22
23
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
23
24
|
import { isMapEntryArray } from "@openzeppelin/ui-types";
|
|
24
25
|
import { Toaster as Toaster$1, toast } from "sonner";
|
|
25
26
|
import { useTheme } from "next-themes";
|
|
26
27
|
|
|
27
|
-
//#region src/components/fields/utils/accessibility.ts
|
|
28
|
-
/**
|
|
29
|
-
* Accessibility utilities for form field components
|
|
30
|
-
*/
|
|
31
|
-
/**
|
|
32
|
-
* Default aria-describedby ID generator based on field ID
|
|
33
|
-
*/
|
|
34
|
-
function getDescribedById(id, type = "error") {
|
|
35
|
-
return `${id}-${type}`;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Generates accessibility attributes for form fields
|
|
39
|
-
*/
|
|
40
|
-
function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
|
|
41
|
-
const describedByIds = [];
|
|
42
|
-
if (hasError) describedByIds.push(getDescribedById(id, "error"));
|
|
43
|
-
if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
|
|
44
|
-
if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
|
|
45
|
-
return {
|
|
46
|
-
"aria-invalid": hasError,
|
|
47
|
-
"aria-required": isRequired,
|
|
48
|
-
"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
|
|
49
|
-
"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
|
|
50
|
-
required: isRequired,
|
|
51
|
-
disabled: isDisabled,
|
|
52
|
-
readOnly: isReadOnly,
|
|
53
|
-
tabIndex: isDisabled ? -1 : 0
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Utility function to handle keyboard events for interactive elements
|
|
58
|
-
* Helps ensure keyboard users can interact with form controls
|
|
59
|
-
*/
|
|
60
|
-
function handleKeyboardEvent(event, handlers) {
|
|
61
|
-
switch (event.key) {
|
|
62
|
-
case "Enter":
|
|
63
|
-
if (handlers.onEnter) {
|
|
64
|
-
event.preventDefault();
|
|
65
|
-
handlers.onEnter();
|
|
66
|
-
}
|
|
67
|
-
break;
|
|
68
|
-
case " ":
|
|
69
|
-
if (handlers.onSpace) {
|
|
70
|
-
event.preventDefault();
|
|
71
|
-
handlers.onSpace();
|
|
72
|
-
}
|
|
73
|
-
break;
|
|
74
|
-
case "Escape":
|
|
75
|
-
if (handlers.onEscape) {
|
|
76
|
-
event.preventDefault();
|
|
77
|
-
handlers.onEscape();
|
|
78
|
-
}
|
|
79
|
-
break;
|
|
80
|
-
case "ArrowUp":
|
|
81
|
-
if (handlers.onArrowUp) {
|
|
82
|
-
event.preventDefault();
|
|
83
|
-
handlers.onArrowUp();
|
|
84
|
-
}
|
|
85
|
-
break;
|
|
86
|
-
case "ArrowDown":
|
|
87
|
-
if (handlers.onArrowDown) {
|
|
88
|
-
event.preventDefault();
|
|
89
|
-
handlers.onArrowDown();
|
|
90
|
-
}
|
|
91
|
-
break;
|
|
92
|
-
case "ArrowLeft":
|
|
93
|
-
if (handlers.onArrowLeft) {
|
|
94
|
-
event.preventDefault();
|
|
95
|
-
handlers.onArrowLeft();
|
|
96
|
-
}
|
|
97
|
-
break;
|
|
98
|
-
case "ArrowRight":
|
|
99
|
-
if (handlers.onArrowRight) {
|
|
100
|
-
event.preventDefault();
|
|
101
|
-
handlers.onArrowRight();
|
|
102
|
-
}
|
|
103
|
-
break;
|
|
104
|
-
case "Tab":
|
|
105
|
-
if (handlers.onTab) {
|
|
106
|
-
event.preventDefault();
|
|
107
|
-
handlers.onTab();
|
|
108
|
-
}
|
|
109
|
-
break;
|
|
110
|
-
default: break;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* Field focus management utility
|
|
115
|
-
* For managing focus within a field group or complex form component
|
|
116
|
-
*/
|
|
117
|
-
function createFocusManager() {
|
|
118
|
-
return {
|
|
119
|
-
focusFirstElement(container) {
|
|
120
|
-
if (!container) return;
|
|
121
|
-
const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
|
|
122
|
-
if (focusable.length > 0) focusable[0].focus();
|
|
123
|
-
},
|
|
124
|
-
focusElementById(id) {
|
|
125
|
-
const element = document.getElementById(id);
|
|
126
|
-
if (element) element.focus();
|
|
127
|
-
},
|
|
128
|
-
trapFocus(event, container) {
|
|
129
|
-
if (!container || event.key !== "Tab") return;
|
|
130
|
-
const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
|
|
131
|
-
if (focusable.length === 0) return;
|
|
132
|
-
const firstElement = focusable[0];
|
|
133
|
-
const lastElement = focusable[focusable.length - 1];
|
|
134
|
-
if (event.shiftKey && document.activeElement === firstElement) {
|
|
135
|
-
event.preventDefault();
|
|
136
|
-
lastElement.focus();
|
|
137
|
-
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
138
|
-
event.preventDefault();
|
|
139
|
-
firstElement.focus();
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* Provides a handler for Escape key to clear input fields
|
|
146
|
-
*
|
|
147
|
-
* @param onChange - Function to call when value changes
|
|
148
|
-
* @param value - Current value of the input
|
|
149
|
-
* @returns A function to handle the Escape key press
|
|
150
|
-
*/
|
|
151
|
-
function handleEscapeKey(onChange, value) {
|
|
152
|
-
return (e) => {
|
|
153
|
-
if (e.key === "Escape") {
|
|
154
|
-
e.preventDefault();
|
|
155
|
-
if (value) onChange("");
|
|
156
|
-
else e.target.blur();
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
|
|
162
|
-
*
|
|
163
|
-
* @param onChange - Function to call when value changes
|
|
164
|
-
* @param value - Current value of the input
|
|
165
|
-
* @returns A function to handle the Space/Enter key press
|
|
166
|
-
*/
|
|
167
|
-
function handleToggleKeys(onChange, value) {
|
|
168
|
-
return (e) => {
|
|
169
|
-
if (e.key === " " || e.key === "Enter") {
|
|
170
|
-
e.preventDefault();
|
|
171
|
-
onChange(!value);
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
}
|
|
175
|
-
/**
|
|
176
|
-
* Provides a handler for arrow keys for numeric inputs
|
|
177
|
-
*
|
|
178
|
-
* @param onChange - Function to call when value changes
|
|
179
|
-
* @param value - Current numeric value
|
|
180
|
-
* @param step - Step amount for increments/decrements
|
|
181
|
-
* @param min - Minimum allowed value (optional)
|
|
182
|
-
* @param max - Maximum allowed value (optional)
|
|
183
|
-
* @returns A function to handle arrow key presses
|
|
184
|
-
*/
|
|
185
|
-
function handleNumericKeys(onChange, value, step = 1, min, max) {
|
|
186
|
-
return (e) => {
|
|
187
|
-
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
188
|
-
e.preventDefault();
|
|
189
|
-
const direction = e.key === "ArrowUp" ? 1 : -1;
|
|
190
|
-
let newValue = typeof value === "number" ? value + step * direction : 0;
|
|
191
|
-
if (typeof min === "number") newValue = Math.max(min, newValue);
|
|
192
|
-
if (typeof max === "number") newValue = Math.min(max, newValue);
|
|
193
|
-
onChange(newValue);
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
//#endregion
|
|
199
|
-
//#region src/components/fields/utils/layout.ts
|
|
200
|
-
/**
|
|
201
|
-
* Layout utility functions for form components
|
|
202
|
-
*/
|
|
203
|
-
/**
|
|
204
|
-
* Helper function to get width classes based on the field width
|
|
205
|
-
*/
|
|
206
|
-
function getWidthClasses(width) {
|
|
207
|
-
switch (width) {
|
|
208
|
-
case "half": return "form-field-half";
|
|
209
|
-
case "third": return "form-field-third";
|
|
210
|
-
case "full":
|
|
211
|
-
default: return "form-field-full";
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
//#endregion
|
|
216
28
|
//#region src/components/ui/accordion.tsx
|
|
217
29
|
const accordionItemVariants = cva("", {
|
|
218
30
|
variants: { variant: {
|
|
@@ -1467,6 +1279,47 @@ function SidebarButton({ icon, children, onClick, size = "default", badge, disab
|
|
|
1467
1279
|
});
|
|
1468
1280
|
}
|
|
1469
1281
|
|
|
1282
|
+
//#endregion
|
|
1283
|
+
//#region src/components/ui/sidebar/SidebarGroup.tsx
|
|
1284
|
+
/**
|
|
1285
|
+
* A collapsible group component for organizing sidebar navigation items.
|
|
1286
|
+
* Supports both controlled and uncontrolled modes.
|
|
1287
|
+
*/
|
|
1288
|
+
function SidebarGroup({ title, icon, children, defaultOpen = false, open: controlledOpen, onOpenChange, className, triggerClassName, contentClassName }) {
|
|
1289
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
1290
|
+
const isControlled = controlledOpen !== void 0;
|
|
1291
|
+
const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
|
|
1292
|
+
const handleOpenChange = (nextOpen) => {
|
|
1293
|
+
if (!isControlled) setUncontrolledOpen(nextOpen);
|
|
1294
|
+
onOpenChange?.(nextOpen);
|
|
1295
|
+
};
|
|
1296
|
+
return /* @__PURE__ */ jsxs(CollapsiblePrimitive.Root, {
|
|
1297
|
+
open: isOpen,
|
|
1298
|
+
onOpenChange: handleOpenChange,
|
|
1299
|
+
className: cn("w-full", className),
|
|
1300
|
+
children: [/* @__PURE__ */ jsxs(CollapsiblePrimitive.Trigger, {
|
|
1301
|
+
className: cn("group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold", "text-muted-foreground transition-colors hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", triggerClassName),
|
|
1302
|
+
children: [
|
|
1303
|
+
/* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 shrink-0 transition-transform duration-200", isOpen && "rotate-90") }),
|
|
1304
|
+
icon && /* @__PURE__ */ jsx("span", {
|
|
1305
|
+
className: "shrink-0",
|
|
1306
|
+
children: icon
|
|
1307
|
+
}),
|
|
1308
|
+
/* @__PURE__ */ jsx("span", {
|
|
1309
|
+
className: "flex-1 text-left",
|
|
1310
|
+
children: title
|
|
1311
|
+
})
|
|
1312
|
+
]
|
|
1313
|
+
}), /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, {
|
|
1314
|
+
className: cn("overflow-hidden transition-all duration-200 ease-in-out", "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", contentClassName),
|
|
1315
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1316
|
+
className: "py-1 pl-4",
|
|
1317
|
+
children
|
|
1318
|
+
})
|
|
1319
|
+
})]
|
|
1320
|
+
});
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1470
1323
|
//#endregion
|
|
1471
1324
|
//#region src/components/ui/sidebar/SidebarLayout.tsx
|
|
1472
1325
|
/**
|
|
@@ -1652,6 +1505,195 @@ function ViewContractStateButton({ contractAddress, onToggle }) {
|
|
|
1652
1505
|
});
|
|
1653
1506
|
}
|
|
1654
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
|
+
|
|
1655
1697
|
//#endregion
|
|
1656
1698
|
//#region src/components/fields/AddressField.tsx
|
|
1657
1699
|
/**
|
|
@@ -5039,6 +5081,65 @@ function useNetworkErrorAwareAdapter(adapter) {
|
|
|
5039
5081
|
return wrappedAdapterRef.current;
|
|
5040
5082
|
}
|
|
5041
5083
|
|
|
5084
|
+
//#endregion
|
|
5085
|
+
//#region src/components/network-errors/NetworkServiceErrorBanner.tsx
|
|
5086
|
+
/**
|
|
5087
|
+
* User-friendly banner displayed when a network service connection fails.
|
|
5088
|
+
* Works with any service type (RPC, Explorer, Indexer, etc.) and provides
|
|
5089
|
+
* a clear explanation of the issue with a call-to-action to open the
|
|
5090
|
+
* network settings dialog where users can configure an alternative endpoint.
|
|
5091
|
+
*
|
|
5092
|
+
* This component can be used with or without the NetworkErrorNotificationProvider:
|
|
5093
|
+
* - With provider: The settings handler is obtained from context
|
|
5094
|
+
* - Without provider: Pass onOpenNetworkSettings prop directly, or the button won't render
|
|
5095
|
+
*/
|
|
5096
|
+
function NetworkServiceErrorBanner({ networkConfig, serviceType, errorMessage, title, description, onOpenNetworkSettings: onOpenNetworkSettingsProp }) {
|
|
5097
|
+
const context = useContext(NetworkErrorContext);
|
|
5098
|
+
const onOpenNetworkSettings = onOpenNetworkSettingsProp ?? context?.onOpenNetworkSettings;
|
|
5099
|
+
const handleOpenSettings = () => {
|
|
5100
|
+
onOpenNetworkSettings?.(networkConfig.id);
|
|
5101
|
+
};
|
|
5102
|
+
const serviceName = getServiceDisplayName(serviceType);
|
|
5103
|
+
const defaultTitle = `Unable to Connect to ${networkConfig.name}`;
|
|
5104
|
+
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.`;
|
|
5105
|
+
return /* @__PURE__ */ jsxs(Alert, {
|
|
5106
|
+
variant: "destructive",
|
|
5107
|
+
className: "border-red-500/50 bg-red-50 dark:bg-red-950/20",
|
|
5108
|
+
children: [
|
|
5109
|
+
/* @__PURE__ */ jsx(CloudOff, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
|
|
5110
|
+
/* @__PURE__ */ jsx(AlertTitle, {
|
|
5111
|
+
className: "text-red-900 dark:text-red-100",
|
|
5112
|
+
children: title || defaultTitle
|
|
5113
|
+
}),
|
|
5114
|
+
/* @__PURE__ */ jsxs(AlertDescription, {
|
|
5115
|
+
className: "text-red-800 dark:text-red-200",
|
|
5116
|
+
children: [
|
|
5117
|
+
/* @__PURE__ */ jsx("p", {
|
|
5118
|
+
className: "mb-2",
|
|
5119
|
+
children: errorMessage || `The ${serviceName.toLowerCase()} for ${networkConfig.name} is currently unavailable or not responding.`
|
|
5120
|
+
}),
|
|
5121
|
+
/* @__PURE__ */ jsx("p", {
|
|
5122
|
+
className: "text-sm mb-3",
|
|
5123
|
+
children: description || defaultDescription
|
|
5124
|
+
}),
|
|
5125
|
+
onOpenNetworkSettings && /* @__PURE__ */ jsxs(Button, {
|
|
5126
|
+
onClick: handleOpenSettings,
|
|
5127
|
+
variant: "default",
|
|
5128
|
+
size: "sm",
|
|
5129
|
+
className: "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600",
|
|
5130
|
+
children: [
|
|
5131
|
+
/* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
|
|
5132
|
+
"Configure ",
|
|
5133
|
+
serviceName,
|
|
5134
|
+
" Settings"
|
|
5135
|
+
]
|
|
5136
|
+
})
|
|
5137
|
+
]
|
|
5138
|
+
})
|
|
5139
|
+
]
|
|
5140
|
+
});
|
|
5141
|
+
}
|
|
5142
|
+
|
|
5042
5143
|
//#endregion
|
|
5043
5144
|
//#region src/components/ui/sonner.tsx
|
|
5044
5145
|
const Toaster = ({ ...props }) => {
|
|
@@ -5058,5 +5159,5 @@ const Toaster = ({ ...props }) => {
|
|
|
5058
5159
|
};
|
|
5059
5160
|
|
|
5060
5161
|
//#endregion
|
|
5061
|
-
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, 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 };
|
|
5062
|
-
//# sourceMappingURL=index.
|
|
5162
|
+
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 };
|
|
5163
|
+
//# sourceMappingURL=index.mjs.map
|