@module-federation/devtools 2.6.0 → 2.8.0

package/dist/types/component/DependencyGraphItem/index.js

@@ -0,0 +1,124 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DependencyGraphItem_exports = {};
+__export(DependencyGraphItem_exports, {
+  default: () => DependencyGraphItem_default
+});
+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 parseInfo = (info) => {
+  const array = info.split(":");
+  const [fallbackName, fallbackVersion = ""] = array;
+  const idx = array.findIndex((item, index) => {
+    return index > 0 && (item.startsWith("http") || item.startsWith("//"));
+  });
+  if (idx > 0) {
+    return {
+      name: array.slice(0, idx).join(":"),
+      version: array.slice(idx).join(":")
+    };
+  }
+  return {
+    name: fallbackName,
+    version: fallbackVersion
+  };
+};
+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;
+  ({ name, version } = parseInfo(info));
+  const isEntryType = (version == null ? void 0 : version.startsWith("http")) || (version == null ? void 0 : version.startsWith("//"));
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    let exposes2;
+    let shareds2;
+    if (isEntryType) {
+      fetch(version).then((response) => response.json()).then((json) => {
+        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(
+        (item) => item.modulePath
+      )) || [];
+      shareds2 = ((_b = remote == null ? void 0 : remote.shared) == null ? void 0 : _b.map(
+        (item) => `${item.sharedName}:${item.version}`
+      )) || [];
+      setExposes(exposes2);
+      setShareds(shareds2);
+    }
+  }, [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: 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: 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 ? t("graphItem.entry") : t("graphItem.version") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: version })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Handle, { type: "source", position: import_reactflow.Position.Bottom, id: "source" })
+  ] });
+};
+var DependencyGraphItem_default = GraphItem;

package/dist/types/component/DependencyGraphItem/index.module.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./index_module.css");
+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/types/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/types/component/Form/index.js

@@ -0,0 +1,372 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var Form_exports = {};
+__export(Form_exports, {
+  default: () => Form_default
+});
+module.exports = __toCommonJS(Form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+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");
+var import_index = __toESM(require("./index.module"));
+const FormItem = import_web_react.Form.Item;
+const FormList = import_web_react.Form.List;
+const { Option } = import_web_react.Select;
+const FormComponent = (props) => {
+  const {
+    form,
+    condition,
+    formStatus,
+    setFormStatus,
+    validateForm,
+    enableHMR,
+    onHMRChange,
+    versionList,
+    setVersionList,
+    getVersion,
+    customValueValidate,
+    enableClip,
+    onClipChange
+  } = props;
+  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((tItem) => {
+    const [typeOrName, name] = tItem.split(":");
+    const marked = filterDupMap.get(name || typeOrName);
+    filterDupMap.set(name || typeOrName, true);
+    return !marked;
+  });
+  const formatProducer = producer.map((id) => {
+    const hasType = id.includes(":");
+    if (hasType) {
+      return {
+        label: id.split(":")[1],
+        value: id
+      };
+    } else {
+      return {
+        label: id,
+        value: id
+      };
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    producer.forEach((target) => __async(void 0, null, function* () {
+      const version = yield getVersion == null ? void 0 : getVersion(target);
+      const list = [...versionList || []];
+      if (version) {
+        list.push(version);
+      }
+      setVersionList == null ? void 0 : setVersionList(list);
+    }));
+  }, []);
+  const getCheckStatus = (index) => {
+    const formData = form.getFieldsValue();
+    return formData[import_constant.proxyFormField][index].checked;
+  };
+  const validateKey = (key, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!(0, import_utils.isObject)(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if (key) {
+      statusSet[index].keyStatus = true;
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
+    }
+    statusSet[index].keyStatus = false;
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleNameRequired"));
+  };
+  const validateValue = (value, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!(0, import_utils.isObject)(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    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;
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
+    }
+    statusSet[index].valueStatus = false;
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleInfoInvalid"));
+  };
+  const onAdd = (add) => {
+    add(import_constant.defaultDataItem);
+    setVersionList == null ? void 0 : setVersionList([...versionList || [], []]);
+    validateForm();
+  };
+  const onRemove = (remove, index) => {
+    if (Array.isArray(versionList)) {
+      versionList.splice(index, 1);
+      setVersionList == null ? void 0 : setVersionList(versionList);
+    }
+    remove(index);
+  };
+  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) {
+      const list = [...versionList || []];
+      list.splice(index, 1, version);
+      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", { 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: 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)("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.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);
+                    }
+                  }
+                }
+              ],
+              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);
+                    }
+                  }
+                }
+              ],
+              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/types/component/Form/index.module.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./index_module.css");
+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" };