@openzeppelin/ui-components 2.3.1 → 3.0.1

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "2.3.1";
+const VERSION = "3.0.1";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -1348,7 +1348,7 @@ function NetworkIcon({ network, className, size = 16, variant = "branded" }) {
 //#endregion
 //#region src/components/ui/network-selector.tsx
 /** Searchable dropdown selector for blockchain networks with optional grouping and multi-select. */
-function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetworkType, getNetworkId, groupByEcosystem = false, getEcosystem, filterNetwork, className, placeholder = "Select Network", ...modeProps }) {
+function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetworkType, getNetworkId, groupByEcosystem = false, getEcosystem, filterNetwork, isNetworkDisabled, getNetworkDisabledLabel, className, placeholder = "Select Network", ...modeProps }) {
 	const [open, setOpen] = react.useState(false);
 	const [searchQuery, setSearchQuery] = react.useState("");
 	const isMultiple = modeProps.multiple === true;
@@ -1389,6 +1389,7 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 		getNetworkId
 	]);
 	const handleSelect = react.useCallback((network) => {
+		if (isNetworkDisabled?.(network)) return;
 		if (isMultiple && selectedNetworkIds && onSelectionChange) {
 			const id = getNetworkId(network);
 			onSelectionChange(selectedNetworkIds.includes(id) ? selectedNetworkIds.filter((x) => x !== id) : [...selectedNetworkIds, id]);
@@ -1401,7 +1402,8 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 		selectedNetworkIds,
 		onSelectionChange,
 		onSelectNetwork,
-		getNetworkId
+		getNetworkId,
+		isNetworkDisabled
 	]);
 	const handleClearAll = react.useCallback(() => {
 		if (isMultiple && onSelectionChange) onSelectionChange([]);
@@ -1487,31 +1489,47 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 						className: "text-xs font-medium text-muted-foreground",
 						children: group
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuGroup, { children: groupNetworks.map((network) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuItem, {
-						onSelect: (e) => {
-							if (isMultiple) e.preventDefault();
-							handleSelect(network);
-						},
-						className: "gap-2",
-						children: [
-							isMultiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: (0, _openzeppelin_ui_utils.cn)("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border transition-colors", isSelected(network) ? "border-selected bg-selected text-selected-foreground" : "border-input bg-background"),
-								children: isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3 w-3" })
-							}) : null,
-							getNetworkIcon?.(network),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-1 items-center gap-2 min-w-0",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "truncate",
-									children: getNetworkLabel(network)
-								}), getNetworkType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase text-muted-foreground",
-									children: getNetworkType(network)
-								})]
-							}),
-							!isMultiple && isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 text-selected opacity-100" })
-						]
-					}, getNetworkId(network))) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuGroup, { children: groupNetworks.map((network) => {
+						const disabled = isNetworkDisabled?.(network) ?? false;
+						const disabledLabel = disabled ? getNetworkDisabledLabel?.(network) : void 0;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuItem, {
+							disabled,
+							onSelect: (e) => {
+								if (disabled) {
+									e.preventDefault();
+									return;
+								}
+								if (isMultiple) e.preventDefault();
+								handleSelect(network);
+							},
+							className: (0, _openzeppelin_ui_utils.cn)("gap-2", disabled && "cursor-not-allowed opacity-60"),
+							children: [
+								isMultiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _openzeppelin_ui_utils.cn)("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border transition-colors", isSelected(network) ? "border-selected bg-selected text-selected-foreground" : "border-input bg-background", disabled && "opacity-50"),
+									children: isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3 w-3" })
+								}) : null,
+								getNetworkIcon?.(network),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-1 items-center gap-2 min-w-0",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "truncate",
+											children: getNetworkLabel(network)
+										}),
+										getNetworkType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase text-muted-foreground",
+											children: getNetworkType(network)
+										}),
+										disabledLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+											children: disabledLabel
+										}) : null
+									]
+								}),
+								!isMultiple && isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 text-selected opacity-100" })
+							]
+						}, getNetworkId(network));
+					}) }),
 					index < Object.keys(groupedNetworks).length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, {})
 				] }, group))]
 			})]
@@ -6368,6 +6386,35 @@ function NetworkServiceErrorBanner({ networkConfig, serviceType, errorMessage, t
 	});
 }
 
+//#endregion
+//#region src/components/network-availability/NetworkAvailabilityNotice.tsx
+/**
+* Banner shown when the deployment disables mainnet or specific network IDs.
+* Hidden when no network availability policy is active.
+*/
+function NetworkAvailabilityNotice({ appName, selfHostRepoUrl, className }) {
+	if (!(0, _openzeppelin_ui_utils.isNetworkAvailabilityPolicyActive)()) return null;
+	const { title, descriptionBeforeLink, descriptionLinkLabel } = (0, _openzeppelin_ui_utils.getHostedNetworkAvailabilityNoticeCopy)(appName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Alert, {
+		className,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "h-4 w-4" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertTitle, { children: title }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDescription, { children: [
+				descriptionBeforeLink,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href: selfHostRepoUrl,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "font-medium underline underline-offset-4 hover:text-foreground",
+					children: descriptionLinkLabel
+				}),
+				"."
+			] })
+		]
+	});
+}
+
 //#endregion
 //#region src/components/ui/sonner.tsx
 const Toaster = ({ ...props }) => {
@@ -6467,6 +6514,7 @@ exports.LoadingButton = LoadingButton;
 exports.MapEntryRow = MapEntryRow;
 exports.MapField = MapField;
 exports.MidnightIcon = MidnightIcon;
+exports.NetworkAvailabilityNotice = NetworkAvailabilityNotice;
 exports.NetworkErrorNotificationProvider = NetworkErrorNotificationProvider;
 exports.NetworkIcon = NetworkIcon;
 exports.NetworkSelector = NetworkSelector;