@dxos/react-ui-form 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

package/src/components/Form/FormContent.tsx

@@ -1,12 +1,11 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
 import React, { useMemo } from 'react';
 
-import { AST, S } from '@dxos/echo-schema';
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { mx } from '@dxos/react-ui-theme';
 import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
@@ -17,17 +16,10 @@ import { SelectInput } from './Defaults';
 import { type ComponentLookup } from './Form';
 import { useInputProps, useFormValues } from './FormContext';
 import { type InputComponent } from './Input';
+import { RefField } from './RefField';
 import { getInputComponent } from './factory';
-
-export type FormContentProps = {
-  schema: S.Schema.All;
-  path?: (string | number)[];
-  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
-  sort?: string[];
-  readonly?: boolean;
-  lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-};
+import { type QueryRefOptions } from '../../hooks';
+import { getRefProps } from '../../util';
 
 export type FormFieldProps = {
   property: SchemaProperty<any>;
@@ -35,11 +27,20 @@ export type FormFieldProps = {
   readonly?: boolean;
   /** Used to indicate if input should be presented inline (e.g. for array items). */
   inline?: boolean;
+  onQueryRefOptions?: QueryRefOptions;
   lookupComponent?: ComponentLookup;
   Custom?: Partial<Record<string, InputComponent>>;
 };
 
-export const FormField = ({ property, path, readonly, inline, lookupComponent, Custom }: FormFieldProps) => {
+export const FormField = ({
+  property,
+  path,
+  readonly,
+  inline,
+  onQueryRefOptions,
+  lookupComponent,
+  Custom,
+}: FormFieldProps) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
 
@@ -49,9 +50,13 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
     [examples, description],
   );
 
+  //
+  // Registry and Custom.
+  //
+
   const FoundComponent = lookupComponent?.({
     prop: name,
-    schema: S.make(ast),
+    schema: Schema.make(ast),
     inputProps: {
       type,
       format,
@@ -82,10 +87,40 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
     );
   }
 
+  //
+  // Refs.
+  //
+
+  const refProps = getRefProps(property);
+  if (refProps) {
+    return (
+      <RefField
+        ast={refProps.ast}
+        array={refProps.isArray}
+        type={type}
+        format={format}
+        label={label}
+        placeholder={placeholder}
+        disabled={readonly}
+        inputOnly={inline}
+        onQueryRefOptions={onQueryRefOptions}
+        {...inputProps}
+      />
+    );
+  }
+
+  //
+  // Arrays.
+  //
+
   if (array) {
     return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
   }
 
+  //
+  // Standard Inputs.
+  //
+
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
     return (
@@ -103,6 +138,10 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
     );
   }
 
+  //
+  // Select.
+  //
+
   if (options) {
     return (
       <div role='none'>
@@ -120,17 +159,28 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
     );
   }
 
+  //
+  // Nested Objects.
+  //
+
   if (type === 'object') {
     const baseNode = findNode(ast, isDiscriminatedUnion);
     const typeLiteral = baseNode
       ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
-      : findNode(ast, AST.isTypeLiteral);
+      : findNode(ast, SchemaAST.isTypeLiteral);
 
     if (typeLiteral) {
       return (
         <div role='none'>
-          {!inline && <div>{label}</div>}
-          <FormFields schema={S.make(typeLiteral)} path={path} readonly={readonly} Custom={Custom} />
+          {!inline && <h3 className='text-lg mbs-2 mbe-1'>{label}</h3>}
+          <FormFields
+            schema={Schema.make(typeLiteral)}
+            path={path}
+            readonly={readonly}
+            onQueryRefOptions={onQueryRefOptions}
+            Custom={Custom}
+            lookupComponent={lookupComponent}
+          />
         </div>
       );
     }
@@ -139,7 +189,27 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
   return null;
 };
 
-export const FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }: FormContentProps) => {
+export type FormContentProps = {
+  schema: Schema.Schema.All;
+  path?: (string | number)[];
+  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
+  sort?: string[];
+  readonly?: boolean;
+  onQueryRefOptions?: QueryRefOptions;
+  lookupComponent?: ComponentLookup;
+  Custom?: Partial<Record<string, InputComponent>>;
+};
+
+export const FormFields = ({
+  schema,
+  path,
+  filter,
+  sort,
+  readonly,
+  onQueryRefOptions,
+  lookupComponent,
+  Custom,
+}: FormContentProps) => {
   const values = useFormValues(path);
 
   const properties = useMemo(() => {
@@ -159,6 +229,7 @@ export const FormFields = ({ schema, path, filter, sort, readonly, lookupCompone
               property={property}
               path={[...(path ?? []), property.name]}
               readonly={readonly}
+              onQueryRefOptions={onQueryRefOptions}
               lookupComponent={lookupComponent}
               Custom={Custom}
             />

package/src/components/Form/FormContext.tsx

@@ -2,7 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { createContext, useContext, useEffect, useMemo, type FocusEvent, type PropsWithChildren } from 'react';
+import React, {
+  createContext,
+  type RefObject,
+  useContext,
+  useEffect,
+  useMemo,
+  type FocusEvent,
+  type PropsWithChildren,
+} from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -53,7 +61,7 @@ export const FormProvider = ({
   ...formOptions
 }: PropsWithChildren<
   FormOptions<any> & {
-    formRef?: React.RefObject<HTMLDivElement>;
+    formRef?: RefObject<HTMLDivElement>;
     autoSave?: boolean;
   }
 >) => {
@@ -68,7 +76,9 @@ export const FormProvider = ({
       const keyIsEnter = event.key === 'Enter';
       const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
       const inputIsTextarea = (event.target as HTMLElement).tagName.toLowerCase() === 'textarea';
-      const inputOptOut = (event.target as HTMLElement).hasAttribute('data-no-submit');
+      const inputOptOut =
+        (event.target as HTMLElement).hasAttribute('data-no-submit') ||
+        (event.target as HTMLElement).closest('[data-no-submit]') !== null;
 
       // Regular inputs: Submit on Enter (no modifiers).
       const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;

package/src/components/Form/Input.tsx

@@ -37,15 +37,9 @@ export const InputHeader = ({ children, error }: InputHeaderProps) => {
     <div role='none' className='flex justify-between items-center mb-1'>
       {children}
       {error && (
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Icon icon='ph--warning--regular' size={4} classNames={errorText} />
-          </Tooltip.Trigger>
-          <Tooltip.Content side='bottom'>
-            <Tooltip.Arrow />
-            {error}
-          </Tooltip.Content>
-        </Tooltip.Root>
+        <Tooltip.Trigger asChild content={error} side='bottom'>
+          <Icon icon='ph--warning--regular' size={4} classNames={errorText} />
+        </Tooltip.Trigger>
       )}
     </div>
   );

package/src/components/Form/RefField.tsx

@@ -0,0 +1,197 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type SchemaAST } from 'effect';
+import React, { useCallback, useMemo, type FocusEvent } from 'react';
+
+import {
+  Expando,
+  getTypeAnnotation,
+  Ref,
+  ReferenceAnnotationId,
+  type ReferenceAnnotationValue,
+} from '@dxos/echo-schema';
+import { findAnnotation } from '@dxos/effect';
+import { DXN } from '@dxos/keys';
+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;
+};
+
+export const RefField = ({
+  type,
+  label,
+  disabled,
+  placeholder,
+  inputOnly,
+  array,
+  ast,
+  getValue,
+  onBlur,
+  onQueryRefOptions,
+  onValueChange,
+  ...restInputProps
+}: RefFieldProps) => {
+  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 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;
+    };
+
+    if (array && Array.isArray(formValue)) {
+      return formValue.map(unknownToRefOption).filter(isNonNullable) ?? [];
+    }
+
+    const option = unknownToRefOption(formValue);
+    if (option) {
+      return [option];
+    }
+
+    return [];
+  }, [getValue, availableOptions, array]);
+
+  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;
+      }
+
+      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],
+  );
+
+  const tagPickerMode: TagPickerMode = useMemo(() => (array ? 'multi-select' : 'single-select'), [array]);
+
+  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();
+    }
+
+    return undefined;
+  };
+
+  return (
+    <TextInput
+      type={type}
+      label={label}
+      disabled={disabled}
+      placeholder={placeholder}
+      inputOnly={inputOnly}
+      getValue={handleGetValue as <V>() => V | undefined}
+      onValueChange={handleOnValueChange}
+      {...restInputProps}
+    />
+  );
+};

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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import React, { useCallback, useState, useEffect, useMemo, type ChangeEvent } from 'react';
 
 import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
@@ -28,7 +28,7 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
 
   const handleCoordinateChange = useCallback(
     (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
-      (event: React.ChangeEvent<HTMLInputElement>) => {
+      (event: ChangeEvent<HTMLInputElement>) => {
         const inputText = event.target.value;
         setText(inputText);
         if (inputText !== '' && inputText !== '-') {

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/custom/SelectOptionsInput.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState, type ChangeEvent, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
 
 import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
@@ -89,7 +89,7 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
     [options, type, onValueChange],
   );
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       setSelectedId(null);
     }

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(),
       }) {}
@@ -41,7 +42,7 @@ const DefaultStory = () => {
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.schema(ViewType));
+  const views = useQuery(space, Filter.type(ViewType));
   const currentTypename = useMemo(() => view?.query?.typename, [view]);
   const updateViewTypename = useCallback(
     (newTypename: string) => {
@@ -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,
   },