@dxos/react-ui-form 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/Form/fields/RefField.tsx

@@ -4,38 +4,53 @@
 
 import '@dxos/lit-ui/dx-tag-picker.pcss';
 
-import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
-import { Ref } from '@dxos/echo';
+import { type Database, Entity, Filter, Ref, Type } from '@dxos/echo';
 import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
+import { useQuery, useSchema as useSchema$ } from '@dxos/echo-react';
 import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
+import { descriptionText, mx } from '@dxos/ui-theme';
 
-import { type QueryRefOptions, useQueryRefOptions } from '../../../hooks';
 import { translationKey } from '../../../translations';
-import { ObjectPicker } from '../../ObjectPicker';
+import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
+import { omitId } from '../Form';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 // TODO(burdon): Factor out.
-const isRefSnapShot = (val: any): val is { '/': string } => {
+const isRefSnapshot = (val: any): val is { '/': string } => {
   return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
 };
 
-export type RefFieldProps = FormFieldComponentProps & {
-  // TODO(wittjosiah): Remove this. Array is handled upstream.
-  array?: boolean;
-  createOptionLabel?: [string, { ns: string }];
-  createOptionIcon?: string;
-  createSchema?: Schema.Schema.AnyNoContext;
-  createInitialValuePath?: string;
-  onCreate?: (values: any) => void;
-  onQueryRefOptions?: QueryRefOptions;
-};
+const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results) =>
+  results.map((result) => {
+    const id = Entity.getDXN(result).toString();
+    const label = Entity.getLabel(result);
+    return { id, label: label ?? id };
+  });
+
+const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typename) =>
+  useQuery(
+    db,
+    typename
+      ? // For Type.Ref(Type.Obj) we want to show all objects.
+        typename === Type.getTypename(Type.Obj)
+        ? Filter.everything()
+        : Filter.typename(typename)
+      : Filter.nothing(),
+  );
+
+export type RefFieldProps = FormFieldComponentProps &
+  Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath'> & {
+    db?: Database.Database;
+    resultsHook?: (db?: Database.Database, typename?: string) => Entity.Any[];
+    schemaHook?: (db?: Database.Database, typename?: string) => Type.Entity.Any;
+    getOptions?: (objects: Entity.Any[]) => RefOption[];
+    onCreate?: (schema: Type.Entity.Any, values: any) => void;
+  };
 
 export const RefField = (props: RefFieldProps) => {
   const {
@@ -46,13 +61,14 @@ export const RefField = (props: RefFieldProps) => {
     layout,
     getStatus,
     getValue,
-    array,
     createOptionLabel,
     createOptionIcon,
-    createSchema,
     createInitialValuePath,
+    db,
+    resultsHook: useResults = defaultResultsHook,
+    schemaHook: useSchema = useSchema$,
+    getOptions = defaultGetOptions,
     onCreate,
-    onQueryRefOptions,
     onValueChange,
   } = props;
   const { t } = useTranslation(translationKey);
@@ -63,15 +79,15 @@ export const RefField = (props: RefFieldProps) => {
     [type],
   );
 
-  // TODO(burdon): Query items on demand.
-  const { options, update: updateOptions } = useQueryRefOptions({ typename, onQueryRefOptions });
+  const results = useResults(db, typename);
+  const options = useMemo(() => getOptions(results), [results, getOptions]);
 
   const handleGetValue = useCallback(() => {
     const formValue = getValue();
 
     const unknownToRefOption = (value: unknown) => {
       const isRef = Ref.isRef(value);
-      if (isRef || isRefSnapShot(value)) {
+      if (isRef || isRefSnapshot(value)) {
         const dxnString = isRef ? value.dxn.toString() : value['/'];
         const matchingOption = options.find((option) => option.id === dxnString);
         if (matchingOption) {
@@ -81,72 +97,43 @@ export const RefField = (props: RefFieldProps) => {
       return undefined;
     };
 
-    if (array && Array.isArray(formValue)) {
-      return formValue.map(unknownToRefOption).filter(isNonNullable) ?? [];
-    }
-
-    const option = unknownToRefOption(formValue);
-    if (option) {
-      return [option];
-    }
-
-    return [];
-  }, [options, array, getValue]);
+    return unknownToRefOption(formValue);
+  }, [options, getValue]);
 
   const handleUpdate = useCallback(
-    (ids: string[]) => {
-      if (ids.length === 0) {
-        onValueChange(type, undefined);
-        return;
-      }
-
-      const refs = ids
-        .map((id) => {
-          const item = options.find((option) => option.id === id);
-          if (item) {
-            const dxn = DXN.parse(item.id);
-            return Ref.fromDXN(dxn);
-          }
-          return null;
-        })
-        .filter(isNonNullable);
-
-      if (array) {
-        onValueChange(type, refs);
-      } else {
-        onValueChange(type, refs[0]);
-      }
+    (id: string | undefined) => {
+      const item = options.find((option) => option.id === id);
+      const ref = item ? Ref.fromDXN(DXN.parse(item.id)) : undefined;
+      onValueChange(type, ref);
     },
-    [options, type, array, onValueChange],
+    [options, type, onValueChange],
   );
 
+  const item = handleGetValue();
+  const selectedIds = useMemo(() => (item ? [item.id] : []), [item]);
+  const createSchema = useSchema(db, typename);
+
   const handleCreate = useCallback(
     (values: any) => {
-      onCreate?.(values);
-      updateOptions();
+      if (createSchema && onCreate) {
+        onCreate(createSchema, values);
+      }
     },
-    [onCreate, updateOptions],
+    [createSchema, onCreate],
   );
 
-  const items = handleGetValue();
-  const selectedIds = useMemo(() => items.map((i: any) => i.id), [items]);
-  const toggleSelect = useCallback(
+  const handleSelect = useCallback(
     (id: string) => {
-      if (array) {
-        const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id];
-        handleUpdate(nextIds);
+      if (item?.id === id) {
+        handleUpdate(undefined);
       } else {
-        if (selectedIds[0] === id) {
-          handleUpdate([]);
-        } else {
-          handleUpdate([id]);
-        }
+        handleUpdate(id);
       }
     },
-    [array, selectedIds, handleUpdate],
+    [item, handleUpdate],
   );
 
-  if (!typename || ((readonly || layout === 'static') && items.length < 1)) {
+  if (!typename || ((readonly || layout === 'static') && !item)) {
     return null;
   }
 
@@ -155,48 +142,44 @@ export const RefField = (props: RefFieldProps) => {
       {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
       <div>
         {readonly ? (
-          items.length < 1 ? (
+          !item ? (
             <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
           ) : (
-            items.map((item) => (
-              <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
-                {item.label}
-              </DxAnchor>
-            ))
+            <DxAnchor key={item.id} dxn={item.id} rootclassname='mie-1'>
+              {item.label}
+            </DxAnchor>
           )
         ) : (
           <ObjectPicker.Root>
             <ObjectPicker.Trigger asChild classNames='p-0'>
-              {items?.length === 1 ? (
+              {item ? (
                 <div className='flex gap-2 is-full'>
-                  {items?.map((item) => (
-                    <Input.Root key={item.id}>
-                      <Input.TextInput value={item.label} readOnly classNames='is-full' />
-                    </Input.Root>
-                  ))}
+                  <Input.Root key={item.id}>
+                    <Input.TextInput value={item.label} readOnly classNames='is-full' />
+                  </Input.Root>
                 </div>
               ) : (
                 <Button classNames='is-full text-start gap-2'>
                   <div role='none' className='grow overflow-hidden'>
-                    <span className='flex truncate text-description'>
-                      {placeholder ?? t('ref field placeholder', { count: array ? 99 : 1 })}
-                    </span>
+                    <span className='flex truncate text-description'>{placeholder ?? t('ref field placeholder')}</span>
                   </div>
                   <Icon size={3} icon='ph--caret-down--bold' />
                 </Button>
               )}
             </ObjectPicker.Trigger>
-            <ObjectPicker.Content
-              classNames='popover-card-width'
-              options={options}
-              selectedIds={selectedIds}
-              createSchema={createSchema}
-              createOptionLabel={createOptionLabel}
-              createOptionIcon={createOptionIcon}
-              createInitialValuePath={createInitialValuePath}
-              onCreate={handleCreate}
-              onSelect={toggleSelect}
-            />
+            <ObjectPicker.Portal>
+              <ObjectPicker.Content
+                classNames='popover-card-width'
+                options={options}
+                selectedIds={selectedIds}
+                createSchema={createSchema && omitId(createSchema)}
+                createOptionLabel={createOptionLabel}
+                createOptionIcon={createOptionIcon}
+                createInitialValuePath={createInitialValuePath}
+                onCreate={handleCreate}
+                onSelect={handleSelect}
+              />
+            </ObjectPicker.Portal>
           </ObjectPicker.Root>
         )}
       </div>

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

@@ -50,7 +50,7 @@ const meta = {
   title: 'ui/react-ui-form/SelectOptionField',
   component: SelectOptionField as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/Form/fields/SelectOptionField.tsx

@@ -9,7 +9,7 @@ import { PublicKey } from '@dxos/keys';
 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, subtleHover } from '@dxos/react-ui-theme';
+import { hues, osTranslations, subtleHover } from '@dxos/ui-theme';
 
 import { translationKey } from '../../../translations';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
@@ -146,7 +146,7 @@ export const SelectOptionField = ({
                         <IconButton
                           iconOnly
                           variant='ghost'
-                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: osTranslations })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />

package/src/components/Form/fields/TupleField.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { safeParseFloat } from '@dxos/util';
 
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';

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

@@ -10,10 +10,11 @@ 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 { useClientStory, 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 { osTranslations } from '@dxos/ui-theme';
 
 import { translations } from '../../translations';
 
@@ -34,7 +35,7 @@ const mockHandleSelect = fn();
 const mockHandleCreate = fn();
 
 const DefaultStory = () => {
-  const { space } = useClientProvider();
+  const { space } = useClientStory();
   const [isOpen, setIsOpen] = useState(false);
 
   // Create sample Person objects
@@ -48,7 +49,7 @@ const DefaultStory = () => {
   }, [space]);
 
   // Get all objects in the space (similar to BoardContainer)
-  const allObjects = useQuery(space, Filter.everything());
+  const allObjects = useQuery(space?.db, Filter.everything());
 
   // Map objects to options format expected by ObjectPicker
   const options = useMemo(
@@ -84,7 +85,7 @@ const DefaultStory = () => {
           classNames='popover-card-width'
           options={options}
           createSchema={personSchema}
-          createOptionLabel={['create new person label', { ns: 'os' }]}
+          createOptionLabel={['create new person label', { ns: osTranslations }]}
           createOptionIcon='ph--user-plus--regular'
           createInitialValuePath='fullName'
           onCreate={handleCreateCallback}
@@ -99,7 +100,7 @@ const meta = {
   title: 'ui/react-ui-form/ObjectPicker',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       types: [Person.Person],
       createIdentity: true,
@@ -202,6 +203,12 @@ export const WithTest: Story = {
     // Check that clicking the save button calls onCreate with expected values.
     await expect(mockHandleCreate).toHaveBeenCalledWith({
       fullName: unrelatedTerm,
+      addresses: [],
+      phoneNumbers: [],
+      emails: [],
+      identities: [],
+      urls: [],
+      fields: [],
     });
   },
 };

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -3,26 +3,57 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import React, { type KeyboardEvent, type MouseEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
-import { Icon, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Combobox } from '@dxos/react-ui-searchlist';
+import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-searchlist';
 
-import { type QueryTag } from '../../hooks';
 import { translationKey } from '../../translations';
 import { Form } from '../Form';
 
+export type RefOption = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
+
 export type ObjectPickerContentProps = ThemedClassName<{
-  options: QueryTag[];
+  options: RefOption[];
   selectedIds?: string[];
-  createSchema?: Schema.Schema.AnyNoContext;
   createOptionLabel?: [string, { ns: string }];
   createOptionIcon?: string;
+  createSchema?: Schema.Schema.AnyNoContext;
   createInitialValuePath?: string;
-  onSelect: (id: string) => void;
   onCreate?: (values: any) => void;
+  onSelect: (id: string) => void;
 }>;
 
+const CreateItem = ({
+  createOptionLabel,
+  createOptionIcon,
+  onCreateItemSelect,
+}: {
+  createOptionLabel: [string, { ns: string }];
+  createOptionIcon: string;
+  onCreateItemSelect: (query: string) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+  const { query } = useSearchListInput();
+
+  return (
+    <Combobox.Item
+      value='__create__'
+      label={t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })}
+      icon={createOptionIcon}
+      classNames='flex items-center gap-2'
+      closeOnSelect={false}
+      onSelect={() => {
+        onCreateItemSelect(query);
+      }}
+    />
+  );
+};
+
 const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
   (
     {
@@ -40,36 +71,26 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
   ) => {
     const { t } = useTranslation(translationKey);
     const [showForm, setShowForm] = useState(false);
-    const [searchString, setSearchString] = useState('');
+    const [formInitialValue, setFormInitialValue] = useState<string>('');
+
+    const { results, handleSearch } = useSearchListResults({
+      items: options,
+    });
 
     const handleFormSave = useCallback(
       (values: any) => {
         onCreate?.(values);
         setShowForm(false);
-        setSearchString('');
+        setFormInitialValue('');
       },
       [onCreate],
     );
 
     const handleFormCancel = useCallback(() => {
       setShowForm(false);
-      setSearchString('');
+      setFormInitialValue('');
     }, []);
 
-    // 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 defaultand 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 (
@@ -81,35 +102,24 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
         ) {
           event.stopPropagation();
           event.preventDefault();
+          // Get the current query from the input element
+          const input = (event.currentTarget as HTMLElement).querySelector('input[type="text"]') as HTMLInputElement;
+          const currentQuery = input?.value || '';
+          setFormInitialValue(currentQuery);
           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}
-      >
+      <Combobox.Content {...props} ref={ref} onSearch={handleSearch} onKeyDownCapture={handleKeyDown}>
         {showForm && createSchema ? (
           <Popover.Viewport>
             <Form.Root
               testId='create-referenced-object-form'
               schema={createSchema}
-              values={createInitialValuePath ? { [createInitialValuePath]: searchString } : {}}
+              values={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
               onSave={handleFormSave}
               onCancel={handleFormCancel}
             >
@@ -123,29 +133,27 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
           </Popover.Viewport>
         ) : (
           <>
-            <Combobox.Input
-              placeholder={t('ref field combobox input placeholder')}
-              value={searchString}
-              onValueChange={setSearchString}
-              autoFocus
-            />
+            <Combobox.Input placeholder={t('ref field combobox input placeholder')} autoFocus />
             <Combobox.List>
-              {options.map((option) => (
+              {results.map((option) => (
                 <Combobox.Item
                   key={option.id}
                   value={option.id}
+                  label={option.label}
+                  checked={selectedIds?.includes(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>
+              {createOptionLabel && createOptionIcon && createSchema && onCreate && (
+                <CreateItem
+                  createOptionLabel={createOptionLabel}
+                  createOptionIcon={createOptionIcon}
+                  onCreateItemSelect={(query: string) => {
+                    setFormInitialValue(query);
+                    setShowForm(true);
+                  }}
+                />
               )}
             </Combobox.List>
           </>
@@ -160,6 +168,7 @@ ObjectPickerContent.displayName = 'ObjectPickerContent';
 
 export const ObjectPicker = {
   Root: Combobox.Root,
+  Portal: Combobox.Portal,
   Trigger: Combobox.Trigger,
   VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent,

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Settings } from './Settings';
+
+faker.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Root>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Group>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+            <Input.Root>
+              <Input.TextInput placeholder='Input' />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+            <Input.Root>
+              <Input.Switch />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(3)} description={faker.lorem.paragraphs(2)}>
+            <Button>Test</Button>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};