@dxos/react-ui-form 0.8.2-staging.4d6ad0f → 0.8.2

package/dist/lib/browser/index.mjs

@@ -732,7 +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 { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
@@ -1135,6 +1135,7 @@ import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
 import React12, { useMemo as useMemo5 } from "react";
 import { createJsonPath as createJsonPath3, findNode as findNode3, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
@@ -1848,7 +1849,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     _effect.f();
   }
 };
-var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, lookupComponent, Custom }) => {
+var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lookupComponent, onQueryRefOptions }) => {
   var _effect = _useSignals12();
   try {
     const values = useFormValues(path);
@@ -1862,23 +1863,26 @@ var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, loo
       filter,
       sort
     ]);
-    return /* @__PURE__ */ React12.createElement("div", {
-      role: "form",
-      className: "is-full"
-    }, properties.map((property) => {
-      return /* @__PURE__ */ React12.createElement(FormField, {
-        key: property.name,
-        property,
-        path: [
-          ...path ?? [],
-          property.name
-        ],
-        readonly,
-        onQueryRefOptions,
-        lookupComponent,
-        Custom
-      });
-    }).filter(isNotFalsy));
+    return (
+      // TODO(burdon): Consistent padding (with composite forms).
+      /* @__PURE__ */ React12.createElement("div", {
+        role: "form",
+        className: mx6("p-2 is-full", classNames)
+      }, properties.map((property) => {
+        return /* @__PURE__ */ React12.createElement(FormField, {
+          key: property.name,
+          property,
+          path: [
+            ...path ?? [],
+            property.name
+          ],
+          readonly,
+          onQueryRefOptions,
+          lookupComponent,
+          Custom
+        });
+      }).filter(isNotFalsy))
+    );
   } finally {
     _effect.f();
   }
@@ -1915,7 +1919,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     }, /* @__PURE__ */ React13.createElement("div", {
       ref: formRef,
       role: "none",
-      className: mx6("flex flex-col gap-4", classNames),
+      className: mx7("flex flex-col gap-4", classNames),
       "data-testid": testId
     }, /* @__PURE__ */ React13.createElement(FormFields, {
       schema,
@@ -2107,7 +2111,7 @@ import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { Icon as Icon3, IconButton as IconButton4, Message, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
-import { ghostHover, inputTextLabel, mx as mx7 } from "@dxos/react-ui-theme";
+import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
@@ -2245,7 +2249,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     ]);
     return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: mx7("overflow-y-auto", classNames)
+      className: mx8("overflow-y-auto", classNames)
     }, /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: "p-2"
@@ -2272,7 +2276,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       role: "none",
       className: "p-2"
     }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx7(inputTextLabel)
+      className: mx8(inputTextLabel)
     }, t("fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
       items: view.fields,
       isItem: Schema2.is(FieldSchema),
@@ -2289,7 +2293,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     }, fields?.map((field2) => /* @__PURE__ */ React15.createElement(List2.Item, {
       key: field2.id,
       item: field2,
-      classNames: mx7(grid, ghostHover, !immutable && "cursor-pointer")
+      classNames: mx8(grid, ghostHover, !immutable && "cursor-pointer")
     }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
       onClick: () => handleSelect(field2)
     }, field2.path), /* @__PURE__ */ React15.createElement("div", {
@@ -2306,7 +2310,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       role: "none",
       className: "p-2"
     }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx7(inputTextLabel)
+      className: mx8(inputTextLabel)
     }, t("hidden fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
       items: hiddenProperties,
       isItem: (item) => typeof item === "string",
@@ -2317,7 +2321,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     }, properties?.map((property) => /* @__PURE__ */ React15.createElement(List2.Item, {
       key: property,
       item: property,
-      classNames: mx7(grid, ghostHover, !immutable && "cursor-pointer")
+      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)