@dxos/react-ui-form 0.8.2 → 0.8.3-main.7f5a14c

package/dist/lib/browser/index.mjs

@@ -732,6 +732,7 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
 import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
 import React13, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { cardSpacing } from "@dxos/react-ui-stack";
 import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
@@ -957,7 +958,7 @@ var flatMap = (errors) => {
 
 // packages/ui/react-ui-form/src/hooks/useRefQueryLookupHandler.ts
 import { useCallback as useCallback5 } from "react";
-import { getDXN } from "@dxos/echo-schema";
+import { getObjectDXN } from "@dxos/echo-schema";
 import { Filter } from "@dxos/react-client/echo";
 import { isNonNullable } from "@dxos/util";
 var useRefQueryLookupHandler = ({ space }) => {
@@ -968,7 +969,7 @@ var useRefQueryLookupHandler = ({ space }) => {
     const query = space.db.query(Filter.typename(typeInfo.typename));
     const { objects } = await query.run();
     return objects.map((object) => {
-      const dxn = getDXN(object);
+      const dxn = getObjectDXN(object);
       if (!dxn) {
         return void 0;
       }
@@ -1110,7 +1111,7 @@ var FormActions = ({ readonly, onCancel }) => {
     const { canSave, handleSave } = useFormContext();
     return /* @__PURE__ */ React9.createElement("div", {
       role: "none",
-      className: "flex [&_button]:grow gap-1"
+      className: "flex [&_button]:grow gap-1 mlb-3 last:mbe-0 first:mbs-0"
     }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
       "data-testid": "cancel-button",
       icon: "ph--x--regular",
@@ -1833,7 +1834,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode3(ast, SchemaAST4.isTypeLiteral);
       if (typeLiteral) {
         return /* @__PURE__ */ React12.createElement(React12.Fragment, null, !inline && /* @__PURE__ */ React12.createElement("h3", {
-          className: "text-lg mbs-2 mbe-1 first:mbs-0"
+          className: mx6("text-lg mlb-card-spacing-block first:mbs-0")
         }, label), /* @__PURE__ */ React12.createElement(FormFields, {
           schema: Schema.make(typeLiteral),
           path,
@@ -1867,7 +1868,7 @@ var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lo
       // TODO(burdon): Consistent padding (with composite forms).
       /* @__PURE__ */ React12.createElement("div", {
         role: "form",
-        className: mx6("p-2 is-full", classNames)
+        className: mx6("is-full", classNames)
       }, properties.map((property) => {
         return /* @__PURE__ */ React12.createElement(FormField, {
           key: property.name,
@@ -1889,7 +1890,7 @@ var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lo
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
+var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, flush, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
   var _effect = _useSignals13();
   try {
     const formRef = useRef3(null);
@@ -1919,7 +1920,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     }, /* @__PURE__ */ React13.createElement("div", {
       ref: formRef,
       role: "none",
-      className: mx7("flex flex-col gap-4", classNames),
+      className: mx7(!flush && cardSpacing, classNames),
       "data-testid": testId
     }, /* @__PURE__ */ React13.createElement(FormFields, {
       schema,
@@ -2250,13 +2251,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: mx8("overflow-y-auto", classNames)
-    }, /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: "p-2"
-    }, /* @__PURE__ */ React15.createElement("div", {
+    }, immutable && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "mbe-2"
-    }, immutable && /* @__PURE__ */ React15.createElement(Message.Root, {
+      className: "mbe-card-spacing-block"
+    }, /* @__PURE__ */ React15.createElement(Message.Root, {
       valence: "neutral",
       className: "rounded"
     }, /* @__PURE__ */ React15.createElement(Message.Title, null, /* @__PURE__ */ React15.createElement(Icon3, {
@@ -2269,12 +2267,12 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       values: viewValues,
       onSave: handleUpdate,
       classNames: "min-bs-0 overflow-y-auto"
-    })), /* @__PURE__ */ React15.createElement("div", {
+    }), /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: "min-bs-0 overflow-y-auto"
     }, /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "p-2"
+      className: "pli-card-spacing-inline mlb-card-spacing-block"
     }, /* @__PURE__ */ React15.createElement("label", {
       className: mx8(inputTextLabel)
     }, t("fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
@@ -2301,14 +2299,15 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     }, /* @__PURE__ */ React15.createElement(List2.ItemButton, {
       icon: "ph--eye-slash--regular",
       disabled: view.fields.length <= 1,
-      onClick: () => handleHide(field2.id)
+      onClick: () => handleHide(field2.id),
+      "data-testid": "hide-field-button"
     }), !immutable && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
       icon: "ph--trash--regular",
       disabled: view.fields.length <= 1,
       onClick: () => handleDelete(field2.id)
     }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "p-2"
+      className: "pli-card-spacing-inline mlb-card-spacing-block"
     }, /* @__PURE__ */ React15.createElement("label", {
       className: mx8(inputTextLabel)
     }, t("hidden fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
@@ -2324,7 +2323,8 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       classNames: mx8(grid, ghostHover, !immutable && "cursor-pointer")
     }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
       icon: "ph--eye--regular",
-      onClick: () => handleShow(property)
+      onClick: () => handleShow(property),
+      "data-testid": "show-field-button"
     }))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
       key: field.id,
       view,
@@ -2334,7 +2334,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       onSave: handleClose
     }), !readonly && !field && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "p-2"
+      className: "pli-card-spacing-chrome mlb-card-spacing-chrome"
     }, /* @__PURE__ */ React15.createElement(IconButton4, {
       icon: "ph--plus--regular",
       label: t("button add property"),