@dxos/react-ui-form 0.8.4-main.c85a9c8dae → 0.8.4-main.d05673bc65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d05673bc65",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,28 +36,28 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "tabster": "^8.5.5",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo-react": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo-query": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/effect": "0.8.4-main.c85a9c8dae",
-    "@dxos/lit-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/keys": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-components": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-editor": "0.8.4-main.c85a9c8dae",
-    "@dxos/debug": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-list": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-pickers": "0.8.4-main.c85a9c8dae",
-    "@dxos/schema": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-searchlist": "0.8.4-main.c85a9c8dae",
-    "@dxos/types": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae"
+    "@dxos/async": "0.8.4-main.d05673bc65",
+    "@dxos/echo": "0.8.4-main.d05673bc65",
+    "@dxos/echo-query": "0.8.4-main.d05673bc65",
+    "@dxos/echo-react": "0.8.4-main.d05673bc65",
+    "@dxos/invariant": "0.8.4-main.d05673bc65",
+    "@dxos/effect": "0.8.4-main.d05673bc65",
+    "@dxos/log": "0.8.4-main.d05673bc65",
+    "@dxos/lit-ui": "0.8.4-main.d05673bc65",
+    "@dxos/react-client": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-components": "0.8.4-main.d05673bc65",
+    "@dxos/keys": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-editor": "0.8.4-main.d05673bc65",
+    "@dxos/debug": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-pickers": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-searchlist": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-mosaic": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-stack": "0.8.4-main.d05673bc65",
+    "@dxos/types": "0.8.4-main.d05673bc65",
+    "@dxos/schema": "0.8.4-main.d05673bc65",
+    "@dxos/ui-types": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-list": "0.8.4-main.d05673bc65"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -67,19 +67,19 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
+    "@dxos/random": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/react-client": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.d05673bc65",
+    "@dxos/storybook-utils": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "peerDependencies": {
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65"
   },
   "publishConfig": {
     "access": "public"

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

@@ -23,7 +23,7 @@ const Organization = Schema.Struct({
   name: Schema.String.pipe(Schema.minLength(1)).annotations({ title: 'Full name' }),
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Organization', // TODO(burdon): Change all types to /schema
+    typename: 'com.example.type.organization',
     version: '0.1.0',
   }),
 );
@@ -65,7 +65,7 @@ const Person = Schema.Struct({
   ),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/Person', // TODO(burdon): Change all types to /schema
+    typename: 'org.dxos.type.person', // TODO(burdon): Change all types to /schema
     version: '0.1.0',
   }),
 );

package/src/components/Form/fields/RefField.tsx

@@ -13,6 +13,7 @@ import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { ParentLabelAnnotationId } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '../../../translations';
@@ -25,10 +26,11 @@ const isRefSnapshot = (val: any): val is { '/': string } => {
   return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
 };
 
-const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results) =>
+const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results, { parentLabel } = {}) =>
   results.map((result) => {
     const id = Entity.getDXN(result).toString();
-    const label = Entity.getLabel(result);
+    const parent = parentLabel ? Obj.getParent(result as Obj.Unknown) : undefined;
+    const label = parent ? Entity.getLabel(parent) : Entity.getLabel(result);
     return { id, label: label ?? id };
   });
 
@@ -48,7 +50,7 @@ export type RefFieldProps = FormFieldComponentProps &
     db?: Database.Database;
     resultsHook?: (db?: Database.Database, typename?: string) => Entity.Any[];
     schemaHook?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
-    getOptions?: (objects: Entity.Any[]) => RefOption[];
+    getOptions?: (objects: Entity.Any[], options?: { parentLabel?: boolean }) => RefOption[];
     onCreate?: (schema: Type.AnyEntity, values: any) => void;
   };
 
@@ -80,7 +82,10 @@ export const RefField = (props: RefFieldProps) => {
   );
 
   const results = useResults(db, typename);
-  const options = useMemo(() => getOptions(results), [results, getOptions]);
+  const options = useMemo(() => {
+    const parentLabel = type ? findAnnotation<boolean>(type, ParentLabelAnnotationId) === true : false;
+    return getOptions(results, { parentLabel });
+  }, [results, getOptions, type]);
 
   const handleGetValue = useCallback(() => {
     const formValue = getValue();

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

@@ -54,7 +54,7 @@ const DefaultStory = (props: StoryProps) => {
         salary: Format.Currency(),
       }).pipe(
         Type.object({
-          typename: 'example.com/type/Test',
+          typename: 'com.example.type.test',
           version: '0.1.0',
         }),
       );
@@ -65,7 +65,7 @@ const DefaultStory = (props: StoryProps) => {
         completed: Schema.Boolean,
       }).pipe(
         Type.object({
-          typename: 'example.com/type/Alternate',
+          typename: 'com.example.type.alternate',
           version: '0.1.0',
         }),
       );

package/src/components/ViewEditor/ViewEditor.tsx

@@ -17,7 +17,13 @@ import { useObject, useQuery } from '@dxos/react-client/echo';
 import { IconButton, Input, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
-import { ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from '@dxos/schema';
+import {
+  ParentLabelAnnotation,
+  ProjectionModel,
+  VIEW_FIELD_LIMIT,
+  createEchoChangeCallback,
+  getTypenameFromQuery,
+} from '@dxos/schema';
 import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
 
 import { translationKey } from '../../translations';
@@ -124,7 +130,12 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       if (mode === 'tag') {
         return Schema.Struct({
           ...base.fields,
-          target: Schema.optional(Ref.Ref(Feed.Feed).annotations({ title: 'Target Feed' })),
+          // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
+          target: Ref.Ref(Feed.Feed).pipe(
+            Schema.annotations({ title: 'Target Feed' }),
+            ParentLabelAnnotation.set(true),
+            Schema.optional,
+          ),
         }).pipe(Schema.mutable);
       }
 
@@ -329,7 +340,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
                       {field.path}
                     </List.ItemTitle>
-                    <List.ItemButton
+                    <List.ItemIconButton
                       label={t(hidden ? 'show field label' : 'hide field label')}
                       data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
                       icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
@@ -346,7 +357,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                           onClick={() => handleDelete(field.id)}
                           data-testid='field.delete'
                         />
-                        <IconButton
+                        <List.ItemIconButton
                           iconOnly
                           variant='ghost'
                           label={t('toggle expand label', { ns: osTranslations })}