@dxos/react-ui-form 0.8.4-main.84f28bd → 0.8.4-main.c1de068

package/dist/lib/browser/index.mjs

@@ -508,7 +508,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     }, /* @__PURE__ */ React5.createElement(List.Item, {
       role: "button",
       item,
-      classNames: mx4("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+      classNames: [
+        "p-1 plb-2",
+        "flex flex-col",
+        "cursor-pointer",
+        "hover:bg-hoverOverlay"
+      ],
       "aria-expanded": selected === item.id
     }, /* @__PURE__ */ React5.createElement("div", {
       className: "flex items-center"
@@ -1561,7 +1566,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
         classNames: "self-center"
       }));
     })), !readonly && /* @__PURE__ */ React10.createElement(IconButton3, {
-      classNames: "is-full mlb-1 flex",
+      classNames: "is-full mlb-cardSpacingBlock flex",
       icon: "ph--plus--regular",
       label: t("add field"),
       onClick: handleAdd
@@ -1962,7 +1967,7 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
 
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerSpacing }) => {
+var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }) => {
   var _effect = _useSignals14();
   try {
     const { t } = useTranslation8(translationKey);
@@ -2036,7 +2041,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
       props.referenceSchema
     ]);
     const handleValidate = useCallback9(({ property }) => {
-      if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
+      if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
         return [
           {
             path: "property",
@@ -2045,7 +2050,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
         ];
       }
     }, [
-      view.fields,
+      projection.fields,
       field
     ]);
     const handleSave = useCallback9((props2) => {
@@ -2097,7 +2102,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
         props
       }, {
         F: __dxlog_file4,
-        L: 183,
+        L: 173,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2135,13 +2140,10 @@ import { Callout, IconButton as IconButton4, useTranslation as useTranslation9 }
 import { List as List2 } from "@dxos/react-ui-list";
 import { cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
 import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
-import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
+import { FieldSchema, VIEW_FIELD_LIMIT, ProjectionModel } from "@dxos/schema";
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = Schema2.Struct({
-  name: Schema2.String.annotations({
-    title: "View"
-  }),
   typename: Format.URL.annotations({
     title: "Typename"
   })
@@ -2152,22 +2154,21 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     const { t } = useTranslation9(translationKey);
     const projection = useMemo8(() => {
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-      return new ViewProjection(jsonSchema, view);
+      return new ProjectionModel(jsonSchema, view.projection);
     }, [
       schema,
-      view
+      view.projection
     ]);
     const [field, setField] = useState6();
     const readonly = _readonly || !isMutable(schema);
     const viewValues = useMemo8(() => {
       return {
-        name: view.name,
         // TODO(burdon): Need to warn user of possible consequences of editing.
         // TODO(burdon): Settings should have domain name owned by user.
         typename: view.query.typename
       };
     }, [
-      view
+      view.query.typename
     ]);
     const handleSelect = useCallback10((field2) => {
       if (readonly) {
@@ -2180,7 +2181,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     const handleAdd = useCallback10(() => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 92,
+        L: 88,
         S: void 0,
         A: [
           "!readonly",
@@ -2191,13 +2192,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       setField(field2);
     }, [
       schema,
-      view,
+      projection,
       readonly
     ]);
-    const handleUpdate = useCallback10(({ name, typename }) => {
+    const handleUpdate = useCallback10(({ typename }) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 99,
+        L: 95,
         S: void 0,
         A: [
           "!readonly",
@@ -2205,23 +2206,19 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
         ]
       });
       requestAnimationFrame(() => {
-        if (view.name !== name) {
-          view.name = name;
-        }
         if (view.query.typename !== typename && !readonly) {
           onTypenameChanged?.(typename);
         }
       });
     }, [
-      schema,
-      view,
+      view.query.typename,
       onTypenameChanged,
       readonly
     ]);
     const handleDelete = useCallback10((fieldId) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 115,
+        L: 107,
         S: void 0,
         A: [
           "!readonly",
@@ -2233,7 +2230,6 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       }
       onDelete?.(fieldId);
     }, [
-      schema,
       field,
       onDelete,
       readonly
@@ -2241,7 +2237,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     const handleMove = useCallback10((fromIndex, toIndex) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 127,
+        L: 119,
         S: void 0,
         A: [
           "!readonly",
@@ -2249,14 +2245,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
         ]
       });
       const fields = [
-        ...view.fields
+        ...view.projection.fields
       ];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      view.fields = fields;
+      view.projection.fields = fields;
     }, [
-      schema,
-      view.fields,
+      view.projection.fields,
       readonly
     ]);
     const handleClose = useCallback10(() => setField(void 0), []);
@@ -2294,7 +2289,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     }, /* @__PURE__ */ React15.createElement("label", {
       className: mx9(inputTextLabel)
     }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
-      items: view.fields,
+      items: view.projection.fields,
       isItem: Schema2.is(FieldSchema),
       getId: (field2) => field2.id,
       readonly,
@@ -2317,10 +2312,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       "data-testid": "hide-field-button",
       icon: "ph--eye-slash--regular",
       // TDOO(burdon): Is this the correct test?
-      disabled: view.fields.length <= 1,
+      disabled: view.projection.fields.length <= 1,
       onClick: () => handleHide(field2.id)
     }), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
-      disabled: view.fields.length <= 1,
+      disabled: view.projection.fields.length <= 1,
       onClick: () => handleDelete(field2.id)
     })))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("label", {
       className: mx9(inputTextLabel)
@@ -2343,7 +2338,6 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       "data-testid": "show-field-button"
     }))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
       key: field.id,
-      view,
       projection,
       field,
       registry,
@@ -2356,7 +2350,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       label: t("button add property"),
       onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
-      disabled: view.fields.length >= VIEW_FIELD_LIMIT,
+      disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
       classNames: "flex is-full"
     })));
   } finally {