@dxos/react-ui-form 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.a4bbb77",
+  "version": "0.8.4-main.ae835ea",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,51 +32,50 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.a4bbb77",
-    "@dxos/debug": "0.8.4-main.a4bbb77",
-    "@dxos/echo": "0.8.4-main.a4bbb77",
-    "@dxos/echo-db": "0.8.4-main.a4bbb77",
-    "@dxos/echo-query": "0.8.4-main.a4bbb77",
-    "@dxos/effect": "0.8.4-main.a4bbb77",
-    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
-    "@dxos/keys": "0.8.4-main.a4bbb77",
-    "@dxos/invariant": "0.8.4-main.a4bbb77",
-    "@dxos/live-object": "0.8.4-main.a4bbb77",
-    "@dxos/log": "0.8.4-main.a4bbb77",
-    "@dxos/react-client": "0.8.4-main.a4bbb77",
-    "@dxos/lit-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-components": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-list": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-editor": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-pickers": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-stack": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-types": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-searchlist": "0.8.4-main.a4bbb77",
-    "@dxos/schema": "0.8.4-main.a4bbb77",
-    "@dxos/util": "0.8.4-main.a4bbb77"
+    "@dxos/echo": "0.8.4-main.ae835ea",
+    "@dxos/echo-db": "0.8.4-main.ae835ea",
+    "@dxos/async": "0.8.4-main.ae835ea",
+    "@dxos/echo-query": "0.8.4-main.ae835ea",
+    "@dxos/effect": "0.8.4-main.ae835ea",
+    "@dxos/invariant": "0.8.4-main.ae835ea",
+    "@dxos/keys": "0.8.4-main.ae835ea",
+    "@dxos/lit-ui": "0.8.4-main.ae835ea",
+    "@dxos/debug": "0.8.4-main.ae835ea",
+    "@dxos/react-client": "0.8.4-main.ae835ea",
+    "@dxos/log": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-components": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-editor": "0.8.4-main.ae835ea",
+    "@dxos/live-object": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-list": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
+    "@dxos/util": "0.8.4-main.ae835ea",
+    "@dxos/schema": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-searchlist": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-types": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-pickers": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~19.2.0",
-    "@types/react-dom": "~19.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "fast-check": "^3.19.0",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.a4bbb77",
-    "@dxos/random": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.a4bbb77",
-    "@dxos/storybook-utils": "0.8.4-main.a4bbb77"
+    "@dxos/echo-signals": "0.8.4-main.ae835ea",
+    "@dxos/random": "0.8.4-main.ae835ea",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.ae835ea",
+    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ControlSection/ControlSection.tsx

@@ -22,7 +22,7 @@ export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
   return (
-    <StackItem.Content classNames='block overflow-y-auto [--control-spacing:var(--dx-trimMd)]'>
+    <StackItem.Content scrollable classNames='[--control-spacing:var(--dx-trimMd)]'>
       <div role='none' className={mx('pli-cardSpacingInline pbe-trimLg', classNames)} {...props}>
         {children}
       </div>

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
-import { createEchoSchema } from '@dxos/live-object/testing';
+import { createEchoSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ProjectionModel } from '@dxos/schema';

package/src/components/FieldEditor/FieldEditor.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo/internal';
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import {

package/src/components/Form/ArrayField.tsx

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
+import * as Function from 'effect/Function';
+import * as SchemaAST from 'effect/SchemaAST';
+import * as String from 'effect/String';
 import React, { Fragment, useCallback } from 'react';
 
 import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
@@ -34,7 +35,7 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
   //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
   const values = (useFormValues(path ?? []) ?? []) as any[];
   invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
-  const label = title ?? pipe(name, capitalize);
+  const label = title ?? Function.pipe(name, String.capitalize);
 
   const elementType = findArrayElementType(ast);
 

package/src/components/Form/Form.stories.tsx

@@ -3,13 +3,13 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
 import { ContactType } from '@dxos/client/testing';
 import { type Type } from '@dxos/echo';
-import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
+import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
+import { live } from '@dxos/echo/internal';
 import { Tooltip } from '@dxos/react-ui';
 import { withSurfaceVariantsLayout, withTheme } from '@dxos/react-ui/testing';
 import { Testing } from '@dxos/schema/testing';

package/src/components/Form/Form.tsx

@@ -3,15 +3,15 @@
 //
 
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { type Schema } from 'effect';
-import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
+import type * as Schema from 'effect/Schema';
+import React, { type ReactElement, useCallback, useEffect, useRef } from 'react';
 
-import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, type PropertyKey } from '@dxos/echo/internal';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
 import { type ProjectionModel, type SchemaProperty } from '@dxos/schema';
 
-import { type FormOptions } from '../../hooks';
+import { type FormHandler, type FormOptions } from '../../hooks';
 
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
@@ -41,6 +41,7 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
   onCancel?: () => void;
 }> &
   Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'> &
