@dxos/react-ui-form 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/Form/FormFieldSet.tsx

@@ -2,13 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { type AnyProperties } from '@dxos/echo/internal';
 import { type SchemaProperty } from '@dxos/effect';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-import { isTruthy } from '@dxos/util';
 
 import { type FormHandlerProps } from '../../hooks';
 import { getFormProperties } from '../../util';
@@ -17,109 +14,114 @@ import { useFormValues } from './Form';
 import { FormField, type FormFieldProps } from './FormField';
 import { FormFieldErrorBoundary, FormFieldLabel } from './FormFieldComponent';
 
-export type FormFieldSetProps<T extends AnyProperties> = ThemedClassName<
-  {
-    label?: string;
-    exclude?: (props: SchemaProperty[]) => SchemaProperty[];
-    sort?: string[];
-  } & Pick<FormHandlerProps<T>, 'schema'> &
-    Pick<
-      FormFieldProps,
-      | 'path'
-      | 'autoFocus'
-      | 'readonly'
-      | 'layout'
-      | 'projection'
-      | 'fieldMap'
-      | 'fieldProvider'
-      | 'createOptionLabel'
-      | 'createOptionIcon'
-      | 'createInitialValuePath'
-      | 'db'
-      | 'schemaHook'
-      | 'getOptions'
-      | 'onCreate'
-    >
->;
-
-export const FormFieldSet = forwardRef<HTMLDivElement, FormFieldSetProps<any>>(
-  ({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef) => {
-    const values = useFormValues(FormFieldSet.displayName!, path);
-
-    // TODO(burdon): Updates on every value change.
-    //  Remove values dep if can remove from getSchemaProperties.
-    const properties = useMemo(() => {
-      if (!schema) {
-        return [];
-      }
+const FORM_FIELDSET_NAME = 'Form.FieldSet';
+
+export type FormFieldSetProps<T extends AnyProperties> = {
+  label?: string;
+  sort?: string[];
+  exclude?: (props: SchemaProperty[]) => SchemaProperty[];
+} & Pick<FormHandlerProps<T>, 'schema'> &
+  Pick<
+    FormFieldProps,
+    | 'path'
+    | 'autoFocus'
+    | 'readonly'
+    | 'layout'
+    | 'projection'
+    | 'fieldMap'
+    | 'fieldProvider'
+    | 'createOptionLabel'
+    | 'createOptionIcon'
+    | 'createInitialValuePath'
+    | 'db'
+    | 'schemaHook'
+    | 'getOptions'
+    | 'onCreate'
+  >;
+
+/**
+ * Renders a set of form fields derived from a schema object.
+ */
+export const FormFieldSet = ({
+  label,
+  schema,
+  readonly,
+  path,
+  sort,
+  exclude,
+  projection,
+  layout,
+  ...props
+}: FormFieldSetProps<any>) => {
+  const values = useFormValues(FORM_FIELDSET_NAME, path);
+
+  // TODO(burdon): Updates on every value change.
+  //  Remove values dep if can remove from getSchemaProperties.
+  const properties = useMemo(() => {
+    if (!schema) {
+      return [];
+    }
 
-      // TODO(wittjosiah): Reconcile FormInputAnnotation with projection hidden properties & exclude function.
-      const props = getFormProperties(schema.ast);
-
-      // Use projection-based field management when view and projection are available.
-      if (projection) {
-        const fieldProjections = projection.getFieldProjections();
-        const hiddenProperties = new Set(projection.getHiddenProperties());
-
-        // Filter properties to only include visible ones and order by projection.
-        const visibleProps = props.filter((prop) => !hiddenProperties.has(prop.name.toString()));
-        const orderedProps: SchemaProperty[] = [];
-
-        // Add properties in projection field order.
-        for (const fieldProjection of fieldProjections) {
-          const fieldPath = String(fieldProjection.field.path);
-          const prop = visibleProps.find((p) => p.name === fieldPath);
-          if (prop) {
-            orderedProps.push(prop);
-          }
+    // TODO(wittjosiah): Reconcile FormInputAnnotation with projection hidden properties & exclude function.
+    const schemaProps = getFormProperties(schema.ast);
+    const filteredProps = exclude ? exclude(schemaProps) : schemaProps;
+
+    // Use projection-based field management when view and projection are available.
+    if (projection) {
+      const fieldProjections = projection.getFieldProjections();
+      const hiddenProperties = new Set(projection.getHiddenProperties());
+
+      // Filter properties to only include visible ones and order by projection.
+      const visibleProps = filteredProps.filter((prop) => !hiddenProperties.has(prop.name.toString()));
+      const orderedProps: SchemaProperty[] = [];
+
+      // Add properties in projection field order.
+      for (const fieldProjection of fieldProjections) {
+        const fieldPath = String(fieldProjection.field.path);
+        const prop = visibleProps.find((p) => p.name === fieldPath);
+        if (prop) {
+          orderedProps.push(prop);
         }
-
-        // Add any remaining properties not in projection.
-        const projectionPaths = new Set(fieldProjections.map((projection) => String(projection.field.path)));
-        const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
-        orderedProps.push(...remainingProps);
-        return orderedProps;
       }
 
-      // Fallback to legacy filter/sort behavior.
-      const filtered = exclude ? exclude(props) : props;
-      return sort
-        ? filtered.sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString()))
-        : filtered;
-    }, [schema, values, exclude, sort, projection?.fields]);
-
-    if ((readonly || layout === 'static') && values == null) {
-      return null;
+      // Add any remaining properties not in projection.
+      const projectionPaths = new Set(fieldProjections.map((projection) => String(projection.field.path)));
+      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
+      orderedProps.push(...remainingProps);
+      return orderedProps;
     }
 
-    return (
-      <div
-        role='form'
-        className={mx('is-full', layout === 'inline' && 'flex flex-col gap-2', classNames)}
-        ref={forwardRef}
-      >
-        {layout !== 'inline' && label && <FormFieldLabel label={label} asChild />}
-        {properties
-          .map((property) => {
-            const name = property.name.toString();
-            return (
-              <FormFieldErrorBoundary key={name} path={[...(path ?? []), name]}>
-                <FormField
-                  type={property.type}
-                  name={name}
-                  path={[...(path ?? []), name]}
-                  readonly={readonly}
-                  layout={layout}
-                  projection={projection}
-                  {...props}
-                />
-              </FormFieldErrorBoundary>
-            );
-          })
-          .filter(isTruthy)}
-      </div>
-    );
-  },
-);
-
-FormFieldSet.displayName = 'Form.Fields';
+    // Fallback to legacy filter/sort behavior.
+    return sort
+      ? [...filteredProps].sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString()))
+      : filteredProps;
+  }, [schema, values, exclude, sort, projection]);
+
+  if ((readonly || layout === 'static') && values == null) {
+    return null;
+  }
+
+  return (
+    <>
+      {layout !== 'inline' && label && <FormFieldLabel label={label} asChild />}
+      {properties.map((property) => {
+        const name = property.name.toString();
+        return (
+          <FormFieldErrorBoundary key={name} path={[...(path ?? []), name]}>
+            <FormField
+              type={property.type}
+              name={name}
+              path={[...(path ?? []), name]}
+              readonly={readonly}
+              layout={layout}
+              projection={projection}
+              {...props}
+            />
+          </FormFieldErrorBoundary>
+        );
+      })}
+    </>
+  );
+};
+
+FormFieldSet.displayName = FORM_FIELDSET_NAME;

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

