@dxos/react-ui-form 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

package/src/hooks/useQueryRefOptions.ts

@@ -2,26 +2,35 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { type TypeAnnotation } from '@dxos/echo-schema';
+import { type TypeAnnotation } from '@dxos/echo/internal';
 import { type DXN } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { type Palette } from '@dxos/react-ui-types';
 import { type MaybePromise } from '@dxos/util';
 
 export type RefOption = { dxn: DXN; label?: string };
 export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
 
+export type QueryTag = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
+
 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.
  */
+// TODO(wittjosiah): This should be a reactive query so that the options are always up to date.
 export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
-  const [options, setOptions] = useState<TagPickerItemData[]>([]);
+  const [options, setOptions] = useState<QueryTag[]>([]);
   const [loading, setLoading] = useState(false);
+  const [state, setState] = useState({});
+  const update = useCallback(() => setState({}), []);
 
   useEffect(() => {
     if (!refTypeInfo || !onQueryRefOptions) {
@@ -47,7 +56,7 @@ export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryR
     };
 
     void fetchOptions();
-  }, [refTypeInfo, onQueryRefOptions]);
+  }, [refTypeInfo, onQueryRefOptions, state]);
 
-  return { options, loading };
+  return { options, update, loading };
 };

package/src/hooks/useRefQueryLookupHandler.ts

@@ -4,7 +4,8 @@
 
 import { useCallback } from 'react';
 
-import { type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
+import { Obj } from '@dxos/echo';
+import { type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 
@@ -28,8 +29,7 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
             return undefined;
           }
 
-          // TODO(Zaymon): Better fallback object names?
-          const item = { dxn, label: object?.name ?? object?.id ?? '' };
+          const item = { dxn, label: Obj.getLabel(object) ?? object?.id ?? '' };
           return item;
         })
         .filter(isNonNullable);

package/src/translations.ts

@@ -15,7 +15,7 @@ export const translations = [
         'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
-        'button add property': 'Add property',
+        'add property button': 'Add property',
         'field property label': 'Property',
         'field property placeholder': 'Property name',
         'field format label': 'Type',
@@ -28,12 +28,12 @@ export const translations = [
         'show field label': 'Show field',
         'hide field label': 'Hide field',
         'delete field label': 'Delete field',
+        'ref field combobox input placeholder': 'Search…',
         'ref field placeholder_one': 'Select…',
         'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
-        'button cancel': 'Cancel',
-        'button save': 'Save',
+        'save button': 'Save',
 
         // FormatEnum
         'format boolean': 'Boolean',
@@ -48,7 +48,7 @@ export const translations = [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'Geopoint',
+        'format lnglat': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 import { type ValidationError } from '@dxos/schema';
 
 /**

package/src/util/formatting.ts

@@ -4,7 +4,7 @@
 
 import { format as formatDate } from 'date-fns/format';
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 
 type ValueFormatProps = {
   type: TypeEnum;

package/src/util/refs.ts

@@ -2,9 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type SchemaAST } from 'effect';
+import type * as SchemaAST from 'effect/SchemaAST';
 
-import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo-schema';
+import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
 import { type SchemaProperty } from '@dxos/schema';
 
@@ -18,11 +18,6 @@ type RefProps = {
 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);
@@ -34,5 +29,10 @@ export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined
     }
   }
 
+  // Direct reference.
+  if (format === FormatEnum.Ref) {
+    return { ast, isArray: false };
+  }
+
   return undefined;
 };

package/src/util/schema.ts

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST } from 'effect';
+import * as SchemaAST from 'effect/SchemaAST';
 
 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;
+  return (tupleType as SchemaAST.TupleType | undefined)?.rest[0]?.type;
 };