+  // TODO(wittjosiah): This needs to support different ref field options per field.
   FormFieldsProps;
 
 export const Form = <T extends BaseObject>({
@@ -72,7 +73,14 @@ export const Form = <T extends BaseObject>({
   }, [autoFocus]);
 
   // TODO(burdon): Name?
-  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+  const handleValid = useCallback(
+    async (values: any, meta: { changed: FormHandler<T>['changed'] }) => {
+      if (autoSave) {
+        await onSave?.(values, meta);
+      }
+    },
+    [autoSave, onSave],
+  );
 
   return (
     <FormProvider

package/src/components/Form/FormContent.tsx

@@ -2,8 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema, SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import * as StringEffect from 'effect/String';
 import React, { forwardRef, useMemo } from 'react';
 
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
@@ -60,7 +62,7 @@ export const FormField = ({
   const { ast, name, type, format, title, description, options, examples, array } = property;
   const inputProps = useInputProps(path);
 
-  const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
+  const label = useMemo(() => title ?? Function.pipe(name, StringEffect.capitalize), [title, name]);
   const placeholder = useMemo(
     () => (examples?.length ? `Example: "${examples[0]}"` : description),
     [examples, description],

package/src/components/Form/FormContext.tsx

@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 
 import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo-schema';
+import { type BaseObject, getValue } from '@dxos/echo/internal';
 import { type SimpleType, createJsonPath } from '@dxos/effect';
 
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';
@@ -92,7 +92,7 @@ export const FormProvider = ({
         }
       }
     },
-    [form, autoSave],
+    [form.canSave, form.formIsValid, form.handleSave, autoSave],
   );
 
   useEffect(() => {

package/src/components/Form/Input.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type FormatEnum } from '@dxos/echo/internal';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
 import { labelSpacing } from '@dxos/react-ui-stack';

package/src/components/Form/RefField.tsx

@@ -2,8 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema, type SchemaAST } from 'effect';
-import React, { type KeyboardEvent, type MouseEvent, useCallback, useMemo, useState } from 'react';
+import '@dxos/lit-ui/dx-tag-picker.pcss';
+
+import type * as Schema from 'effect/Schema';
+import type * as SchemaAST from 'effect/SchemaAST';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   type EchoSchema,
@@ -12,21 +15,20 @@ import {
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
   getTypeAnnotation,
-} from '@dxos/echo-schema';
+} from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
 import { type DxTagPickerItemClick } from '@dxos/lit-ui';
 import { DxAnchor, DxTagPickerItem } from '@dxos/lit-ui/react';
-import { Button, Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { PopoverCombobox } from '@dxos/react-ui-searchlist';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
 import { translationKey } from '../../translations';
+import { ObjectPicker } from '../ObjectPicker';
 
 import { TextInput } from './Defaults';
-import { Form } from './Form';
 import { InputHeader, type InputProps } from './Input';
 
 export type RefFieldProps = InputProps & {
@@ -70,55 +72,11 @@ export const RefField = ({
     () => (ast ? findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId) : undefined),
     [ast],
   );
-  const { options: availableOptions, loading: _loading } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
-
-  const [showForm, setShowForm] = useState(false);
-  const [searchString, setSearchString] = useState('');
-
-  const handleFormSave = useCallback(
-    (values: any) => {
-      onCreate?.(values);
-      setShowForm(false);
-      setSearchString('');
-    },
-    [refTypeInfo, onCreate],
-  );
-
-  const handleFormCancel = useCallback(() => {
-    setShowForm(false);
-    setSearchString('');
-  }, []);
-
-  // TODO(thure): The following workarounds are necessary because `onSelect` is called after the Popover is already
-  //  closed. Augment/refactor CmdK, if possible, to facilitate stopping event default & propagation.
-
-  const handleClick = useCallback(
-    (event: MouseEvent) => {
-      if (createSchema && (event.target as HTMLElement).closest('[data-value="__create__"]')) {
-        event.stopPropagation();
-        event.preventDefault();
-        setShowForm(true);
-      }
-    },
-    [createSchema],
-  );
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (
-        event.key === 'Enter' &&
-        createSchema &&
-        (event.currentTarget as HTMLElement).querySelector(
-          '[role="option"][aria-selected="true"][data-value="__create__"]',
-        )
-      ) {
-        event.stopPropagation();
-        event.preventDefault();
-        setShowForm(true);
-      }
-    },
-    [createSchema],
-  );
+  const {
+    options: availableOptions,
+    update: updateOptions,
+    loading: _loading,
+  } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
 
   if ((refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename) || !onQueryRefOptions) {
     // If ref type is expando, fall back to taking a DXN in string format.
@@ -183,6 +141,14 @@ export const RefField = ({
     [availableOptions, array, onValueChange],
   );
 
+  const handleCreate = useCallback(
+    (values: any) => {
+      onCreate?.(values);
+      updateOptions();
+    },
+    [onCreate, updateOptions],
+  );
+
   if (!refTypeInfo) {
     return null;
   }
@@ -191,14 +157,6 @@ export const RefField = ({
 
   const items = handleGetValue();
   const selectedIds = useMemo(() => items.map((i: any) => i.id), [items]);
-  const labelById = useMemo(
-    () =>
-      availableOptions.reduce((acc: Record<string, string>, option) => {
-        acc[option.id.toLowerCase()] = option.label.toLowerCase();
-        return acc;
-      }, {}),
-    [availableOptions],
-  );
   const toggleSelect = useCallback(
     (id: string) => {
       if (array) {
@@ -231,8 +189,8 @@ export const RefField = ({
             ))
           )
         ) : (
-          <PopoverCombobox.Root>
-            <PopoverCombobox.Trigger asChild>
+          <ObjectPicker.Root>
+            <ObjectPicker.Trigger asChild>
               <Button variant='ghost' classNames='is-full text-start gap-2'>
                 <div role='none' className='grow'>
                   {items?.length ? (
@@ -258,56 +216,18 @@ export const RefField = ({
                 </div>
                 <Icon size={3} icon='ph--caret-down--bold' />
               </Button>
-            </PopoverCombobox.Trigger>
-            <PopoverCombobox.Content
-              filter={(value, search) =>
-                value === '__create__' || labelById[value]?.includes(search.toLowerCase()) ? 1 : 0
-              }
-              onClickCapture={handleClick}
-              onKeyDownCapture={handleKeyDown}
-            >
-              {showForm && createSchema ? (
-                <Popover.Viewport>
-                  <Form
-                    schema={createSchema}
-                    values={createInitialValuePath ? { [createInitialValuePath]: searchString } : {}}
-                    onSave={handleFormSave}
-                    onCancel={handleFormCancel}
-                    testId='create-referenced-object-form'
-                  />
-                </Popover.Viewport>
-              ) : (
-                <>
-                  <PopoverCombobox.Input
-                    placeholder={t('ref field combobox input placeholder')}
-                    value={searchString}
-                    onValueChange={(v) => setSearchString(v)}
-                    autoFocus
-                  />
-                  <PopoverCombobox.List>
-                    {availableOptions.map((option) => (
-                      <PopoverCombobox.Item
-                        key={option.id}
-                        value={option.id}
-                        onSelect={() => toggleSelect(option.id)}
-                        classNames='flex items-center gap-2'
-                      >
-                        <span className='grow'>{option.label}</span>
-                        {selectedIds.includes(option.id) && <Icon icon='ph--check--regular' />}
-                      </PopoverCombobox.Item>
-                    ))}
-                    {searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && (
-                      <PopoverCombobox.Item value='__create__' classNames='flex items-center gap-2'>
-                        <Icon icon={createOptionIcon} />
-                        {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: searchString })}
-                      </PopoverCombobox.Item>
-                    )}
-                  </PopoverCombobox.List>
-                </>
-              )}
-              <PopoverCombobox.Arrow />
-            </PopoverCombobox.Content>
-          </PopoverCombobox.Root>
+            </ObjectPicker.Trigger>
+            <ObjectPicker.Content
+              options={availableOptions}
+              selectedIds={selectedIds}
+              onSelect={toggleSelect}
+              createSchema={createSchema}
+              createOptionLabel={createOptionLabel}
+              createOptionIcon={createOptionIcon}
+              createInitialValuePath={createInitialValuePath}
+              onCreate={handleCreate}
+            />
+          </ObjectPicker.Root>
         )}
       </div>
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}

package/src/components/Form/custom/GeoPointInput.tsx

@@ -4,7 +4,7 @@
 
 import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { GeoLocation, type GeoPoint } from '@dxos/echo-schema';
+import { GeoLocation, type GeoPoint } from '@dxos/echo/internal';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 

package/src/components/Form/custom/SelectOptionsInput.stories.tsx

@@ -3,10 +3,10 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
-import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
+import { type SelectOption, SelectOptionSchema } from '@dxos/echo/internal';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../../translations';

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -4,7 +4,7 @@
 
 import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import { type SelectOption } from '@dxos/echo-schema';
+import { type SelectOption } from '@dxos/echo/internal';
 import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';

package/src/components/Form/factory.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum } from '@dxos/echo-schema';
+import { FormatEnum } from '@dxos/echo/internal';
 import { type SimpleType } from '@dxos/effect';
 
 import { GeoPointInput } from './custom';