@dxos/react-ui-form 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

package/src/components/Form/RefField.tsx

@@ -2,29 +2,31 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type SchemaAST } from 'effect';
-import React, { 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,
   Expando,
   Ref,
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
-  type TypeAnnotation,
   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 } from '@dxos/lit-ui/react';
+import { DxAnchor, DxTagPickerItem } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
-import { PopoverCombobox } from '@dxos/react-ui-searchlist';
-import { TagPickerItem } from '@dxos/react-ui-tag-picker';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
-import { type MaybePromise, isNonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
 import { translationKey } from '../../translations';
+import { ObjectPicker } from '../ObjectPicker';
 
 import { TextInput } from './Defaults';
 import { InputHeader, type InputProps } from './Input';
@@ -32,10 +34,13 @@ import { InputHeader, type InputProps } from './Input';
 export type RefFieldProps = InputProps & {
   ast?: SchemaAST.AST;
   array?: boolean;
-  onQueryRefOptions?: QueryRefOptions;
   createOptionLabel?: [string, { ns: string }];
   createOptionIcon?: string;
-  onCreateFromQuery?: (type: TypeAnnotation, query: string) => MaybePromise<void>;
+  onCreate?: (values: any) => void;
+  createSchema?: Schema.Schema.AnyNoContext;
+  createInitialValuePath?: string;
+  onQueryRefOptions?: QueryRefOptions;
+  schema?: EchoSchema;
 };
 
 // TODO(thure): Is this a standard that should be better canonized?
@@ -52,11 +57,13 @@ export const RefField = ({
   array,
   ast,
   getValue,
-  onBlur,
-  onQueryRefOptions,
   createOptionLabel,
   createOptionIcon,
-  onCreateFromQuery,
+  onBlur,
+  onCreate,
+  createSchema,
+  createInitialValuePath,
+  onQueryRefOptions,
   onValueChange,
   ...restInputProps
 }: RefFieldProps) => {
@@ -65,7 +72,11 @@ export const RefField = ({
     () => (ast ? findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId) : undefined),
     [ast],
   );
-  const { options: availableOptions, loading: _loading } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
+  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.
@@ -130,6 +141,14 @@ export const RefField = ({
     [availableOptions, array, onValueChange],
   );
 
+  const handleCreate = useCallback(
+    (values: any) => {
+      onCreate?.(values);
+      updateOptions();
+    },
+    [onCreate, updateOptions],
+  );
+
   if (!refTypeInfo) {
     return null;
   }
@@ -138,15 +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 [query, setQuery] = useState('');
   const toggleSelect = useCallback(
     (id: string) => {
       if (array) {
@@ -179,13 +189,13 @@ 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 ? (
                     items?.map((item) => (
-                      <TagPickerItem
+                      <DxTagPickerItem
                         key={item.id}
                         itemId={item.id}
                         label={item.label}
@@ -206,44 +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
-              }
-            >
-              <PopoverCombobox.Input
-                placeholder={'Search...'}
-                value={query}
-                onValueChange={(v) => setQuery(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>
-                ))}
-                {query.length > 0 && createOptionLabel && createOptionIcon && onCreateFromQuery && (
-                  <PopoverCombobox.Item
-                    value='__create__'
-                    onSelect={() => onCreateFromQuery?.(refTypeInfo, query)}
-                    classNames='flex items-center gap-2'
-                  >
-                    <Icon icon={createOptionIcon} />
-                    {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })}
-                  </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

@@ -2,14 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 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 { withLayout, withTheme } from '@dxos/storybook-utils';
+import { type SelectOption, SelectOptionSchema } from '@dxos/echo/internal';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
@@ -49,8 +47,9 @@ const meta = {
   title: 'ui/react-ui-form/SelectOptionsInput',
   component: SelectOptionInput as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;

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';
@@ -121,7 +121,7 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
+              <div role='list' className='is-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item

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';

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -0,0 +1,207 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { Obj } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { Button } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Person } from '@dxos/types';
+
+import { translations } from '../../translations';
+
+import { ObjectPicker } from './ObjectPicker';
+
+faker.seed(1);
+
+const createPerson = () =>
+  Obj.make(Person.Person, {
+    fullName: faker.person.fullName(),
+  });
+
+const omitId = Schema.omit<any, any, ['id']>('id');
+const personSchema = omitId(Person.Person);
+
+// Mock functions for testing
+const mockHandleSelect = fn();
+const mockHandleCreate = fn();
+
+const DefaultStory = () => {
+  const { space } = useClientProvider();
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Create sample Person objects
+  useEffect(() => {
+    if (space) {
+      // Create some sample Person objects for testing
+      Array.from({ length: 10 }).forEach(() => {
+        space.db.add(createPerson());
+      });
+    }
+  }, [space]);
+
+  // Get all objects in the space (similar to BoardContainer)
+  const allObjects = useQuery(space, Filter.everything());
+
+  // Map objects to options format expected by ObjectPicker
+  const options = useMemo(
+    () =>
+      allObjects.map((obj) => ({
+        id: obj.id,
+        label: obj.fullName || obj.name || obj.title || obj.id,
+        hue: 'neutral' as const,
+      })),
+    [allObjects],
+  );
+
+  const handleCreateCallback = useCallback(
+    (values: any) => {
+      console.log('[on create]', values);
+      if (!space) return;
+      const newPerson = space.db.add(Obj.make(Person.Person, values));
+      mockHandleCreate(values);
+      return newPerson;
+    },
+    [space],
+  );
+
+  return (
+    <div className='p-4'>
+      <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
+        <ObjectPicker.Trigger asChild>
+          <Button variant='primary' data-testid='trigger'>
+            Select Person
+          </Button>
+        </ObjectPicker.Trigger>
+        <ObjectPicker.Content
+          options={options}
+          onSelect={mockHandleSelect}
+          createSchema={personSchema}
+          createOptionLabel={['create new person label', { ns: 'os' }]}
+          createOptionIcon='ph--user-plus--regular'
+          createInitialValuePath='fullName'
+          onCreate={handleCreateCallback}
+          classNames='popover-card-width'
+        />
+      </ObjectPicker.Root>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/ObjectPicker',
+  render: DefaultStory,
+  decorators: [
+    withTheme,
+    withClientProvider({
+      types: [Person.Person],
+      createIdentity: true,
+      createSpace: true,
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    controls: { disable: true },
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithTest: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(document.body);
+
+    // Find and click the trigger button.
+    const triggerButton = await canvas.findByTestId('trigger', undefined, { timeout: 5000 });
+    await expect(triggerButton).toBeVisible();
+    await userEvent.click(triggerButton);
+
+    // Check that the listbox renders when the trigger is clicked.
+    const listbox = await body.findByRole('listbox', undefined, { timeout: 5000 });
+    await expect(listbox).toBeVisible();
+
+    // Find the search input.
+    const searchInput = await body.findByPlaceholderText('Search…');
+    await expect(searchInput).toBeVisible();
+
+    // Test searching filters the results - get initial options count.
+    const initialOptions = await body.findAllByRole('option');
+    const initialCount = initialOptions.length;
+    await expect(initialCount).toBeGreaterThan(0);
+
+    // Type a search term that should filter results.
+    await userEvent.type(searchInput, 'John');
+
+    // Wait a moment for filtering.
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Check that results are filtered (should be fewer options)
+    const _filteredOptions = await body.findAllByRole('option');
+    // Note: We expect either fewer results or the same if no John exists
+
+    // Clear search and test selecting a result
+    await userEvent.clear(searchInput);
+
+    // Get the first option and click it
+    const updatedOptions = await body.findAllByRole('option');
+    const firstOption = updatedOptions[0];
+    await expect(firstOption).toBeVisible();
+
+    const _firstOptionText = firstOption.textContent;
+    await userEvent.click(firstOption);
+
+    // Check that clicking a result fires onSelect with that id
+    // The onSelect should have been called with the selected option's id
+    await expect(mockHandleSelect).toHaveBeenCalled();
+
+    // Re-open the picker to test create functionality.
+    await userEvent.click(triggerButton);
+
+    // Wait for listbox to appear again.
+    const newListbox = await body.findByRole('listbox', undefined, { timeout: 5000 });
+    await expect(newListbox).toBeVisible();
+
+    const newSearchInput = await body.findByPlaceholderText('Search…');
+
+    // Test searching an unrelated term provides the __create__ option.
+    const unrelatedTerm = 'ZxyUnrelatedName123';
+    await userEvent.type(newSearchInput, unrelatedTerm);
+
+    // Wait for the create option to appear.
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    // Look for the create option.
+    const createOption = await body.findByRole('option', undefined, { timeout: 3000 });
+    await expect(createOption).toBeVisible();
+
+    // Click the create option - this should change state to the form field.
+    await userEvent.click(createOption);
+
+    // Check that clicking that option changes state to the form field.
+    const form = await body.findByTestId('create-referenced-object-form', undefined, { timeout: 5000 });
+    await expect(form).toBeVisible();
+
+    // Find and click the save button.
+    const saveButton = await within(form).findByTestId('save-button');
+    await expect(saveButton).toBeVisible();
+    await userEvent.click(saveButton);
+
+    // Check that clicking the save button calls onCreate with expected values.
+    await expect(mockHandleCreate).toHaveBeenCalledWith({
+      fullName: unrelatedTerm,
+    });
+  },
+};

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type * as Schema from 'effect/Schema';
+import React, { type KeyboardEvent, type MouseEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { Icon, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Combobox } from '@dxos/react-ui-searchlist';
+
+import { type QueryTag } from '../../hooks';
+import { translationKey } from '../../translations';
+import { Form } from '../Form';
+
+export type ObjectPickerContentProps = ThemedClassName<{
+  options: QueryTag[];
+  selectedIds?: string[];
+  createSchema?: Schema.Schema.AnyNoContext;
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon?: string;
+  createInitialValuePath?: string;
+  onSelect: (id: string) => void;
+  onCreate?: (values: any) => void;
+}>;
+
+const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
+  (
+    {
+      options,
+      selectedIds,
+      createSchema,
+      createOptionLabel,
+      createOptionIcon,
+      createInitialValuePath,
+      onSelect,
+      onCreate,
+      ...props
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation(translationKey);
+
+    const [searchString, setSearchString] = useState('');
+    const [showForm, setShowForm] = useState(false);
+
+    const handleFormSave = useCallback(
+      (values: any) => {
+        onCreate?.(values);
+        setShowForm(false);
+        setSearchString('');
+      },
+      [onCreate],
+    );
+
+    const handleFormCancel = useCallback(() => {
+      setShowForm(false);
+      setSearchString('');
+    }, []);
+
+    // TODO(thure): The following click and keydown handlers are necessary because `onSelect` is called after the
+    //  Popover is already closed. Augment/refactor CmdK, if possible, to facilitate stopping event default
+    //  and 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 labelById = useMemo(
+      () =>
+        options.reduce((acc: Record<string, string>, option) => {
+          acc[option.id.toLowerCase()] = option.label.toLowerCase();
+          return acc;
+        }, {}),
+      [options],
+    );
+
+    return (
+      <Combobox.Content
+        {...props}
+        ref={ref}
+        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>
+        ) : (
+          <>
+            <Combobox.Input
+              placeholder={t('ref field combobox input placeholder')}
+              value={searchString}
+              onValueChange={setSearchString}
+              autoFocus
+            />
+            <Combobox.List>
+              {options.map((option) => (
+                <Combobox.Item
+                  key={option.id}
+                  value={option.id}
+                  onSelect={() => onSelect(option.id)}
+                  classNames='flex items-center gap-2'
+                >
+                  <span className='grow'>{option.label}</span>
+                  {selectedIds?.includes(option.id) && <Icon icon='ph--check--regular' />}
+                </Combobox.Item>
+              ))}
+              {searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && (
+                <Combobox.Item value='__create__' classNames='flex items-center gap-2'>
+                  <Icon icon={createOptionIcon} />
+                  {t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: searchString })}
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </>
+        )}
+        <Combobox.Arrow />
+      </Combobox.Content>
+    );
+  },
+);
+
+ObjectPickerContent.displayName = 'ObjectPickerContent';
+
+export const ObjectPicker = {
+  Root: Combobox.Root,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
+  Content: ObjectPickerContent,
+};

package/src/components/ObjectPicker/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ObjectPicker';