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

package/dist/lib/browser/index.mjs

@@ -80,7 +80,7 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React7, { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import React7, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
 import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
 import { log as log3 } from "@dxos/log";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
@@ -435,7 +435,7 @@ var flatMap = (errors) => {
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
 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 = useMemo2(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
@@ -467,7 +467,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)
       });
@@ -487,6 +487,26 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     ];
     const label = title ?? pipe(name, capitalize);
     const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+    const FoundComponent = lookupComponent?.({
+      prop: name,
+      schema: S.make(ast),
+      inputProps: {
+        property: name,
+        type,
+        format,
+        label,
+        disabled: readonly,
+        placeholder,
+        ...inputProps
+      }
+    });
+    if (FoundComponent) {
+      return /* @__PURE__ */ React6.createElement("div", {
+        key: name,
+        role: "none",
+        className: padding
+      }, FoundComponent);
+    }
     let InputComponent = Custom?.[key.join(".")];
     if (!InputComponent) {
       if (options) {
@@ -553,7 +573,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)
       });
@@ -754,9 +774,9 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [schema, setSchema] = useState2();
+  const [referenceSchema, setReferenceSchema] = useState2();
   useEffect3(() => {
-    setSchema(schemas.find((schema2) => schema2.typename === props?.referenceSchema));
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
@@ -774,9 +794,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 = formatToType[_props.format];
       if (props2.type !== type) {
@@ -823,12 +849,38 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     onSave
   ]);
+  const Custom = useMemo3(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
+      ...props2,
+      options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
+        value,
+        label: t(`format ${value}`)
+      }))
+    }),
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
+      ...props2,
+      options: schemas.map((schema) => ({
+        value: schema.typename
+      }))
+    }),
+    ["referencePath"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
+      ...props2,
+      options: referenceSchema ? getSchemaProperties2(referenceSchema.ast).sort(sortProperties).map((p) => ({
+        value: p.name
+      })) : []
+    })
+  }), [
+    t,
+    schemas,
+    referenceSchema
+  ]);
+  const propIsNotType = useCallback2((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     log3.warn("invalid format", {
       props
     }, {
       F: __dxlog_file3,
-      L: 126,
+      L: 173,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -839,7 +891,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"
@@ -848,32 +900,12 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     onValidate: handleValidate,
     onSave: handleSave,
     onCancel: handleCancel,
-    Custom: {
-      ["format"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
-        ...props2,
-        options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
-          value,
-          label: t(`format ${value}`)
-        }))
-      }),
-      ["referenceSchema"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
-        ...props2,
-        options: schemas.map((schema2) => ({
-          value: schema2.typename
-        }))
-      }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
-        ...props2,
-        options: schema ? getSchemaProperties2(schema.ast).sort(sortProperties).map((p) => ({
-          value: p.name
-        })) : []
-      })
-    }
+    Custom
   });
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React8, { useCallback as useCallback3, useMemo as useMemo3, useState as useState3 } from "react";
+import React8, { useCallback as useCallback3, useMemo as useMemo4, useState as useState3 } from "react";
 import { AST as AST2, Format, S as S2 } from "@dxos/echo-schema";
 import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
@@ -889,14 +921,14 @@ var ViewMetaSchema = S2.Struct({
     [AST2.TitleAnnotationId]: "Typename"
   })
 }).pipe(S2.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onDelete }) => {
+var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = useTranslation4(translationKey);
-  const projection = useMemo3(() => new ViewProjection(schema, view), [
+  const projection = useMemo4(() => new ViewProjection(schema, view), [
     schema,
     view
   ]);
   const [field, setField] = useState3();
-  const viewValues = useMemo3(() => {
+  const viewValues = useMemo4(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -908,13 +940,17 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   const handleViewUpdate = useCallback3(({ 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 = useCallback3((field2) => {
     setField((f) => f === field2 ? void 0 : field2);