@dxos/react-ui-form 0.7.5-main.9cb18ac → 0.7.5-main.9d2a38b

package/dist/lib/node/index.cjs

@@ -473,7 +473,7 @@ var flatMap = (errors) => {
 };
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/Form.tsx";
 var padding = "px-2";
-var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom }) => {
+var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
   const onValid = (0, import_react7.useMemo)(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
@@ -505,7 +505,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         errors
       }, {
         F: __dxlog_file2,
-        L: 99,
+        L: 106,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -525,6 +525,26 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     ];
     const label = title ?? (0, import_effect.pipe)(name, import_String.capitalize);
     const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+    const FoundComponent = lookupComponent?.({
+      prop: name,
+      schema: import_echo_schema2.S.make(ast),
+      inputProps: {
+        property: name,
+        type,
+        format,
+        label,
+        disabled: readonly,
+        placeholder,
+        ...inputProps
+      }
+    });
+    if (FoundComponent) {
+      return /* @__PURE__ */ import_react7.default.createElement("div", {
+        key: name,
+        role: "none",
+        className: padding
+      }, FoundComponent);
+    }
     let InputComponent = Custom?.[key.join(".")];
     if (!InputComponent) {
       if (options) {
@@ -591,7 +611,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         type
       }, {
         F: __dxlog_file2,
-        L: 184,
+        L: 213,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -790,9 +810,9 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [schema, setSchema] = (0, import_react2.useState)();
+  const [referenceSchema, setReferenceSchema] = (0, import_react2.useState)();
   (0, import_react2.useEffect)(() => {
-    setSchema(schemas.find((schema2) => schema2.typename === props?.referenceSchema));
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
@@ -810,9 +830,15 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
         fieldSchema: fieldSchema2
       };
     });
-    if (_props.referenceSchema !== props.referenceSchema) {
-      setSchema(schemas.find((schema2) => schema2.typename === _props.referenceSchema));
-    }
+    setReferenceSchema((prev) => {
+      if (_props.referenceSchema !== prev?.typename) {
+        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+        if (newSchema) {
+          return newSchema;
+        }
+      }
+      return prev;
+    });
     setProps((props2) => {
       const type = import_echo_schema.formatToType[_props.format];
       if (props2.type !== type) {
@@ -859,12 +885,38 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     onSave
   ]);
+  const Custom = (0, import_react2.useMemo)(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+      ...props2,
+      options: import_echo_schema.FormatEnums.filter((value) => value !== import_echo_schema.FormatEnum.None).map((value) => ({
+        value,
+        label: t(`format ${value}`)
+      }))
+    }),
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+      ...props2,
+      options: schemas.map((schema) => ({
+        value: schema.typename
+      }))
+    }),
+    ["referencePath"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+      ...props2,
+      options: referenceSchema ? (0, import_schema.getSchemaProperties)(referenceSchema.ast).sort(import_schema.sortProperties).map((p) => ({
+        value: p.name
+      })) : []
+    })
+  }), [
+    t,
+    schemas,
+    referenceSchema
+  ]);
+  const propIsNotType = (0, import_react2.useCallback)((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     import_log.log.warn("invalid format", {
       props
     }, {
       F: __dxlog_file3,
-      L: 126,
+      L: 173,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -875,7 +927,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     autoFocus: true,
     values: props,
     schema: fieldSchema,
-    filter: (props2) => props2.filter((p) => p.name !== "type"),
+    filter: propIsNotType,
     sort: [
       "property",
       "format"
@@ -884,27 +936,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     onValidate: handleValidate,
     onSave: handleSave,
     onCancel: handleCancel,
-    Custom: {
-      ["format"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
-        ...props2,
-        options: import_echo_schema.FormatEnums.filter((value) => value !== import_echo_schema.FormatEnum.None).map((value) => ({
-          value,
-          label: t(`format ${value}`)
-        }))
-      }),
-      ["referenceSchema"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
-        ...props2,
-        options: schemas.map((schema2) => ({
-          value: schema2.typename
-        }))
-      }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
-        ...props2,
-        options: schema ? (0, import_schema.getSchemaProperties)(schema.ast).sort(import_schema.sortProperties).map((p) => ({
-          value: p.name
-        })) : []
-      })
-    }
+    Custom
   });
 };
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
@@ -916,7 +948,7 @@ var ViewMetaSchema = import_echo_schema5.S.Struct({
     [import_echo_schema5.AST.TitleAnnotationId]: "Typename"
   })
 }).pipe(import_echo_schema5.S.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onDelete }) => {
+var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = (0, import_react_ui8.useTranslation)(translationKey);
   const projection = (0, import_react9.useMemo)(() => new import_schema4.ViewProjection(schema, view), [
     schema,
@@ -935,13 +967,17 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   const handleViewUpdate = (0, import_react9.useCallback)(({ name, typename }) => {
     requestAnimationFrame(() => {
-      view.name = name;
-      view.query.type = typename;
-      schema.updateTypename(typename);
+      if (view.name !== name) {
+        view.name = name;
+      }
+      if (view.query.type !== typename) {
+        onTypenameChanged(typename);
+      }
     });
   }, [
     view,
-    schema
+    schema,
+    onTypenameChanged
   ]);
   const handleSelect = (0, import_react9.useCallback)((field2) => {
     setField((f) => f === field2 ? void 0 : field2);