@dxos/react-ui-form 0.8.2-main.5885341 → 0.8.2-main.600d381

package/src/components/Form/RefField.tsx

@@ -2,126 +2,179 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
+import { type SchemaAST } from 'effect';
+import React, { useCallback, useMemo, type FocusEvent } from 'react';
 
 import {
-  type AST,
   Expando,
   getTypeAnnotation,
   Ref,
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
-  type TypeAnnotation,
 } from '@dxos/echo-schema';
-import { findAnnotation, type SimpleType } from '@dxos/effect';
+import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
-import { refFromDXN } from '@dxos/live-object';
-import { log } from '@dxos/log';
-import { type MaybePromise } from '@dxos/util';
-
-import { SelectInput, TextInput } from './Defaults';
-import { type FormInputStateProps } from './FormContext';
-
-export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<{ dxn: DXN; label?: string }[]>;
-
-type RefFieldProps = {
-  ast: AST.AST;
-  type: SimpleType;
-  label: string;
-  readonly?: boolean;
-  placeholder?: string;
-  inline?: boolean;
+import { Input } from '@dxos/react-ui';
+import { TagPicker, type TagPickerMode, type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { isNonNullable } from '@dxos/util';
+
+import { TextInput } from './Defaults';
+import { InputHeader, type InputProps } from './Input';
+import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
+
+type RefFieldProps = InputProps & {
+  ast?: SchemaAST.AST;
+  array?: boolean;
   onQueryRefOptions?: QueryRefOptions;
-  inputProps: FormInputStateProps;
 };
 
 export const RefField = ({
-  ast,
   type,
   label,
-  readonly,
+  disabled,
   placeholder,
-  inline,
+  inputOnly,
+  array,
+  ast,
+  getValue,
+  onBlur,
   onQueryRefOptions,
-  inputProps,
+  onValueChange,
+  ...restInputProps
 }: RefFieldProps) => {
-  const { getValue, onValueChange, ...restInputProps } = inputProps;
-  const refTypeInfo = findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId);
-  const [refOptions, setRefOptions] = useState<Array<{ value: string; label?: string }>>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!refTypeInfo || !onQueryRefOptions) {
-      return;
-    }
+  const refTypeInfo = useMemo(
+    () => (ast ? findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId) : undefined),
+    [ast],
+  );
+  const { options: availableOptions, 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.
+    return (
+      <RefFieldFallback
+        {...{ type, label, placeholder, disabled, inputOnly, getValue, onBlur, onValueChange, ...restInputProps }}
+      />
+    );
+  }
+
+  const handleGetValue = useCallback((): TagPickerItemData[] => {
+    const formValue = getValue();
 
-    const fetchOptions = async () => {
-      setLoading(true);
-      try {
-        const options = await onQueryRefOptions(refTypeInfo);
-        setRefOptions(
-          options.map((option) => ({
-            label: option.label,
-            value: option.dxn.toString(),
-          })),
-        );
-      } catch (error) {
-        log.error('Failed to fetch ref options:', error);
-        setRefOptions([]);
-      } finally {
-        setLoading(false);
+    const unknownToRefOption = (val: unknown) => {
+      if (Ref.isRef(val)) {
+        const dxnString = val.dxn.toString();
+        const matchingOption = availableOptions.find((option) => option.id === dxnString);
+        if (matchingOption) {
+          return matchingOption;
+        }
       }
+      return undefined;
     };
 
-    void fetchOptions();
-  }, [refTypeInfo, onQueryRefOptions]);
+    if (array && Array.isArray(formValue)) {
+      return formValue.map(unknownToRefOption).filter(isNonNullable) ?? [];
+    }
 
-  if (!refTypeInfo) {
-    return null;
-  }
+    const option = unknownToRefOption(formValue);
+    if (option) {
+      return [option];
+    }
 
-  // If ref type is expando, fall back to taking a DXN in string format.
-  if (refTypeInfo.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-    const handleOnValueChange = (_type: any, dxnString: string) => {
-      const dxn = DXN.tryParse(dxnString);
-      if (dxn) {
-        onValueChange?.('object', refFromDXN(dxn));
-      } else if (dxnString === '') {
-        onValueChange?.('object', undefined);
-      } else {
-        onValueChange?.('string', dxnString);
-      }
-    };
+    return [];
+  }, [getValue, availableOptions, array]);
 
-    const handleGetValue = () => {
-      const formValue = getValue();
-      if (typeof formValue === 'string') {
-        return formValue;
+  const handleSearch = useCallback(
+    (text: string, ids: string[]): TagPickerItemData[] =>
+      availableOptions
+        .filter((option) => !ids.includes(option.id))
+        .filter((option) => option.label.toLowerCase().includes(text.toLowerCase()))
+        .map((option) => ({ id: option.id, label: option.label, hue: option.hue as any })),
+    [availableOptions],
+  );
+
+  const handleUpdate = useCallback(
+    (ids: string[]) => {
+      if (ids.length === 0) {
+        onValueChange('object', undefined);
+        return;
       }
-      if (Ref.isRef(formValue)) {
-        return formValue.dxn.toString();
+
+      const refs = ids
+        .map((id) => {
+          const item = availableOptions.find((option) => option.id === id);
+          if (item) {
+            const dxn = DXN.parse(item.id);
+            return Ref.fromDXN(dxn);
+          }
+          return null;
+        })
+        .filter(isNonNullable);
+
+      if (array) {
+        onValueChange('object', refs);
+      } else {
+        onValueChange('object', refs[0]);
       }
+    },
+    [availableOptions, array, onValueChange],
+  );
 
-      return undefined;
-    };
+  const tagPickerMode: TagPickerMode = useMemo(() => (array ? 'multi-select' : 'single-select'), [array]);
 
-    return (
-      <TextInput
-        type={type}
-        label={label}
-        disabled={readonly}
-        placeholder={placeholder}
-        inputOnly={inline}
-        getValue={handleGetValue as <V>() => V | undefined}
-        onValueChange={handleOnValueChange}
-        {...restInputProps}
-      />
-    );
+  if (!refTypeInfo) {
+    return null;
   }
 
+  const { status, error } = restInputProps.getStatus();
+
+  return (
+    <Input.Root validationValence={status}>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
+      <div data-no-submit>
+        <TagPicker
+          items={handleGetValue()}
+          mode={tagPickerMode}
+          onBlur={(event) => onBlur(event as unknown as FocusEvent<HTMLElement>)}
+          onUpdate={handleUpdate}
+          onSearch={handleSearch}
+          classNames='rounded-sm bg-input p-1.5'
+        />
+      </div>
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+    </Input.Root>
+  );
+};
+
+const RefFieldFallback = ({
+  type,
+  label,
+  disabled,
+  placeholder,
+  inputOnly,
+  getValue,
+  onValueChange,
+  ...restInputProps
+}: InputProps) => {
+  const handleOnValueChange = (_type: any, dxnString: string) => {
+    const dxn = DXN.tryParse(dxnString);
+    if (dxn) {
+      onValueChange?.('object', Ref.fromDXN(dxn));
+    } else if (dxnString === '') {
+      onValueChange?.('object', undefined);
+    } else {
+      onValueChange?.('string', dxnString);
+    }
+  };
+
   const handleGetValue = () => {
     const formValue = getValue();
-
+    if (typeof formValue === 'string') {
+      return formValue;
+    }
     if (Ref.isRef(formValue)) {
       return formValue.dxn.toString();
     }
@@ -129,23 +182,15 @@ export const RefField = ({
     return undefined;
   };
 
-  const handleValueChanged = (_type: any, dxnString: string) => {
-    const dxn = DXN.parse(dxnString);
-    const ref = refFromDXN(dxn);
-
-    onValueChange('object', ref);
-  };
-
   return (
-    <SelectInput
+    <TextInput
       type={type}
       label={label}
-      disabled={readonly || loading}
-      placeholder={loading ? 'Loading options...' : placeholder}
-      inputOnly={inline}
+      disabled={disabled}
+      placeholder={placeholder}
+      inputOnly={inputOnly}
       getValue={handleGetValue as <V>() => V | undefined}
-      onValueChange={handleValueChanged}
-      options={refOptions}
+      onValueChange={handleOnValueChange}
       {...restInputProps}
     />
   );

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

@@ -5,9 +5,10 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { S, SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectOptionInput } from './SelectOptionsInput';
@@ -15,9 +16,9 @@ import translations from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 
-const schema = S.Struct({
-  options: S.Array(SelectOptionSchema).pipe(S.mutable),
-}).pipe(S.mutable);
+const schema = Schema.Struct({
+  options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
+}).pipe(Schema.mutable);
 
 const DefaultStory = () => {
   const [values, setValues] = useState<{ options: SelectOption[] }>({
@@ -46,7 +47,7 @@ const DefaultStory = () => {
 const meta: Meta = {
   title: 'ui/react-ui-form/SelectOptionsInput',
   component: SelectOptionInput,
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: { translations },
 };
 

package/src/components/Form/factory.tsx

@@ -12,7 +12,7 @@ import { GeoPointInput } from './custom';
 /**
  * Get property input component.
  */
-export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
+export const getInputComponent = (type: SimpleType, format?: FormatEnum | string): InputComponent | undefined => {
   switch (format) {
     case FormatEnum.GeoPoint:
       return GeoPointInput;

package/src/components/Form/index.ts

@@ -3,7 +3,6 @@
 //
 
 export * from './custom';
-
 export * from './Defaults';
 export * from './Form';
 export * from './FormContext';

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -5,9 +5,10 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { Format, type EchoSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
@@ -26,7 +27,7 @@ const DefaultStory = () => {
   useAsyncEffect(async () => {
     if (space) {
       class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-        name: S.String,
+        name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
       }) {}
@@ -81,7 +82,7 @@ const meta: Meta<typeof ViewEditor> = {
   title: 'ui/react-ui-form/ViewEditor',
   component: ViewEditor,
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true, tooltips: true }), withTheme],
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
   parameters: {
     translations,
   },

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,10 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema, SchemaAST } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { AST, Format, type BaseSchema, S, type JsonProp } from '@dxos/echo-schema';
+import { Format, type BaseSchema, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
@@ -18,16 +19,16 @@ import { Form } from '../Form';
 
 const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]';
 
-const ViewMetaSchema = S.Struct({
-  name: S.String.annotations({
-    [AST.TitleAnnotationId]: 'View',
+const ViewMetaSchema = Schema.Struct({
+  name: Schema.String.annotations({
+    [SchemaAST.TitleAnnotationId]: 'View',
   }),
   typename: Format.URL.annotations({
-    [AST.TitleAnnotationId]: 'Typename',
+    [SchemaAST.TitleAnnotationId]: 'Typename',
   }),
-}).pipe(S.mutable);
+}).pipe(Schema.mutable);
 
-type ViewMetaType = S.Schema.Type<typeof ViewMetaSchema>;
+type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
 
 export type ViewEditorProps = ThemedClassName<{
   schema: BaseSchema;
@@ -156,7 +157,7 @@ export const ViewEditor = ({
 
         <List.Root<FieldType>
           items={view.fields}
-          isItem={S.is(FieldSchema)}
+          isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
           onMove={schema.readonly ? undefined : handleMove}
         >

package/src/components/deprecated/Form.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SchemaAST as AST, type Schema as S, Option, pipe } from 'effect';
+import { SchemaAST, type Schema, Option, pipe } from 'effect';
 import React, { useState } from 'react';
 
 import { findProperty } from '@dxos/effect';
@@ -13,7 +13,7 @@ import { type ViewType, getFieldValue, setFieldValue } from '@dxos/schema';
 export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
   view: ViewType;
   object: T;
-  schema?: S.Schema<T>;
+  schema?: Schema.Schema<T>;
   readonly?: boolean;
 }>;
 
@@ -31,16 +31,16 @@ export const DeprecatedForm = <T extends {} = {}>({
     <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
       {view.fields.map((field) => {
         const prop = schema && findProperty(schema, field.path);
-        const title = (prop && pipe(AST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
-        const description = (prop && pipe(AST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
+        const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
+        const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
         // const format =
-        //   (prop && (getPatternAnnotation(prop) ?? (AST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
+        //   (prop && (getPatternAnnotation(prop) ?? (SchemaAST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
 
         //
         // Boolean
         //
 
-        if (prop && AST.isBooleanKeyword(prop)) {
+        if (prop && SchemaAST.isBooleanKeyword(prop)) {
           const value = object && getFieldValue(object, field);
           const onChange = (checked: boolean) => {
             setFieldValue(object, field, checked);

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './useForm';
+export * from './useRefQueryLookupHandler';
+export * from './useQueryRefOptions';

package/src/hooks/useForm.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST as AST, type Schema as S } from 'effect';
+import { SchemaAST, type Schema } from 'effect';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
@@ -45,7 +45,7 @@ export interface FormOptions<T extends BaseObject> {
   /**
    * Effect schema (Type literal).
    */
-  schema: S.Schema<T>;
+  schema: Schema.Schema<T, any>;
 
   /**
    * Initial values (which may not pass validation).
@@ -90,7 +90,7 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
-  invariant(AST.isTypeLiteral(schema.ast));
+  invariant(SchemaAST.isTypeLiteral(schema.ast));
 
   const [values, setValues] = useState<Partial<T>>(initialValues);
   useEffect(() => {

package/src/hooks/useQueryRefOptions.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type TypeAnnotation } from '@dxos/echo-schema';
+import { type DXN } from '@dxos/keys';
+import { log } from '@dxos/log';
+import { type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { type MaybePromise } from '@dxos/util';
+
+export type RefOption = { dxn: DXN; label?: string };
+export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
+
+type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQueryRefOptions?: QueryRefOptions };
+
+/**
+ * Hook to query reference options based on type information.
+ * Used internally within forms to fetch and format reference options for reference fields.
+ */
+export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
+  const [options, setOptions] = useState<TagPickerItemData[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!refTypeInfo || !onQueryRefOptions) {
+      return;
+    }
+
+    const fetchOptions = async () => {
+      setLoading(true);
+      try {
+        const fetchedOptions = await onQueryRefOptions(refTypeInfo);
+        setOptions(
+          fetchedOptions.map((option) => {
+            const dxn = option.dxn.toString() as string;
+            return { id: dxn, label: option.label ?? dxn, hue: 'neutral' as any };
+          }),
+        );
+      } catch (error) {
+        log.error('Failed to fetch ref options:', error);
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchOptions();
+  }, [refTypeInfo, onQueryRefOptions]);
+
+  return { options, loading };
+};

package/src/hooks/useRefQueryLookupHandler.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { getDXN, type TypeAnnotation } from '@dxos/echo-schema';
+import { Filter, type Space } from '@dxos/react-client/echo';
+import { isNonNullable } from '@dxos/util';
+
+import { type QueryRefOptions } from './useQueryRefOptions';
+
+type UseRefQueryLookupProps = { space?: Space };
+
+export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): QueryRefOptions => {
+  const handleRefQueryLookup = useCallback(
+    async (typeInfo: TypeAnnotation) => {
+      if (!space) {
+        return [];
+      }
+      const query = space.db.query(Filter.typename(typeInfo.typename));
+      const { objects } = await query.run();
+
+      return objects
+        .map((object) => {
+          const dxn = getDXN(object);
+          if (!dxn) {
+            return undefined;
+          }
+
+          // TODO(Zaymon): Better fallback object names?
+          const item = { dxn, label: object?.name ?? object?.id ?? '' };
+          return item;
+        })
+        .filter(isNonNullable);
+    },
+    [space],
+  );
+
+  return handleRefQueryLookup;
+};

package/src/util/index.ts

@@ -1,6 +1,8 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './field';
 export * from './formatting';
+export * from './refs';
+export * from './schema';

package/src/util/refs.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type SchemaAST } from 'effect';
+
+import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo-schema';
+import { findAnnotation } from '@dxos/effect';
+import { type SchemaProperty } from '@dxos/schema';
+
+import { findArrayElementType } from './schema';
+
+type RefProps = {
+  ast: SchemaAST.AST;
+  isArray: boolean;
+};
+
+export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined => {
+  const { ast, format, array } = property;
+
+  // Direct reference.
+  if (format === FormatEnum.Ref) {
+    return { ast, isArray: false };
+  }
+
+  // Array of references.
+  if (array) {
+    const elementType = findArrayElementType(ast);
+    if (elementType) {
+      const annotation = findAnnotation(elementType, ReferenceAnnotationId);
+      if (annotation) {
+        return { ast: elementType, isArray: true };
+      }
+    }
+  }
+
+  return undefined;
+};

package/src/util/schema.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { SchemaAST } from 'effect';
+
+import { findNode } from '@dxos/effect';
+
+export const findArrayElementType = (ast: SchemaAST.AST) => {
+  const tupleType = findNode(ast, SchemaAST.isTupleType);
+  const elementType = (tupleType as SchemaAST.TupleType | undefined)?.rest[0]?.type;
+
+  return elementType;
+};