@dxos/react-ui-form 0.8.4-main.b97322e → 0.8.4-main.c4373fc

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

@@ -2,20 +2,19 @@
 // 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 { SelectOptionSchema, type SelectOption } 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 { SelectOptionInput } from './SelectOptionsInput';
 import { translations } from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 
+import { SelectOptionInput } from './SelectOptionsInput';
+
 const schema = Schema.Struct({
   options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
 }).pipe(Schema.mutable);
@@ -44,18 +43,19 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput,
+  component: SelectOptionInput as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

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

@@ -2,20 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+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, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { hues, subtleHover } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-// TODO(ZaymonFC): Handle disabled.
-export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue, onValueChange }: InputProps) => {
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -115,7 +114,12 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
       <InputHeader error={error} label={label} />
       <div role='none'>
         {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+          <List.Root
+            items={options}
+            isItem={(item) => true}
+            onMove={readonly ? undefined : handleMove}
+            readonly={!!readonly}
+          >
             {({ items }) => (
               <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
@@ -123,26 +127,30 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={['p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay']}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle />
+                        <List.ItemDragHandle disabled={!!readonly} />
                         <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
                           {/* TODO(ZaymonFC): Move spacer into Tag component. */}
                           <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                         </List.ItemTitle>
-                        <Icon
+                        <IconButton
+                          iconOnly
+                          variant='ghost'
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
                             <Input.TextInput
+                              disabled={!!readonly}
                               placeholder={t('select option label placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
@@ -151,14 +159,9 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               classNames='flex-1'
                               data-no-submit
                             />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePicker
-                                value={item.color}
-                                onChange={handleColorChange(item.id)}
-                                rootVariant='toolbar-button'
-                              />
-                            </Toolbar.Root>
+                            <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
                               label={t('select option delete')}
@@ -170,18 +173,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     </List.Item>
                   </div>
                 ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--plus--regular'
+                  label={t('select option add')}
+                  onClick={handleAdd}
+                  disabled={!!readonly}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

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

@@ -16,7 +16,7 @@ export const TupleInput = ({
   binding,
   type,
   label,
-  disabled,
+  readonly,
   getStatus,
   getValue,
   onValueChange,
@@ -35,7 +35,7 @@ export const TupleInput = ({
           <Input.TextInput
             key={prop}
             type='number'
-            disabled={disabled}
+            disabled={!!readonly}
             value={values[prop]}
             onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
             onBlur={onBlur}

package/src/components/Form/factory.tsx

@@ -2,12 +2,12 @@
 // 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';
 import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
-import { GeoPointInput } from './custom';
 
 /**
  * Get property input component.

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 { useClient } from '@dxos/react-client';
+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 { DataType } from '@dxos/schema';
+
+import { translations } from '../../translations';
+
+import { ObjectPicker } from './ObjectPicker';
+
+faker.seed(1);
+
+const createPerson = () =>
+  Obj.make(DataType.Person, {
+    fullName: faker.person.fullName(),
+  });
+
+const omitId = Schema.omit<any, any, ['id']>('id');
+const personSchema = omitId(DataType.Person);
+
+// Mock functions for testing
+const mockHandleSelect = fn();
+const mockHandleCreate = fn();
+
+const DefaultStory = () => {
+  const client = useClient();
+  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(DataType.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: [DataType.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 = {
+  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 = await 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 { PopoverCombobox } 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 (
+      <PopoverCombobox.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>
+        ) : (
+          <>
+            <PopoverCombobox.Input
+              placeholder={t('ref field combobox input placeholder')}
+              value={searchString}
+              onValueChange={setSearchString}
+              autoFocus
+            />
+            <PopoverCombobox.List>
+              {options.map((option) => (
+                <PopoverCombobox.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' />}
+                </PopoverCombobox.Item>
+              ))}
+              {searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && (
+                <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>
+    );
+  },
+);
+
+ObjectPickerContent.displayName = 'ObjectPickerContent';
+
+export const ObjectPicker = {
+  Root: PopoverCombobox.Root,
+  Trigger: PopoverCombobox.Trigger,
+  VirtualTrigger: PopoverCombobox.VirtualTrigger,
+  Content: ObjectPickerContent,
+};

package/src/components/ObjectPicker/index.ts

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