@dxos/react-ui-form 0.8.4-main.937b3ca → 0.8.4-main.9735255

package/dist/lib/browser/index.mjs

@@ -167,12 +167,25 @@ var ControlFrameItem = ({ title, description, children }) => {
 
 // src/components/FieldEditor/FieldEditor.tsx
 import React18, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
-import { Obj } from "@dxos/echo";
+import { Obj as Obj3 } from "@dxos/echo";
 import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
 import { log as log2 } from "@dxos/log";
 import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
 
+// src/util/echo.ts
+import { Obj } from "@dxos/echo";
+import { setValue as setValuePlain, splitJsonPath } from "@dxos/effect";
+var setValueEchoAware = (obj, path, value3) => {
+  if (Obj.isObject(obj)) {
+    Obj.change(obj, (mutableObj) => {
+      Obj.setValue(mutableObj, splitJsonPath(path), value3);
+    });
+    return obj;
+  }
+  return setValuePlain(obj, path, value3);
+};
+
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
 var parseValue = ({ type, format, value: value3 }) => {
@@ -475,13 +488,14 @@ import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@d
 import { createContext } from "@radix-ui/react-context";
 import * as Schema2 from "effect/Schema";
 import React5, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
-import { createJsonPath as createJsonPath3, getValue as getValue$2, setValue as setValue$2 } from "@dxos/effect";
+import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
 import { IconButton, ScrollArea, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/ui-theme";
 
 // src/hooks/useFormHandler.ts
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
 import { createJsonPath, fromEffectValidationPath, getValue as getValue$, setValue as setValue$ } from "@dxos/effect";
 import { log } from "@dxos/log";
 import { useDefaultValue } from "@dxos/react-ui";
@@ -515,7 +529,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       errors: errors2
     }, {
       F: __dxlog_file,
-      L: 157,
+      L: 160,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -608,7 +622,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       value: value3
     }, {
       F: __dxlog_file,
-      L: 256,
+      L: 259,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -621,13 +635,13 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 265,
+        L: 268,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
-    const newValues = {
+    const newValues = Obj2.isObject(values) ? (setValueEchoAware(values, jsonPath, parsedValue), values) : {
       ...setValue$(values, jsonPath, parsedValue)
     };
     setValues(newValues);
@@ -1051,7 +1065,7 @@ var useFormValues = (componentName, path = [], defaultValue) => {
   const value3 = getValue$2(values, jsonPath);
   useEffect3(() => {
     if (!value3 && defaultValue) {
-      setValue$2(values, jsonPath, defaultValue());
+      setValueEchoAware(values, jsonPath, defaultValue());
     }
   }, [
     value3,
@@ -2123,7 +2137,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const handleSave = useCallback14((props2) => {
     if (view) {
-      Obj.change(view, () => {
+      Obj3.change(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2185,13 +2199,14 @@ import * as Match2 from "effect/Match";
 import * as Option4 from "effect/Option";
 import * as Schema3 from "effect/Schema";
 import React19, { forwardRef as forwardRef3, useCallback as useCallback15, useContext, useImperativeHandle, useMemo as useMemo8, useState as useState6 } from "react";
-import { Filter as Filter2, Format as Format5, Obj as Obj2, Query, QueryAST } from "@dxos/echo";
+import { Filter as Filter2, Format as Format5, Obj as Obj4, Query, QueryAST } from "@dxos/echo";
 import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
+import { useObject } from "@dxos/react-client/echo";
 import { Callout, IconButton as IconButton4, Input as Input13, useTranslation as useTranslation10 } from "@dxos/react-ui";
 import { QueryForm } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
-import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, createDirectChangeCallback, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
+import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
 import { mx as mx7, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
@@ -2202,7 +2217,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   const { t } = useTranslation10(translationKey);
   const projectionModel = useMemo8(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = schema instanceof EchoSchema ? createEchoChangeCallback(view, schema) : createDirectChangeCallback(view.projection, jsonSchema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
     const model = new ProjectionModel({
       registry: atomRegistry,
       view,
@@ -2263,7 +2278,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   const handleAdd = useCallback15(() => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 148,
+      L: 146,
       S: void 0,
       A: [
         "!readonly",
@@ -2290,7 +2305,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   const handleDelete = useCallback15((fieldId) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 165,
+      L: 163,
       S: void 0,
       A: [
         "!readonly",
@@ -2344,9 +2359,10 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation10(translationKey);
+  const [viewSnapshot] = useObject(view);
   const projectionModel = useMemo8(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = schema instanceof EchoSchema ? createEchoChangeCallback(view, schema) : createDirectChangeCallback(view.projection, jsonSchema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
     const model = new ProjectionModel({
       registry: atomRegistry,
       view,
@@ -2368,7 +2384,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const handleDelete = useCallback15((fieldId) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 254,
+      L: 253,
       S: void 0,
       A: [
         "!readonly",
@@ -2387,23 +2403,23 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const handleMove = useCallback15((fromIndex, toIndex) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 266,
+      L: 265,
       S: void 0,
       A: [
         "!readonly",
         ""
       ]
     });
-    const fields = [
-      ...view.projection.fields
-    ];
-    const [moved] = fields.splice(fromIndex, 1);
-    fields.splice(toIndex, 0, moved);
-    Obj2.change(view, (v) => {
+    Obj4.change(view, (v) => {
+      const fields = [
+        ...v.projection.fields
+      ];
+      const [moved] = fields.splice(fromIndex, 1);
+      fields.splice(toIndex, 0, moved);
       v.projection.fields = fields;
     });
   }, [
-    view.projection.fields,
+    view,
     readonly
   ]);
   const handleClose = useCallback15(() => setExpandedField(void 0), []);
@@ -2419,8 +2435,11 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   }, [
     projectionModel
   ]);
+  if (!viewSnapshot) {
+    return null;
+  }
   return /* @__PURE__ */ React19.createElement(List2.Root, {
-    items: view.projection.fields,
+    items: viewSnapshot.projection.fields,
     isItem: Schema3.is(FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
@@ -2455,7 +2474,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
       label: t("delete field label"),
       autoHide: false,
-      disabled: readonly || schemaReadonly || view.projection.fields.length <= 1,
+      disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
       onClick: () => handleDelete(field.id),
       "data-testid": "field.delete"
     }), /* @__PURE__ */ React19.createElement(IconButton4, {
@@ -2533,6 +2552,7 @@ export {
   omitId,
   parseValue,
   pathNotUniqueError,
+  setValueEchoAware,
   translations,
   useFormContext,
   useFormFieldState,