@dxos/react-ui-form 0.8.4-main.72ec0f3 → 0.8.4-main.7ace549

package/dist/lib/browser/index.mjs

@@ -8,7 +8,7 @@ var translations = [
         "hidden fields label": "Hidden Fields",
         "empty readonly ref field label": "(none)",
         // TODO(burdon): Standardize field/property.
-        "add property button": "Add property",
+        "add property button label": "Add property",
         "field property label": "Property",
         "field property placeholder": "Property name",
         "field format label": "Type",
@@ -25,7 +25,8 @@ var translations = [
         "ref field placeholder_one": "Select\u2026",
         "ref field placeholder_other": "Select items\u2026",
         // TODO(burdon): Factor out?
-        "save button": "Save",
+        "cancel button label": "Cancel",
+        "save button label": "Save",
         // FormatEnum
         "format boolean": "Boolean",
         "format currency": "Currency",
@@ -65,8 +66,8 @@ var translations = [
         "select option delete": "Delete",
         "select option add": "Add option",
         // System schema message.
-        "system schema title": "System record type",
-        "system schema description": "This is a system record type and cannot be modified, though the view can still be configured."
+        "system schema title": "System type",
+        "system schema description": "This is a system type and cannot be modified, though the view can still be configured."
       }
     }
   }
