@dxos/react-ui-form 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

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

@@ -7,9 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
 
-import { ContactType } from '@dxos/client/testing';
-import { AST, type BaseObject, Expando, Format, getDXN, Ref, S, type TypeAnnotation } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
+import { AST, type BaseObject, Format, S } from '@dxos/echo-schema';
 import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -80,9 +78,9 @@ export const Default: Story<TestType> = {
   },
 };
 
-export const Organization: Story<Testing.Organization> = {
+export const Org: Story<Testing.Org> = {
   args: {
-    schema: Testing.OrganizationSchema,
+    schema: Testing.OrgSchema,
     values: {
       name: 'DXOS',
       // website: 'https://dxos.org',
@@ -90,9 +88,9 @@ export const Organization: Story<Testing.Organization> = {
   },
 };
 
-export const OrganizationAutoSave: Story<Testing.Organization> = {
+export const OrgAutoSave: Story<Testing.Org> = {
   args: {
-    schema: Testing.OrganizationSchema,
+    schema: Testing.OrgSchema,
     values: {
       name: 'DXOS',
       // website: 'https://dxos.org',
@@ -241,44 +239,3 @@ export const Enum: StoryObj<FormProps<ColorType>> = {
     },
   },
 };
-
-const RefSchema = S.Struct({
-  contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
-  optionalContact: S.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
-  unknownExpando: S.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
-});
-
-const RefStory = ({ values: initialValues }: FormProps<any>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<any>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  const contact1 = live(ContactType, { identifiers: [] });
-  const contact2 = live(ContactType, { identifiers: [] });
-
-  const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
-    switch (typeInfo.typename) {
-      case ContactType.typename:
-        return [
-          { dxn: getDXN(contact1)!, label: 'John Coltraine' },
-          { dxn: getDXN(contact2)!, label: 'Erykah Badu' },
-        ];
-      default:
-        return [];
-    }
-  }, []);
-
-  return (
-    <TestLayout json={{ values, schema: RefSchema.ast.toJSON() }}>
-      <TestPanel>
-        <Form schema={RefSchema} values={values} onSave={handleSave} onQueryRefOptions={onQueryRefOptions} />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-export const Refs: StoryObj<FormProps<ContactType>> = {
-  render: RefStory,
-  args: { values: {} },
-};

package/src/components/Form/Form.tsx

@@ -13,7 +13,6 @@ import { FormActions } from './FormActions';
 import { FormFields } from './FormContent';
 import { FormProvider } from './FormContext';
 import { type InputProps, type InputComponent } from './Input';
-import { type QueryRefOptions } from './RefField';
 import { type FormOptions } from '../../hooks';
 
 export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
@@ -42,7 +41,6 @@ export type FormProps<T extends BaseObject> = ThemedClassName<
     autoSave?: boolean;
     testId?: string;
     onCancel?: () => void;
-    onQueryRefOptions?: QueryRefOptions;
     lookupComponent?: ComponentLookup;
     /**
      * Map of custom renderers for specific properties.
@@ -67,7 +65,6 @@ export const Form = <T extends BaseObject>({
   onValidate,
   onSave,
   onCancel,
-  onQueryRefOptions,
   lookupComponent,
   Custom,
 }: FormProps<T>) => {
@@ -103,7 +100,6 @@ export const Form = <T extends BaseObject>({
           readonly={readonly}
           filter={filter}
           sort={sort}
-          onQueryRefOptions={onQueryRefOptions}
           lookupComponent={lookupComponent}
           Custom={Custom}
         />

package/src/components/Form/FormContent.tsx

@@ -1,5 +1,5 @@
 //
-// Copyright 2025 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
 import { pipe } from 'effect';
@@ -17,29 +17,29 @@ import { SelectInput } from './Defaults';
 import { type ComponentLookup } from './Form';
 import { useInputProps, useFormValues } from './FormContext';
 import { type InputComponent } from './Input';
-import { RefField, type QueryRefOptions } 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>>;
+};
+
 export type FormFieldProps = {
   property: SchemaProperty<any>;
   path?: (string | number)[];
   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,
-  onQueryRefOptions,
-  lookupComponent,
-  Custom,
-}: FormFieldProps) => {
+export const FormField = ({ property, path, readonly, inline, lookupComponent, Custom }: FormFieldProps) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
 
@@ -120,22 +120,6 @@ export const FormField = ({
     );
   }
 
-  // TODO(ZaymonFC): Extract this to it's own component.
-  if (format === 'ref') {
-    return (
-      <RefField
-        ast={ast}
-        type={type}
-        label={label}
-        readonly={readonly}
-        placeholder={placeholder}
-        inline={inline}
-        onQueryRefOptions={onQueryRefOptions}
-        inputProps={inputProps}
-      />
-    );
-  }
-
   if (type === 'object') {
     const baseNode = findNode(ast, isDiscriminatedUnion);
     const typeLiteral = baseNode
@@ -145,15 +129,8 @@ export const FormField = ({
     if (typeLiteral) {
       return (
         <div role='none'>
-          {!inline && <h3 className='text-lg mbs-2 mbe-1'>{label}</h3>}
-          <FormFields
-            schema={S.make(typeLiteral)}
-            path={path}
-            readonly={readonly}
-            onQueryRefOptions={onQueryRefOptions}
-            Custom={Custom}
-            lookupComponent={lookupComponent}
-          />
+          {!inline && <div>{label}</div>}
+          <FormFields schema={S.make(typeLiteral)} path={path} readonly={readonly} Custom={Custom} />
         </div>
       );
     }
@@ -162,27 +139,7 @@ export const FormField = ({
   return null;
 };
 
-export type FormContentProps = {
-  schema: S.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) => {
+export const FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }: FormContentProps) => {
   const values = useFormValues(path);
 
   const properties = useMemo(() => {
@@ -202,7 +159,6 @@ export const FormFields = ({
               property={property}
               path={[...(path ?? []), property.name]}
               readonly={readonly}
-              onQueryRefOptions={onQueryRefOptions}
               lookupComponent={lookupComponent}
               Custom={Custom}
             />

package/src/components/Form/FormContext.tsx

@@ -2,15 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, {
-  createContext,
-  type RefObject,
-  useContext,
-  useEffect,
-  useMemo,
-  type FocusEvent,
-  type PropsWithChildren,
-} from 'react';
+import React, { createContext, useContext, useEffect, useMemo, type FocusEvent, type PropsWithChildren } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -61,7 +53,7 @@ export const FormProvider = ({
   ...formOptions
 }: PropsWithChildren<
   FormOptions<any> & {
-    formRef?: RefObject<HTMLDivElement>;
+    formRef?: React.RefObject<HTMLDivElement>;
     autoSave?: boolean;
   }
 >) => {

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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState, useEffect, useMemo, type ChangeEvent } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } 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: ChangeEvent<HTMLInputElement>) => {
+      (event: React.ChangeEvent<HTMLInputElement>) => {
         const inputText = event.target.value;
         setText(inputText);
         if (inputText !== '' && inputText !== '-') {

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useState, type ChangeEvent, 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: KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       setSelectedId(null);
     }

package/src/components/deprecated/Form.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -39,23 +39,23 @@ type Story = StoryObj<DeprecatedFormProps<TestType>>;
 
 export const Default: Story = {
   args: {
-    object: live(testData),
-    view: live(testView),
+    object: create(testData),
+    view: create(testView),
     schema: TestSchema,
   },
 };
 
 export const Empty: Story = {
   args: {
-    view: live(testView),
+    view: create(testView),
     schema: TestSchema,
   },
 };
 
 export const Readonly: Story = {
   args: {
-    object: live(testData),
-    view: live(testView),
+    object: create(testData),
+    view: create(testView),
     schema: TestSchema,
     readonly: true,
   },

package/src/components/deprecated/FormInput.tsx

@@ -12,7 +12,7 @@ import { mx, textBlockWidth } from '@dxos/react-ui-theme';
  */
 export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
   return (
-    <div role='none' className='container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto'>
+    <div role='none' className='w-full p-4 justify-center overflow-x-hidden overflow-y-auto'>
       <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
         {children}
       </div>

package/src/components/index.ts

@@ -3,7 +3,6 @@
 //
 
 export * from './deprecated';
-
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';

package/src/util/formatting.ts

@@ -64,25 +64,13 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
       });
     }
     case FormatEnum.Date: {
-      try {
-        return formatDate(new Date(value as number), 'yyyy-MM-dd');
-      } catch (error) {
-        return 'Invalid Date';
-      }
+      return formatDate(new Date(value as number), 'yyyy-MM-dd');
     }
     case FormatEnum.Time: {
-      try {
-        return formatDate(new Date(value as number), 'HH:mm:ss');
-      } catch (error) {
-        return 'Invalid Time';
-      }
+      return formatDate(new Date(value as number), 'HH:mm:ss');
     }
     case FormatEnum.DateTime: {
-      try {
-        return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
-      } catch (error) {
-        return 'Invalid DateTime';
-      }
+      return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
     }
     case FormatEnum.GeoPoint: {
       if (value === null || value === undefined) {

package/dist/types/src/components/ControlSection/ControlSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,KAAK,EAEV,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AAKxB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEhF,eAAO,MAAM,WAAW,uCAAwC,gBAAgB,sBAM/E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qCAAsC,mBAAmB,sBAOnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,2BAA4B,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,sBAUlG,CAAC;AAEF,eAAO,MAAM,kBAAkB,6BAA8B,WAAW,sBAEvE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvE,eAAO,MAAM,YAAY,6BAA8B,iBAAiB,sBAOvE,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAkB,iBAAiB,sBAO3D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,iHACiF,CAAC;AAKjH,eAAO,MAAM,WAAW,qCAAsC,gBAAgB,sBAY7E,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAsC,gBAAgB,sBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAsC,gBAAgB,sBAUlF,CAAC"}

package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts

@@ -1,8 +0,0 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react';
-import { type ControlSectionProps } from './ControlSection';
-declare const meta: Meta<ControlSectionProps>;
-export default meta;
-type Story = StoryObj<ControlSectionProps>;
-export declare const Default: Story;
-//# sourceMappingURL=ControlSection.stories.d.ts.map

package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/types/src/components/ControlSection/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ControlSection';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/ControlSection/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}

package/dist/types/src/components/Form/RefField.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { type AST, type TypeAnnotation } from '@dxos/echo-schema';
-import { type SimpleType } from '@dxos/effect';
-import { DXN } from '@dxos/keys';
-import { type MaybePromise } from '@dxos/util';
-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;
-    onQueryRefOptions?: QueryRefOptions;
-    inputProps: FormInputStateProps;
-};
-export declare const RefField: ({ ast, type, label, readonly, placeholder, inline, onQueryRefOptions, inputProps, }: RefFieldProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=RefField.d.ts.map

package/dist/types/src/components/Form/RefField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/RefField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,KAAK,GAAG,EAKR,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,YAAY,CAAC;IAAE,GAAG,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC,CAAC;AAErG,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,UAAU,EAAE,mBAAmB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,QAAQ,wFASlB,aAAa,6BAyGf,CAAC"}

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -1,29 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { ControlSection, type ControlSectionProps } from './ControlSection';
-import translations from '../../translations';
-
-const meta: Meta<ControlSectionProps> = {
-  title: 'ui/react-ui-form/ControlSection',
-  component: ControlSection,
-  decorators: [withLayout({ tooltips: true }), withTheme],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ControlSectionProps>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/ControlSection/index.ts

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

package/src/components/Form/RefField.tsx

@@ -1,151 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import {
-  type AST,
-  Expando,
-  getTypeAnnotation,
-  ReferenceAnnotationId,
-  type ReferenceAnnotationValue,
-  type TypeAnnotation,
-} from '@dxos/echo-schema';
-import { findAnnotation, type SimpleType } from '@dxos/effect';
-import { DXN } from '@dxos/keys';
-import { refFromDXN, RefImpl } 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;
-  onQueryRefOptions?: QueryRefOptions;
-  inputProps: FormInputStateProps;
-};
-
-export const RefField = ({
-  ast,
-  type,
-  label,
-  readonly,
-  placeholder,
-  inline,
-  onQueryRefOptions,
-  inputProps,
-}: 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 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);
-      }
-    };
-
-    void fetchOptions();
-  }, [refTypeInfo, onQueryRefOptions]);
-
-  if (!refTypeInfo) {
-    return null;
-  }
-
-  // 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);
-      }
-    };
-
-    const handleGetValue = () => {
-      const formValue = getValue();
-      if (typeof formValue === 'string') {
-        return formValue;
-      }
-      if (formValue instanceof RefImpl) {
-        return formValue.dxn.toString();
-      }
-
-      return undefined;
-    };
-
-    return (
-      <TextInput
-        type={type}
-        label={label}
-        disabled={readonly}
-        placeholder={placeholder}
-        inputOnly={inline}
-        getValue={handleGetValue as <V>() => V | undefined}
-        onValueChange={handleOnValueChange}
-        {...restInputProps}
-      />
-    );
-  }
-
-  const handleGetValue = () => {
-    const formValue = getValue();
-
-    if (formValue instanceof RefImpl) {
-      return formValue.dxn.toString();
-    }
-
-    return undefined;
-  };
-
-  const handleValueChanged = (_type: any, dxnString: string) => {
-    const dxn = DXN.parse(dxnString);
-    const ref = refFromDXN(dxn);
-
-    onValueChange('object', ref);
-  };
-
-  return (
-    <SelectInput
-      type={type}
-      label={label}
-      disabled={readonly || loading}
-      placeholder={loading ? 'Loading options...' : placeholder}
-      inputOnly={inline}
-      getValue={handleGetValue as <V>() => V | undefined}
-      onValueChange={handleValueChanged}
-      options={refOptions}
-      {...restInputProps}
-    />
-  );
-};