@module-federation/devtools 0.22.0 → 0.23.0

package/dist/lib/component/{GraphItem → DependencyGraphItem}/index.js

@@ -26,19 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var GraphItem_exports = {};
-__export(GraphItem_exports, {
-  default: () => GraphItem_default
+var DependencyGraphItem_exports = {};
+__export(DependencyGraphItem_exports, {
+  default: () => DependencyGraphItem_default
 });
-module.exports = __toCommonJS(GraphItem_exports);
+module.exports = __toCommonJS(DependencyGraphItem_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_reactflow = require("reactflow");
+var import_react_i18next = require("react-i18next");
 var import_index = __toESM(require("./index.module"));
 var import_style = require("reactflow/dist/style.css");
 const GraphItem = (props) => {
   const [shareds, setShareds] = (0, import_react.useState)([]);
   const [exposes, setExposes] = (0, import_react.useState)([]);
+  const { t } = (0, import_react_i18next.useTranslation)();
   let name;
   let version;
   const { info = "", color, remote } = props.data;
@@ -56,12 +58,17 @@ const GraphItem = (props) => {
     let shareds2;
     if (isEntryType) {
       fetch(version).then((response) => response.json()).then((json) => {
-        exposes2 = json.exposes.map((expose) => expose.path) || [];
-        shareds2 = json.shared.map(
+        const exposeList = Array.isArray(json == null ? void 0 : json.exposes) ? json.exposes : [];
+        const sharedList = Array.isArray(json == null ? void 0 : json.shared) ? json.shared : [];
+        exposes2 = exposeList.map((expose) => expose.path) || [];
+        shareds2 = sharedList.map(
           (share) => `${share.name}:${share.version}`
         ) || [];
         setExposes(exposes2);
         setShareds(shareds2);
+      }).catch(() => {
+        setExposes([]);
+        setShareds([]);
       });
     } else {
       exposes2 = ((_a = remote == null ? void 0 : remote.modules) == null ? void 0 : _a.map(
@@ -73,26 +80,30 @@ const GraphItem = (props) => {
       setExposes(exposes2);
       setShareds(shareds2);
     }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { background: color }, className: import_index.default.Wrapper, children: [
+  }, [isEntryType, remote, version]);
+  const accentColor = color || "rgba(99, 102, 241, 0.45)";
+  const style = {
+    ["--mf-accent"]: accentColor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style, className: import_index.default.Wrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Handle, { type: "target", position: import_reactflow.Position.Top }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.container, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.group, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.name, children: name }) }),
       version && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.info, children: [
         exposes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Expose" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: t("graphItem.expose") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: exposes.map((expose, index) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: expose }, index);
           }) })
         ] }) : null,
         shareds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Shared" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: t("graphItem.shared") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shareds.map((shared, index) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: shared }, index);
           }) })
         ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.message, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? "Entry" : "Version" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? t("graphItem.entry") : t("graphItem.version") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: version })
         ] })
       ] })
@@ -100,4 +111,4 @@ const GraphItem = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Handle, { type: "source", position: import_reactflow.Position.Bottom, id: "source" })
   ] });
 };
-var GraphItem_default = GraphItem;
+var DependencyGraphItem_default = GraphItem;

package/dist/lib/component/{Graph → DependencyGraphItem}/index.module.js

@@ -22,4 +22,4 @@ __export(index_module_exports, {
 });
 module.exports = __toCommonJS(index_module_exports);
 var import_index_module = require("./index_module.css");
-var index_module_default = { "depWrapper": "depWrapper_613b1", "table": "table_613b1", "graph": "graph_613b1" };
+var index_module_default = { "Wrapper": "Wrapper_d8079", "container": "container_d8079", "group": "group_d8079", "name": "name_d8079", "info": "info_d8079", "expose-container": "expose-container_d8079", "type": "type_d8079", "item": "item_d8079", "message": "message_d8079" };

package/dist/lib/component/DependencyGraphItem/index_module.css

