@dxos/react-ui-form 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -51,24 +51,24 @@
     "@codemirror/view": "^6.43.13",
     "@effect/atom-react": "4.0.0",
     "date-fns": "^3.6.0",
-    "@dxos/async": "0.13.0",
-    "@dxos/echo-doc": "0.13.0",
-    "@dxos/echo": "0.13.0",
-    "@dxos/echo-react": "0.13.0",
-    "@dxos/effect": "0.13.0",
-    "@dxos/invariant": "0.13.0",
-    "@dxos/keys": "0.13.0",
-    "@dxos/lit-ui": "0.13.0",
-    "@dxos/log": "0.13.0",
-    "@dxos/react-hooks": "0.13.0",
-    "@dxos/react-ui-editor": "0.13.0",
-    "@dxos/react-ui-list": "0.13.0",
-    "@dxos/react-ui-query": "0.13.0",
-    "@dxos/schema": "0.13.0",
-    "@dxos/ui": "0.13.0",
-    "@dxos/ui-editor": "0.13.0",
-    "@dxos/ui-types": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@dxos/async": "0.14.0",
+    "@dxos/echo": "0.14.0",
+    "@dxos/echo-react": "0.14.0",
+    "@dxos/echo-doc": "0.14.0",
+    "@dxos/effect": "0.14.0",
+    "@dxos/invariant": "0.14.0",
+    "@dxos/keys": "0.14.0",
+    "@dxos/log": "0.14.0",
+    "@dxos/react-hooks": "0.14.0",
+    "@dxos/react-ui-editor": "0.14.0",
+    "@dxos/react-ui-list": "0.14.0",
+    "@dxos/react-ui-query": "0.14.0",
+    "@dxos/schema": "0.14.0",
+    "@dxos/lit-ui": "0.14.0",
+    "@dxos/ui-editor": "0.14.0",
+    "@dxos/ui": "0.14.0",
+    "@dxos/util": "0.14.0",
+    "@dxos/ui-types": "0.14.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.0",
@@ -78,18 +78,18 @@
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.2.2",
-    "@dxos/react-client": "0.13.0",
-    "@dxos/react-ui": "0.13.0",
-    "@dxos/react-ui-syntax-highlighter": "0.13.0",
-    "@dxos/types": "0.13.0",
-    "@dxos/ui-theme": "0.13.0"
+    "@dxos/react-client": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/react-ui-syntax-highlighter": "0.14.0",
+    "@dxos/types": "0.14.0",
+    "@dxos/ui-theme": "0.14.0"
   },
   "peerDependencies": {
     "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.13.0",
-    "@dxos/ui-theme": "^0.13.0"
+    "@dxos/react-ui": "^0.14.0",
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form.tsx

@@ -72,7 +72,14 @@ export const FormViewport = Util.composable<HTMLDivElement, FormViewportProps>(
         </Panel.Body>
       </Panel.Root>
     ) : (
-      <Layout.Container {...props} gutter={gutter ?? defaultGutter ?? 'sm'} width={documentWidth} ref={forwardedRef}>
+      // Padded on the block axis as the scrolling form is, so a form in a host that scrolls it still ends a gutter in.
+      <Layout.Container
+        {...props}
+        gutter={gutter ?? defaultGutter ?? 'sm'}
+        width={documentWidth}
+        padBlock
+        ref={forwardedRef}
+      >
         {children}
       </Layout.Container>
     );

package/src/components/ObjectPicker.tsx

@@ -144,6 +144,8 @@ export const ObjectPicker = ({
     <Combobox.Root
       items={items}
       loading={loading}
+      // Pinned to the field's width: object labels (or URIs) can be long enough to widen the popup past the form.
+      positioning={{ sameWidth: true }}
       open={open}
       onOpenChange={handleOpenChange}
       value={value ? [value] : []}

package/src/components/fields/RefField.tsx

@@ -32,6 +32,7 @@ export const RefField = ({
   presentation,
   getValue,
   onValueChange,
+  onBlur,
   createInitialValuePath,
   createFieldMap,
   createOptionIcon,
@@ -67,10 +68,15 @@ export const RefField = ({
           const created = await create(values);
           if (created) {
             onValueChange(type, Ref.make(created));
+            onBlur();
           }
         })
       }
-      onSelect={(id) => onValueChange(type, id ? Ref.fromURI(URI.make(id)) : undefined)}
+      // A pick is the whole edit, so it commits as a select does; without the blur an auto-saving form never saves it.
+      onSelect={(id) => {
+        onValueChange(type, id ? Ref.fromURI(URI.make(id)) : undefined);
+        onBlur();
+      }}
     />
   );
 };

package/src/hooks/useFormHandler.test.ts

@@ -5,7 +5,9 @@
 import { act, renderHook } from '@testing-library/react';
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
-import { describe, test } from 'vitest';
+import { describe, onTestFinished, test } from 'vitest';
+
+import { type LogEntry, type LogProcessor, log } from '@dxos/log';
 
 import { useFormHandler } from './useFormHandler.ts';
 
@@ -101,3 +103,27 @@ describe('useFormHandler field overrides', () => {
     expect(result.current.isValid).toBe(true);
   });
 });
+
+describe('useFormHandler logging', () => {
+  test('never writes field values to the log', ({ expect }) => {
+    const entries: LogEntry[] = [];
+    const capture: LogProcessor = (_config, entry) => {
+      entries.push(entry);
+    };
+    onTestFinished(log.addProcessor(capture));
+
+    // Stands in for a pasted credential; any field may hold one, so no field's value may be logged.
+    const secret = 'placeholder-secret-0123456789';
+    const { result } = renderHook(() => useFormHandler<Values>({ schema, values: { name: 'Alice', city: 'NYC' } }));
+    act(() => result.current.onValueChange(['city'], stringAst, secret));
+    act(() => result.current.onValueChange(['name'], stringAst, ''));
+    expect(result.current.getValue(['city'])).toBe(secret);
+
+    const messages = entries.map((entry) => entry.message);
+    expect(messages).toContain('onValueChange');
+    expect(messages).toContain('validate');
+    for (const entry of entries) {
+      expect(JSON.stringify({ message: entry.message, context: entry.computedContext })).not.toContain(secret);
+    }
+  });
+});

package/src/hooks/useFormHandler.ts

@@ -170,7 +170,6 @@ export const useFormHandler = <T extends AnyProperties>({
       }
 
       let errors: ValidationError[] = validateSchema(schema, values) ?? [];
-      log('validate', { values, errors });
       if (errors.length === 0 && onValidate) {
         const validatedValues = values as T;
         errors = onValidate(validatedValues) ?? [];
@@ -178,6 +177,8 @@ export const useFormHandler = <T extends AnyProperties>({
 
       setErrors(flatMap(errors));
       const valid = errors.length === 0;
+      // Never log values or error messages: fields may hold secrets (passwords, API keys) and messages can echo them.
+      log('validate', { valid, errorPaths: errors.map((error) => error.path) });
       return valid;
     },
     [schema, onValidate],
@@ -303,7 +304,7 @@ export const useFormHandler = <T extends AnyProperties>({
 
   const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
     (path, type, value) => {
-      log('onValueChange', { path, value });
+      log('onValueChange', { path });
 
       const jsonPath = SchemaEx.createJsonPath(path);
       const pathArray = path;