@dxos/react-ui-form 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/src/components/Form/FormContent.tsx

@@ -2,15 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema, SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { forwardRef, useMemo } from 'react';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import * as StringEffect from 'effect/String';
+import React, { Component, type PropsWithChildren, type ReactNode, forwardRef, useMemo } from 'react';
 
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { type ProjectionModel, type SchemaProperty, getSchemaProperties } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { type QueryRefOptions } from '../../hooks';
 import { getRefProps } from '../../util';
@@ -33,7 +35,13 @@ export type FormFieldProps = {
   Custom?: Partial<Record<string, InputComponent>>;
 } & Pick<
   RefFieldProps,
-  'readonly' | 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'
+  | 'readonly'
+  | 'onQueryRefOptions'
+  | 'createOptionLabel'
+  | 'createOptionIcon'
+  | 'onCreate'
+  | 'createSchema'
+  | 'createInitialValuePath'
 >;
 
 export const FormField = ({
@@ -45,14 +53,16 @@ export const FormField = ({
   onQueryRefOptions,
   createOptionLabel,
   createOptionIcon,
-  onCreateFromQuery,
+  onCreate,
+  createSchema,
+  createInitialValuePath,
   lookupComponent,
   Custom,
 }: FormFieldProps) => {
   const { ast, name, type, format, title, description, options, examples, array } = property;
   const inputProps = useInputProps(path);
 
-  const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
+  const label = useMemo(() => title ?? Function.pipe(name, StringEffect.capitalize), [title, name]);
   const placeholder = useMemo(
     () => (examples?.length ? `Example: "${examples[0]}"` : description),
     [examples, description],
@@ -114,7 +124,9 @@ export const FormField = ({
         onQueryRefOptions={onQueryRefOptions}
         createOptionLabel={createOptionLabel}
         createOptionIcon={createOptionIcon}
-        onCreateFromQuery={onCreateFromQuery}
+        onCreate={onCreate}
+        createSchema={createSchema}
+        createInitialValuePath={createInitialValuePath}
         {...inputProps}
       />
     );
@@ -188,7 +200,7 @@ export const FormField = ({
             onQueryRefOptions={onQueryRefOptions}
             createOptionLabel={createOptionLabel}
             createOptionIcon={createOptionIcon}
-            onCreateFromQuery={onCreateFromQuery}
+            onCreate={onCreate}
             Custom={Custom}
             lookupComponent={lookupComponent}
           />
@@ -222,7 +234,15 @@ export type FormFieldsProps = ThemedClassName<
     Custom?: Partial<Record<string, InputComponent>>;
     onQueryRefOptions?: QueryRefOptions;
   } & Pick<FormFieldProps, 'readonly'> &
-    Pick<RefFieldProps, 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'>
+    Pick<
+      RefFieldProps,
+      | 'onQueryRefOptions'
+      | 'createOptionLabel'
+      | 'createOptionIcon'
+      | 'onCreate'
+      | 'createSchema'
+      | 'createInitialValuePath'
+    >
 >;
 
 export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
@@ -244,7 +264,7 @@ export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
   ) => {
     const values = useFormValues(path);
     const properties = useMemo(() => {
-      const props = getSchemaProperties(schema.ast, values);
+      const props = getSchemaProperties(schema.ast, values, { form: true });
 
       // Use projection-based field management when view and projection are available
       if (projection) {
@@ -282,21 +302,61 @@ export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
         {properties
           .map((property) => {
             return (
-              <FormField
-                key={property.name}
-                property={property}
-                path={[...(path ?? []), property.name]}
-                readonly={readonly}
-                projection={projection}
-                onQueryRefOptions={onQueryRefOptions}
-                lookupComponent={lookupComponent}
-                Custom={Custom}
-                {...props}
-              />
+              <ErrorBoundary key={property.name} path={[...(path ?? []), property.name]}>
+                <FormField
+                  property={property}
+                  path={[...(path ?? []), property.name]}
+                  readonly={readonly}
+                  projection={projection}
+                  onQueryRefOptions={onQueryRefOptions}
+                  lookupComponent={lookupComponent}
+                  Custom={Custom}
+                  {...props}
+                />
+              </ErrorBoundary>
             );
           })
-          .filter(isNotFalsy)}
+          .filter(isTruthy)}
       </div>
     );
   },
 );
+
+type ErrorState = {
+  error: Error | undefined;
+};
+
+type ErrorBoundaryProps = PropsWithChildren<{
+  path?: (string | number)[];
+}>;
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorState> {
+  static getDerivedStateFromError(error: Error): { error: Error } {
+    return { error };
+  }
+
+  override state = { error: undefined };
+
+  override componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    if (prevProps.path !== this.props.path) {
+      this.resetError();
+    }
+  }
+
+  override render(): ReactNode {
+    if (this.state.error) {
+      return (
+        <div className='flex gap-2 border border-roseFill font-mono text-sm'>
+          <span className='bg-roseFill text-surfaceText pli-1 font-thin'>ERROR</span>
+          {String(this.props.path?.join('.'))}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+
+  private resetError(): void {
+    this.setState({ error: undefined });
+  }
+}

package/src/components/Form/FormContext.tsx

@@ -14,23 +14,23 @@ import React, {
 } from 'react';
 
 import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo-schema';
+import { type AnyProperties, getValue } from '@dxos/echo/internal';
 import { type SimpleType, createJsonPath } from '@dxos/effect';
 
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';
 
-type FormContextValue<T extends BaseObject> = FormHandler<T>;
+type FormContextValue<T extends AnyProperties> = FormHandler<T>;
 
 const FormContext = createContext<FormContextValue<any> | undefined>(undefined);
 
-export const useFormContext = <T extends BaseObject>(): FormContextValue<T> => {
+export const useFormContext = <T extends AnyProperties>(): FormContextValue<T> => {
   return useContext(FormContext) ?? raise(new Error('Missing FormContext'));
 };
 
 export const useFormValues = (path: (string | number)[] = []): any => {
   const { values: formValues } = useFormContext();
   const jsonPath = createJsonPath(path);
-  return getValue(formValues, jsonPath) as BaseObject;
+  return getValue(formValues, jsonPath) as AnyProperties;
 };
 
 export type FormInputStateProps = {
@@ -62,7 +62,7 @@ export const FormProvider = ({
   ...formOptions
 }: PropsWithChildren<
   FormOptions<any> & {
-    formRef?: RefObject<HTMLDivElement>;
+    formRef?: RefObject<HTMLDivElement | null>;
     autoSave?: boolean;
   }
 >) => {
@@ -92,7 +92,7 @@ export const FormProvider = ({
         }
       }
     },
-    [form, autoSave],
+    [form.canSave, form.formIsValid, form.handleSave, autoSave],
   );
 
   useEffect(() => {

package/src/components/Form/Input.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type Format } from '@dxos/echo/internal';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
 import { labelSpacing } from '@dxos/react-ui-stack';
@@ -17,7 +17,7 @@ import { type FormInputStateProps } from './FormContext';
  */
 export type InputProps = {
   type: SimpleType;
-  format?: FormatEnum;
+  format?: Format.TypeFormat;
   label: string;
   placeholder?: string;
   inputOnly?: boolean;

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 { DxRefTag } 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) {
@@ -173,19 +183,19 @@ export const RefField = ({
             <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
           ) : (
             items.map((item) => (
-              <DxRefTag key={item.id} refid={item.id} rootclassname='mie-1'>
+              <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
                 {item.label}
-              </DxRefTag>
+              </DxAnchor>
             ))
           )
         ) : (
-          <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 { Format } from '@dxos/echo/internal';
 import { type SimpleType } from '@dxos/effect';
 
 import { GeoPointInput } from './custom';
@@ -12,11 +12,14 @@ import { type InputComponent } from './Input';
 /**
  * Get property input component.
  */
-export const getInputComponent = (type: SimpleType, format?: FormatEnum | string): InputComponent | undefined => {
+export const getInputComponent = (
+  type: SimpleType,
+  format?: Format.TypeFormat | string,
+): InputComponent | undefined => {
   switch (format) {
-    case FormatEnum.GeoPoint:
+    case Format.TypeFormat.GeoPoint:
       return GeoPointInput;
-    case FormatEnum.Markdown:
+    case Format.TypeFormat.Markdown:
       return MarkdownInput;
   }