@@ -0,0 +1,95 @@
+.Wrapper_d8079 {
+  display: flex;
+  width: 320px;
+  border-radius: 18px;
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  overflow: hidden;
+  box-shadow: 0 18px 32px rgba(8, 11, 25, 0.35);
+  background: linear-gradient(140deg, var(--mf-accent, rgba(243, 244, 246, 0.9)) 0%, rgba(229, 231, 235, 0.7) 45%, rgba(255, 255, 255, 0.95) 100%), var(--color-bg-2, rgba(255, 255, 255, 0.9));
+  color: var(--color-text-1, #1f2937);
+  backdrop-filter: blur(4px);
+}
+.Wrapper_d8079 .react-flow__handle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid rgba(96, 165, 250, 0.3);
+  background: rgba(243, 244, 246, 0.9);
+  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
+}
+.Wrapper_d8079 .container_d8079 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 8px;
+}
+.Wrapper_d8079 .group_d8079 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  background: var(--mf-accent, rgba(243, 244, 246, 0.9));
+}
+.Wrapper_d8079 .name_d8079 {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: white;
+}
+.Wrapper_d8079 .info_d8079 {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0 12px;
+  padding: 12px;
+  border-radius: 14px;
+  background: rgba(243, 244, 246, 0.4);
+  border: 1px solid rgba(96, 165, 250, 0.3);
+  font-size: 11px;
+}
+.Wrapper_d8079 .expose-container_d8079 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.Wrapper_d8079 .expose-container_d8079 div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.Wrapper_d8079 .type_d8079 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-2, #4b5563);
+}
+.Wrapper_d8079 .item_d8079 {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(243, 244, 246, 0.6);
+  color: var(--color-text-1, #1f2937);
+  font-size: 10px;
+  font-weight: 500;
+  margin-right: 6px;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-shadow: 0 4px 10px rgba(8, 11, 25, 0.45);
+}
+.Wrapper_d8079 .message_d8079 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--color-text-2, #4b5563);
+}
+.Wrapper_d8079 .message_d8079 .item_d8079 {
+  margin-right: 0;
+  padding: 4px 10px;
+  background: rgba(243, 244, 246, 0.6);
+  color: var(--color-text-1, #1f2937);
+}

package/dist/lib/component/Form/index.js

@@ -53,8 +53,8 @@ __export(Form_exports, {
 module.exports = __toCommonJS(Form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react_dom = require("react-dom");
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_icon = require("@arco-design/web-react/icon");
 var import_constant = require("../../template/constant");
 var import_utils = require("../../utils");
@@ -74,13 +74,20 @@ const FormComponent = (props) => {
     versionList,
     setVersionList,
     getVersion,
-    customValueValidate
+    customValueValidate,
+    enableClip,
+    onClipChange
   } = props;
-  const { moduleInfo } = window.__FEDERATION__;
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const federation = window.__FEDERATION__ || {
+    moduleInfo: {},
+    originModuleInfo: {}
+  };
+  const { moduleInfo } = federation;
   let { producer } = (0, import_utils.separateType)(moduleInfo);
   const filterDupMap = /* @__PURE__ */ new Map();
-  producer = producer.filter((t) => {
-    const [typeOrName, name] = t.split(":");
+  producer = producer.filter((tItem) => {
+    const [typeOrName, name] = tItem.split(":");
     const marked = filterDupMap.get(name || typeOrName);
     filterDupMap.set(name || typeOrName, true);
     return !marked;
@@ -127,12 +134,17 @@ const FormComponent = (props) => {
     }
     if (key) {
       statusSet[index].keyStatus = true;
-      (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
-      return callback();
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
     }
     statusSet[index].keyStatus = false;
-    (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
-    return callback("Module name can not be empty");
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleNameRequired"));
   };
   const validateValue = (value, callback, index) => {
     const status = getCheckStatus(index);
@@ -148,14 +160,17 @@ const FormComponent = (props) => {
     }
     if ((0, import_utils.validateCustom)(value) || (0, import_utils.validateSemver)(value) || (0, import_utils.validatePort)(value) || (customValueValidate == null ? void 0 : customValueValidate(value))) {
       statusSet[index].valueStatus = true;
-      (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
-      return callback();
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
     }
     statusSet[index].valueStatus = false;
-    (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
-    return callback(
-      "The module information format is incorrect, check the format in the upper left corner"
-    );
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleInfoInvalid"));
   };
   const onAdd = (add) => {
     add(import_constant.defaultDataItem);
@@ -172,6 +187,9 @@ const FormComponent = (props) => {
   const hmrChange = (on) => {
     onHMRChange(on);
   };
+  const handleSwitchChange = (on) => {
+    onClipChange(on);
+  };
   const onKeyChange = (key, index) => __async(void 0, null, function* () {
     const version = yield getVersion == null ? void 0 : getVersion(key);
     if (version) {
@@ -180,120 +198,176 @@ const FormComponent = (props) => {
       setVersionList == null ? void 0 : setVersionList(list);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormList, { field: import_constant.proxyFormField, children: (fields, { add, remove }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_web_react.Tooltip,
-        {
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Example: Customize the remote module address, which should end with 「.json」, for example key: @module-federation/button, value: http://localhost:3000/mf-manifest.json" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {})
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.title, children: "Module Proxy" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_web_react.Button,
-        {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconPlus, {}),
-          shape: "circle",
-          className: import_index.default.add,
-          onClick: () => onAdd(add),
-          "data-set-e2e": "e2eAdd"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.status, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Badge, { color: condition.color, className: import_index.default.badge }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.message, children: condition.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.headerSlot, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormList, { field: import_constant.proxyFormField, children: (fields, { add, remove }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.sectionHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.heading, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.titleRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: t("form.tooltip.proxyExample") }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: t("form.title") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "span",
+            {
+              className: import_index.default.statusMessage,
+              style: { marginLeft: 8 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Badge, { color: condition.color, className: import_index.default.badge }),
+                condition.message
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: t("form.subtitle") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.headerActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.hmrArea, children: [
           props.headerSlot,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_web_react.Switch,
+            {
+              checked: enableClip,
+              checkedText: t("form.clip.enable"),
+              uncheckedText: t("form.clip.disable"),
+              onChange: handleSwitchChange,
+              className: import_index.default.switch
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: t("form.clip.tooltip"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon.IconQuestionCircle,
+            {
+              style: { marginLeft: 5, cursor: "pointer" }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.divider }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_web_react.Switch,
             {
               checked: enableHMR === "enable",
-              checkedText: "Enable HMR",
-              uncheckedText: "Disable HMR",
+              checkedText: t("form.hmr.enable"),
+              uncheckedText: t("form.hmr.disable"),
               onChange: hmrChange,
               className: import_index.default.switch
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_web_react.Button,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconPlus, {}),
+            shape: "circle",
+            className: import_index.default.add,
+            onClick: () => onAdd(add),
+            "data-set-e2e": "e2eAdd"
+          }
+        )
       ] })
     ] }),
-    fields.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fields.map((item, index) => {
+    fields.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.rules, children: fields.map((item, index) => {
       var _a, _b;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: import_index.default.container,
-          "data-set-e2e": "e2eProxyItem",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              FormItem,
-              {
-                field: `${item.field}.checked`,
-                triggerPropName: "checked",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Checkbox, { className: import_index.default.checkBox })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.input, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              FormItem,
-              {
-                field: `${item.field}.key`,
-                rules: [
-                  {
-                    validator: (value, cb) => validateKey(value, cb, index)
-                  }
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_web_react.Select,
-                  {
-                    "data-set-e2e": "e2eProxyKey",
-                    placeholder: "Module Name",
-                    onChange: (key) => onKeyChange(key, index),
-                    allowClear: true,
-                    showSearch: true,
-                    children: formatProducer.map((item2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: item2.value, children: item2.label }, item2.value))
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.input, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              FormItem,
-              {
-                field: `${item.field}.value`,
-                rules: [
-                  {
-                    validator: (value, cb) => validateValue(value, cb, index)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.ruleCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.ruleHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FormItem,
+            {
+              field: `${item.field}.checked`,
+              triggerPropName: "checked",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Checkbox, { className: import_index.default.toggle })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_web_react.Button,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconDelete, {}),
+              shape: "circle",
+              status: "danger",
+              className: import_index.default.delete,
+              "data-set-e2e": "e2eDelete",
+              onClick: () => onRemove(remove, index)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.inputs, "data-set-e2e": "e2eProxyItem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FormItem,
+            {
+              field: `${item.field}.key`,
+              rules: [
+                {
+                  validator: (value, cb) => {
+                    const isValid = Boolean(value);
+                    if (isValid) {
+                      cb();
+                      validateKey(value, () => {
+                      }, index);
+                    } else {
+                      cb(t("form.validation.moduleNameRequired"));
+                      validateKey(value, () => {
+                      }, index);
+                    }
                   }
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_web_react.Select,
-                  {
-                    "data-set-e2e": "e2eProxyValue",
-                    placeholder: "Custom Manifest URL",
-                    allowClear: true,
-                    showSearch: true,
-                    allowCreate: true,
-                    children: (_b = (_a = versionList || []) == null ? void 0 : _a[index]) == null ? void 0 : _b.map((version) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: version, children: version }, version))
+                }
+              ],
+              className: import_index.default.field,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  "data-set-e2e": "e2eProxyKey",
+                  placeholder: t("form.fields.moduleName.placeholder"),
+                  onChange: (key) => onKeyChange(key, index),
+                  allowClear: true,
+                  showSearch: true,
+                  dropdownMenuClassName: import_index.default.dropdown,
+                  children: formatProducer.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: option.value, children: option.label }, option.value))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FormItem,
+            {
+              field: `${item.field}.value`,
+              rules: [
+                {
+                  validator: (value, cb) => {
+                    const isValid = (0, import_utils.validateCustom)(value) || (0, import_utils.validateSemver)(value) || (0, import_utils.validatePort)(value) || (customValueValidate == null ? void 0 : customValueValidate(value));
+                    if (isValid) {
+                      cb();
+                      validateValue(value, () => {
+                      }, index);
+                    } else {
+                      cb(t("form.validation.moduleInfoInvalid"));
+                      validateValue(value, () => {
+                      }, index);
+                    }
                   }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_web_react.Button,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconDelete, {}),
-                shape: "circle",
-                status: "danger",
-                className: import_index.default.delete,
-                "data-set-e2e": "e2eDelete",
-                onClick: () => onRemove(remove, index)
-              }
-            )
-          ]
-        },
-        item.field
-      );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Empty, {})
+                }
+              ],
+              className: import_index.default.field,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  "data-set-e2e": "e2eProxyValue",
+                  placeholder: t(
+                    "form.fields.customManifest.placeholder"
+                  ),
+                  allowClear: true,
+                  showSearch: true,
+                  allowCreate: true,
+                  dropdownMenuClassName: import_index.default.dropdown,
+                  children: (_b = (_a = versionList || []) == null ? void 0 : _a[index]) == null ? void 0 : _b.map((version) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: version, children: version }, version))
+                }
+              )
+            }
+          )
+        ] })
+      ] }, item.field);
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.emptyWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_web_react.Empty,
+      {
+        description: t("form.empty.description"),
+        className: import_index.default.empty
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.footerHint, children: t("form.footer.hint") })
   ] }) });
 };
 var Form_default = FormComponent;