@@ -91,9 +91,9 @@ export const ArrayField = ({
               />
 
               {!readonly && layout !== 'static' && (
-                <div role='none' className='flex flex-col bs-full justify-end'>
+                <div role='none' className='flex flex-col h-full justify-end'>
                   {/* NOTE: Aligns with center of last field if multi-field object. */}
-                  <div role='none' className='flex items-center bs-[var(--line-height)]'>
+                  <div role='none' className='flex items-center h-[2rem]'>
                     <IconButton
                       icon='ph--x--regular'
                       iconOnly
@@ -111,12 +111,7 @@ export const ArrayField = ({
 
       {/* TODO(burdon): Get label from schema. */}
       {!readonly && layout !== 'static' && (
-        <IconButton
-          classNames='flex is-full _mlb-cardSpacingBlock'
-          icon='ph--plus--regular'
-          label={t('add field')}
-          onClick={handleAdd}
-        />
+        <IconButton classNames='flex w-full' icon='ph--plus--regular' label={t('add field')} onClick={handleAdd} />
       )}
     </>
   );
@@ -140,6 +135,9 @@ export const getDefaultValue = (ast?: SchemaAST.AST): any => {
     case 'BooleanKeyword': {
       return false;
     }
+    case 'Suspend': {
+      return getDefaultValue(ast.f());
+    }
     default: {
       if (ast && isNestedType(ast)) {
         return {};

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

@@ -65,7 +65,7 @@ export const MarkdownField = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={value ?? ''}
-          classNames={'min-bs-auto max-bs-40 overflow-auto'}
+          classNames={'min-h-auto max-h-40 overflow-auto'}
           onChange={handleChange}
           onBlur={onBlur}
           style={{ resize: 'none' }}

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

@@ -6,14 +6,15 @@ import '@dxos/lit-ui/dx-tag-picker.pcss';
 
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Entity, Filter, Ref, type Type } from '@dxos/echo';
+import { type Database, Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
 import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { useQuery, useSchema as useSchema$ } from '@dxos/echo-react';
 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 { descriptionText, mx } from '@dxos/ui-theme';
+import { ParentLabelAnnotationId } from '@dxos/schema';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '../../../translations';
 import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
@@ -25,23 +26,32 @@ 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 };
   });
 
 const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typename) =>
-  useQuery(db, typename ? Filter.typename(typename) : Filter.nothing());
+  useQuery(
+    db,
+    typename
+      ? // For Ref.Ref(Obj.Unknown) we want to show all objects.
+        typename === Type.getTypename(Obj.Unknown)
+        ? Filter.everything()
+        : Filter.typename(typename)
+      : Filter.nothing(),
+  );
 
 export type RefFieldProps = FormFieldComponentProps &
   Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath'> & {
     db?: Database.Database;
     resultsHook?: (db?: Database.Database, typename?: string) => Entity.Any[];
-    schemaHook?: (db?: Database.Database, typename?: string) => Type.Entity.Any;
-    getOptions?: (objects: Entity.Any[]) => RefOption[];
-    onCreate?: (schema: Type.Entity.Any, values: any) => void;
+    schemaHook?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
+    getOptions?: (objects: Entity.Any[], options?: { parentLabel?: boolean }) => RefOption[];
+    onCreate?: (schema: Type.AnyEntity, values: any) => void;
   };
 
 export const RefField = (props: RefFieldProps) => {
@@ -72,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();
@@ -135,9 +148,9 @@ export const RefField = (props: RefFieldProps) => {
       <div>
         {readonly ? (
           !item ? (
-            <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
+            <p className={mx('text-description', 'mb-2')}>{t('empty readonly ref field label')}</p>
           ) : (
-            <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
+            <DxAnchor key={item.id} dxn={item.id} rootclassname='me-1'>
               {item.label}
             </DxAnchor>
           )
@@ -145,13 +158,13 @@ export const RefField = (props: RefFieldProps) => {
           <ObjectPicker.Root>
             <ObjectPicker.Trigger asChild classNames='p-0'>
               {item ? (
-                <div className='flex gap-2 is-full'>
+                <div className='flex gap-2 w-full'>
                   <Input.Root key={item.id}>
-                    <Input.TextInput value={item.label} readOnly classNames='is-full' />
+                    <Input.TextInput value={item.label} readOnly classNames='w-full' />
                   </Input.Root>
                 </div>
               ) : (
-                <Button classNames='is-full text-start gap-2'>
+                <Button classNames='w-full text-start gap-2'>
                   <div role='none' className='grow overflow-hidden'>
                     <span className='flex truncate text-description'>{placeholder ?? t('ref field placeholder')}</span>
                   </div>
@@ -161,7 +174,7 @@ export const RefField = (props: RefFieldProps) => {
             </ObjectPicker.Trigger>
             <ObjectPicker.Portal>
               <ObjectPicker.Content
-                classNames='popover-card-width'
+                classNames='dx-card-popover-width'
                 options={options}
                 selectedIds={selectedIds}
                 createSchema={createSchema && omitId(createSchema)}

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

@@ -43,7 +43,7 @@ export const SelectField = ({
       ) : (
         <Select.Root value={value} onValueChange={handleValueChange}>
           {/* TODO(burdon): Placeholder not working? */}
-          <Select.TriggerButton classNames='is-full' disabled={!!readonly} placeholder={placeholder} />
+          <Select.TriggerButton classNames='w-full' disabled={!!readonly} placeholder={placeholder} />
           <Select.Portal>
             <Select.Content>
               <Select.Viewport>

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

@@ -7,7 +7,7 @@ import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
 import { SelectOption } from '@dxos/echo/internal';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../../translations';
 import { TestLayout } from '../../testing';
@@ -50,7 +50,7 @@ const meta = {
   title: 'ui/react-ui-form/SelectOptionField',
   component: SelectOptionField as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

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

@@ -128,13 +128,13 @@ export const SelectOptionField = ({
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='is-full overflow-auto'>
+              <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-xs']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
@@ -152,7 +152,7 @@ export const SelectOptionField = ({
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
+                        <div className='flex flex-col p-form-padding gap-1 dx-density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
                           <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
@@ -185,7 +185,7 @@ export const SelectOptionField = ({
                   label={t('select option add')}
                   onClick={handleAdd}
                   disabled={!!readonly}
-                  classNames='is-full'
+                  classNames='w-full'
                 />
               </div>
             )}

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -74,15 +74,15 @@ const DefaultStory = () => {
   );
 
   return (
-    <div role='none' className='flex is-96'>
+    <div role='none' className='flex w-96'>
       <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
         <ObjectPicker.Trigger asChild>
-          <Button variant='primary' data-testid='trigger' classNames='is-full'>
+          <Button variant='primary' data-testid='trigger' classNames='w-full'>
             Select Person
           </Button>
         </ObjectPicker.Trigger>
         <ObjectPicker.Content
-          classNames='popover-card-width'
+          classNames='dx-card-popover-width'
           options={options}
           createSchema={personSchema}
           createOptionLabel={['create new person label', { ns: osTranslations }]}
@@ -100,7 +100,7 @@ const meta = {
   title: 'ui/react-ui-form/ObjectPicker',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       types: [Person.Person],
       createIdentity: true,
@@ -201,14 +201,10 @@ export const WithTest: Story = {
     await userEvent.click(saveButton);
 
     // Check that clicking the save button calls onCreate with expected values.
-    await expect(mockHandleCreate).toHaveBeenCalledWith({
-      fullName: unrelatedTerm,
-      addresses: [],
-      phoneNumbers: [],
-      emails: [],
-      identities: [],
-      urls: [],
-      fields: [],
-    });
+    await expect(mockHandleCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fullName: unrelatedTerm,
+      }),
+    );
   },
 };

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Settings } from './Settings';
+
+faker.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Root>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Group>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+            <Input.Root>
+              <Input.TextInput placeholder='Input' />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+            <Input.Root>
+              <Input.Switch />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(3)} description={faker.lorem.paragraphs(2)}>
+            <Button>Test</Button>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};