@@ -215,7 +216,7 @@ var ControlFrameItem = ({ title, description, children }) => {
 // src/components/FieldEditor/FieldEditor.tsx
 import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
 import React14, { useCallback as useCallback12, useEffect as useEffect8, useMemo as useMemo7, useState as useState6 } from "react";
-import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo/internal";
+import { Format as Format5, FormatEnums, formatToType } from "@dxos/echo/internal";
 import { log as log3 } from "@dxos/log";
 import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
@@ -953,7 +954,6 @@ var flatMap = (errors) => {
 // src/hooks/useRefQueryLookupHandler.ts
 import { useCallback as useCallback5 } from "react";
 import { Obj } from "@dxos/echo";
-import { getObjectDXN } from "@dxos/echo/internal";
 import { Filter } from "@dxos/react-client/echo";
 import { isNonNullable } from "@dxos/util";
 var useRefQueryLookupHandler = ({ space }) => {
@@ -964,7 +964,7 @@ var useRefQueryLookupHandler = ({ space }) => {
     const query = space.db.query(Filter.typename(typeInfo.typename));
     const { objects } = await query.run();
     return objects.map((object) => {
-      const dxn = getObjectDXN(object);
+      const dxn = Obj.getDXN(object);
       if (!dxn) {
         return void 0;
       }
@@ -1116,14 +1116,14 @@ var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
     }, onCancel && !readonly && /* @__PURE__ */ React8.createElement(IconButton2, {
       "data-testid": "cancel-button",
       icon: "ph--x--regular",
-      label: t("cancel button"),
+      label: t("cancel button label"),
       onClick: onCancel
     }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
       type: "submit",
       "data-testid": "save-button",
       disabled: !canSave,
       icon: "ph--check--regular",
-      label: t("save button"),
+      label: t("save button label"),
       onClick: handleSave
     }));
   } finally {
@@ -1144,7 +1144,7 @@ import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isTruthy } from "@dxos/util";
 
 // src/util/field.ts
-import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo/internal";
+import { Format, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo/internal";
 var parseValue = ({ type, format, value: value2 }) => {
   if (value2 === void 0 || value2 === null || value2 === "") {
     return void 0;
@@ -1179,26 +1179,26 @@ var parseValue = ({ type, format, value: value2 }) => {
     return parseScalar(type);
   }
   switch (format) {
-    case FormatEnum.Boolean:
+    case Format.TypeFormat.Boolean:
       return parseScalar(TypeEnum.Boolean);
-    case FormatEnum.Number:
-    case FormatEnum.Percent:
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.Percent:
+    case Format.TypeFormat.Currency:
       return parseScalar(TypeEnum.Number);
-    case FormatEnum.String:
-    case FormatEnum.Markdown: {
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Markdown: {
       return parseScalar(TypeEnum.String);
     }
-    case FormatEnum.Ref:
-      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp: {
+    case Format.TypeFormat.Ref:
+      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp: {
       const date = new Date(value2);
       return isNaN(date.getTime()) ? null : date;
     }
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       if (typeof value2 === "string") {
         const cleaned = value2.replace(/[^0-9.,-]+/g, "");
         const parts = cleaned.split(",");
@@ -1225,23 +1225,23 @@ var parseValue = ({ type, format, value: value2 }) => {
 };
 var cellClassesForFieldType = ({ type, format }) => {
   switch (format || type) {
-    case FormatEnum.Markdown:
+    case Format.TypeFormat.Markdown:
       return void 0;
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp:
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Duration:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp:
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Duration:
       return [
         "font-mono",
         "text-right"
       ];
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Currency:
       return [
         "text-right"
       ];
-    case FormatEnum.JSON:
-    case FormatEnum.DID:
+    case Format.TypeFormat.JSON:
+    case Format.TypeFormat.DID:
       return [
         "font-mono"
       ];
@@ -1266,7 +1266,7 @@ var pathNotUniqueError = (path) => ({
 
 // src/util/formatting.ts
 import { format as formatDate } from "date-fns/format";
-import { FormatEnum as FormatEnum2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
+import { Format as Format2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
 var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
   const formatScalar = (type2) => {
     switch (type2) {
@@ -1286,20 +1286,20 @@ var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
     return formatScalar(type);
   }
   switch (format) {
-    case FormatEnum2.Boolean: {
+    case Format2.TypeFormat.Boolean: {
       return formatScalar(TypeEnum2.Boolean);
     }
-    case FormatEnum2.Number: {
+    case Format2.TypeFormat.Number: {
       return formatScalar(TypeEnum2.Number);
     }
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
       return formatScalar(TypeEnum2.String);
     }
-    case FormatEnum2.Percent: {
+    case Format2.TypeFormat.Percent: {
       return `${value2 * 100}%`;
     }
-    case FormatEnum2.Currency: {
+    case Format2.TypeFormat.Currency: {
       return value2.toLocaleString(locale, {
         style: "currency",
         currency: "USD",
@@ -1307,28 +1307,28 @@ var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
         maximumFractionDigits: 2
       });
     }
-    case FormatEnum2.Date: {
+    case Format2.TypeFormat.Date: {
       try {
         return formatDate(new Date(value2), "yyyy-MM-dd");
       } catch (error) {
         return "Invalid Date";
       }
     }
-    case FormatEnum2.Time: {
+    case Format2.TypeFormat.Time: {
       try {
         return formatDate(new Date(value2), "HH:mm:ss");
       } catch (error) {
         return "Invalid Time";
       }
     }
-    case FormatEnum2.DateTime: {
+    case Format2.TypeFormat.DateTime: {
       try {
         return formatDate(new Date(value2), "yyyy-MM-dd HH:mm:ss");
       } catch (error) {
         return "Invalid DateTime";
       }
     }
-    case FormatEnum2.GeoPoint: {
+    case Format2.TypeFormat.GeoPoint: {
       if (value2 === null || value2 === void 0) {
         return "";
       }
@@ -1362,31 +1362,31 @@ var formatForEditing = ({ type, format, value: value2, locale = void 0 }) => {
     return formatScalar(type);
   }
   switch (format) {
-    case FormatEnum2.Boolean:
-    case FormatEnum2.Number:
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
+    case Format2.TypeFormat.Boolean:
+    case Format2.TypeFormat.Number:
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
       return formatScalar(type);
     }
-    case FormatEnum2.Percent: {
+    case Format2.TypeFormat.Percent: {
       return String(value2 * 100);
     }
-    case FormatEnum2.Currency: {
+    case Format2.TypeFormat.Currency: {
       return String(value2);
     }
-    case FormatEnum2.DateTime: {
+    case Format2.TypeFormat.DateTime: {
       const date = new Date(value2);
       return date.toISOString();
     }
-    case FormatEnum2.Date: {
+    case Format2.TypeFormat.Date: {
       const date = new Date(value2);
       return date.toISOString().split("T")[0];
     }
-    case FormatEnum2.Time: {
+    case Format2.TypeFormat.Time: {
       const date = new Date(value2);
       return date.toISOString().split("T")[1].split(".")[0];
     }
-    case FormatEnum2.GeoPoint: {
+    case Format2.TypeFormat.GeoPoint: {
       if (value2 === null || value2 === void 0) {
         return "";
       }
@@ -1403,7 +1403,7 @@ var formatForEditing = ({ type, format, value: value2, locale = void 0 }) => {
 };
 
 // src/util/refs.ts
-import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo/internal";
+import { Format as Format3, ReferenceAnnotationId } from "@dxos/echo/internal";
 import { findAnnotation } from "@dxos/effect";
 
 // src/util/schema.ts
@@ -1429,7 +1429,7 @@ var getRefProps = (property) => {
       }
     }
   }
-  if (format === FormatEnum3.Ref) {
+  if (format === Format3.TypeFormat.Ref) {
     return {
       ast,
       isArray: false
@@ -1472,7 +1472,9 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       if (!typeLiteral) {
         return {};
       }
-      return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
+      return Object.fromEntries(getSchemaProperties(typeLiteral, {}, {
+        form: true
+      }).map((prop) => [
         prop.name,
         prop.defaultValue
       ]));
@@ -1545,12 +1547,12 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
 };
 
 // src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo/internal";
+import { Format as Format4 } from "@dxos/echo/internal";
 var getInputComponent = (type, format) => {
   switch (format) {
-    case FormatEnum4.GeoPoint:
+    case Format4.TypeFormat.GeoPoint:
       return GeoPointInput;
-    case FormatEnum4.Markdown:
+    case Format4.TypeFormat.Markdown:
       return MarkdownInput;
   }
   switch (type) {
@@ -2006,7 +2008,9 @@ var FormFields = /* @__PURE__ */ forwardRef2(({ classNames, schema, path, filter
   try {
     const values = useFormValues(path);
     const properties = useMemo6(() => {
-      const props2 = getSchemaProperties2(schema.ast, values);
+      const props2 = getSchemaProperties2(schema.ast, values, {
+        form: true
+      });
       if (projection) {
         const fieldProjections = projection.getFieldProjections();
         const hiddenProperties = new Set(projection.getHiddenProperties());
@@ -2258,7 +2262,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
     const custom = useMemo7(() => ({
       ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
-        options: FormatEnums.filter((value2) => value2 !== FormatEnum5.None).map((value2) => ({
+        options: FormatEnums.filter((value2) => value2 !== Format5.TypeFormat.None).map((value2) => ({
           value: value2,
           label: t(`format ${value2}`)
         }))
@@ -2271,7 +2275,9 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       }),
       ["referencePath"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
-        options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
+        options: referenceSchema ? getSchemaProperties3(referenceSchema.ast, {}, {
+          form: true
+        }).sort(sortProperties).map((p) => ({
           value: p.name
         })) : []
       }),
@@ -2324,7 +2330,7 @@ import * as Option from "effect/Option";
 import * as Schema2 from "effect/Schema";
 import React15, { forwardRef as forwardRef3, useCallback as useCallback13, useImperativeHandle, useMemo as useMemo8, useState as useState7 } from "react";
 import { QueryAST } from "@dxos/echo";
-import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo/internal";
+import { EchoSchema, Format as Format6, isMutable, toJsonSchema } from "@dxos/echo/internal";
 import { Filter as Filter2, Query } from "@dxos/echo-db";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { Callout, IconButton as IconButton4, Input as Input8, useTranslation as useTranslation10 } from "@dxos/react-ui";
@@ -2359,23 +2365,15 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     }), Match.orElse(() => void 0));
     const viewSchema = useMemo8(() => {
       const base = Schema2.Struct({
-        query: mode === "schema" ? Format.URL.annotations({
+        query: mode === "schema" ? Format6.URL.annotations({
           title: "Record type"
         }) : QueryAST.Query.annotations({
           title: "Query"
         })
       });
-      if (mode === "query" || mode === "named-query") {
-        const name = Schema2.Struct({
-          name: Schema2.optional(Schema2.String.annotations({
-            title: "Name"
-          }))
-        });
+      if (mode === "tag") {
         return Schema2.Struct({
-          ...mode === "named-query" ? {
-            ...name.fields,
-            ...base.fields
-          } : base.fields,
+          ...base.fields,
           target: Schema2.optional(Schema2.String.annotations({
             title: "Target Queue"
           }))
@@ -2386,11 +2384,9 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       mode
     ]);
     const viewValues = useMemo8(() => ({
-      name: view.name,
       query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
       target: queueTarget
     }), [
-      view.name,
       mode,
       view.query.ast,
       queueTarget
@@ -2403,7 +2399,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     const handleAdd = useCallback13(() => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 134,
+        L: 129,
         S: void 0,
         A: [
           "!readonly",
@@ -2418,26 +2414,12 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       readonly
     ]);
     const handleUpdate = useCallback13((values) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 141,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
       requestAnimationFrame(() => {
-        if ("name" in values && view.name !== values.name) {
-          view.name = values.name;
-          return;
-        }
         const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
         onQueryChanged?.(query, values.target);
       });
     }, [
       onQueryChanged,
-      readonly,
       view,
       queueTarget,
       mode
@@ -2445,7 +2427,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     const handleDelete = useCallback13((fieldId) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 157,
+        L: 146,
         S: void 0,
         A: [
           "!readonly",
@@ -2464,7 +2446,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     const handleMove = useCallback13((fromIndex, toIndex) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 169,
+        L: 158,
         S: void 0,
         A: [
           "!readonly",
@@ -2494,7 +2476,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     }, [
       projectionModel
     ]);
-    const custom = useMemo8(() => mode === "query" ? customFields({
+    const custom = useMemo8(() => mode === "tag" ? customFields({
       types,
       tags
     }) : void 0, [
@@ -2505,7 +2487,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: mx7(classNames)
-    }, schemaReadonly && mode === "schema" && /* @__PURE__ */ React15.createElement(Callout.Root, {
+    }, schemaReadonly && !readonly && /* @__PURE__ */ React15.createElement(Callout.Root, {
       valence: "info",
       classNames: [
         "mlb-cardSpacingBlock",
@@ -2515,7 +2497,6 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       autoSave: true,
       schema: viewSchema,
       values: viewValues,
-      readonly: readonly ? "disabled-input" : false,
       onSave: handleUpdate,
       outerSpacing,
       Custom: custom
@@ -2546,7 +2527,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         role: "none",
         className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
       }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
-        disabled: readonly
+        disabled: readonly || schemaReadonly
       }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
         classNames: hidden && "text-subdued",
         onClick: () => handleToggleField(field)
@@ -2557,7 +2538,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         autoHide: false,
         disabled: readonly || !hidden && projectionModel.fields.length <= 1,
         onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-      }), mode === "schema" && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
+      }), !readonly && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
         label: t("delete field label"),
         autoHide: false,
         disabled: readonly || schemaReadonly || view.projection.fields.length <= 1,
@@ -2571,7 +2552,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         }),
         icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
         onClick: () => handleToggleField(field)
-      }))), expandedField === field.id && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
+      }))), expandedField === field.id && !readonly && /* @__PURE__ */ React15.createElement("div", {
         role: "none",
         className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
       }, /* @__PURE__ */ React15.createElement(FieldEditor, {
@@ -2581,12 +2562,12 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         registry,
         onSave: handleClose
       })));
-    }))))), !readonly && !expandedField && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
+    }))))), !readonly && !expandedField && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ React15.createElement(IconButton4, {
       icon: "ph--plus--regular",
-      label: t("add property button"),
+      label: t("add property button label"),
       onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
       disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,