package/dist/lib/component/Form/index.module.js

@@ -22,4 +22,4 @@ __export(index_module_exports, {
 });
 module.exports = __toCommonJS(index_module_exports);
 var import_index_module = require("./index_module.css");
-var index_module_default = { "container": "container_20b79", "checkBox": "checkBox_20b79", "input": "input_20b79", "delete": "delete_20b79", "header": "header_20b79", "add": "add_20b79", "title": "title_20b79", "status": "status_20b79", "message": "message_20b79", "switch": "switch_20b79", "headerSlot": "headerSlot_20b79", "badge": "badge_20b79" };
+var index_module_default = { "wrapper": "wrapper_20b79", "sectionHeader": "sectionHeader_20b79", "heading": "heading_20b79", "titleRow": "titleRow_20b79", "title": "title_20b79", "subtitle": "subtitle_20b79", "headerActions": "headerActions_20b79", "badge": "badge_20b79", "statusMessage": "statusMessage_20b79", "divider": "divider_20b79", "hmrArea": "hmrArea_20b79", "switch": "switch_20b79", "rules": "rules_20b79", "ruleCard": "ruleCard_20b79", "ruleHeader": "ruleHeader_20b79", "toggle": "toggle_20b79", "inputs": "inputs_20b79", "field": "field_20b79", "dropdown": "dropdown_20b79", "delete": "delete_20b79", "emptyWrapper": "emptyWrapper_20b79", "empty": "empty_20b79", "footerHint": "footerHint_20b79" };