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

package/src/components/Form/FormField.tsx

@@ -78,12 +78,19 @@ export type FormFieldProps = {
    * Function to lookup custom renderers for specific properties.
    */
   fieldProvider?: FormFieldProvider;
+  /**
+   * Typename of the ref type that the create props apply to.
+   * When set, createOptionLabel/createOptionIcon/createInitialValuePath/createFieldMap/onCreate
+   * are only passed to ref fields whose typename matches.
+   */
+  createTypename?: string;
 } & Pick<FormFieldComponentProps, 'autoFocus' | 'readonly' | 'layout'> &
   Pick<
     RefFieldProps,
     | 'createOptionLabel'
     | 'createOptionIcon'
     | 'createInitialValuePath'
+    | 'createFieldMap'
     | 'db'
     | 'schemaHook'
     | 'getOptions'
@@ -102,9 +109,11 @@ export const FormField = (props: FormFieldProps) => {
     layout,
 
     // RefFieldProps
+    createTypename,
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    createFieldMap,
     db,
     schemaHook,
     getOptions: getRefOptions,
@@ -117,7 +126,7 @@ export const FormField = (props: FormFieldProps) => {
 
   const label = useMemo(() => title ?? String.capitalize(name), [title, name]);
   const placeholder = useMemo(
-    () => (examples?.length ? `${t('example placeholder')}: ${examples[0]}` : (description ?? label)),
+    () => (examples?.length ? `${t('example.placeholder')}: ${examples[0]}` : (description ?? label)),
     [examples, description, label],
   );
 
@@ -171,13 +180,21 @@ export const FormField = (props: FormFieldProps) => {
 
   const options = getOptions(type);
   if (options) {
+    // Resolve labels from projection metadata when available.
+    const fieldProjections = projection?.getFieldProjections();
+    const fieldProjection = fieldProjections?.find((fp) => fp.field.path === name);
+    const selectOptions = fieldProjection?.props.options;
+
     return (
       <SelectField
         {...fieldProps}
-        options={options.map((option) => ({
-          value: option,
-          label: option.toString(),
-        }))}
+        options={options.map((option) => {
+          const selectOption = selectOptions?.find((so) => so.id === globalThis.String(option));
+          return {
+            value: option,
+            label: selectOption?.title ?? option.toString(),
+          };
+        })}
       />
     );
   }
@@ -188,13 +205,15 @@ export const FormField = (props: FormFieldProps) => {
 
   const refProps = getRefProps(type);
   if (refProps) {
+    const isCreateTarget = !createTypename || refProps.typename === createTypename;
     return (
       <RefField
         {...fieldProps}
         {...refProps}
-        createOptionLabel={createOptionLabel}
-        createOptionIcon={createOptionIcon}
-        createInitialValuePath={createInitialValuePath}
+        createOptionLabel={isCreateTarget ? createOptionLabel : undefined}
+        createOptionIcon={isCreateTarget ? createOptionIcon : undefined}
+        createInitialValuePath={isCreateTarget ? createInitialValuePath : undefined}
+        createFieldMap={isCreateTarget ? createFieldMap : undefined}
         db={db}
         schemaHook={schemaHook}
         getOptions={getRefOptions}

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

@@ -10,7 +10,7 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type FormFieldComponentProps, FormFieldWrapper } from './FormFieldComponent';
 
-const Component = ({
+const DefaultStory = ({
   type,
   placeholder,
   readonly,
@@ -24,7 +24,7 @@ const Component = ({
   );
 
   return (
-    <div className='plb-cardSpacingBlock pli-cardSpacingInline'>
+    <div className='p-form-padding'>
       <FormFieldWrapper<string> {...props}>
         {({ value = '' }) => (
           <Input.TextInput
@@ -41,10 +41,10 @@ const Component = ({
   );
 };
 
-const meta: Meta<typeof Component> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-form/FormFieldComponent',
-  component: Component,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Form/FormFieldComponent.tsx

@@ -15,12 +15,10 @@ import React, {
 
 import { type Format } from '@dxos/echo/internal';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
-import { errorText, mx } from '@dxos/ui-theme';
+import { inputTextLabel } from '@dxos/ui-theme';
 
 import { type FormFieldStatus } from '../../hooks';
 
-const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
-
 /**
  * Dynamic props passed to input components.
  */
@@ -33,7 +31,6 @@ export type FormFieldStateProps<T = any> = {
 
 /**
  * Presentation mode.
- *
  * - full: Show label, control, and status.
  * - compact: Show label and control.
  * - inline: Control only.
@@ -79,14 +76,12 @@ export type FormFieldLabelProps = {
 
 export const FormFieldLabel = ({ label, error, readonly, asChild }: FormFieldLabelProps) => {
   const Label = readonly || asChild ? 'span' : Input.Label;
-  const labelProps = readonly || asChild ? { className: 'text-description text-sm' } : { classNames: '!mlb-0 text-sm' };
-
   return (
-    <div role='none' className={mx('flex justify-between items-center', labelSpacing)}>
-      <Label {...labelProps}>{label}</Label>
+    <div role='none' className='flex items-center justify-between'>
+      <Label className={inputTextLabel}>{label}</Label>
       {error && (
         <Tooltip.Trigger asChild content={error} side='bottom'>
-          <Icon icon='ph--warning--regular' size={4} classNames={errorText} />
+          <Icon icon='ph--warning--regular' size={4} classNames='text-error-text' />
         </Tooltip.Trigger>
       )}
     </div>
@@ -118,15 +113,17 @@ export const FormFieldWrapper = <T,>(props: FormFieldWrapperProps<T>) => {
   const str = String(value ?? '');
 
   return (
-    <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
-      {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
-      {layout === 'full' && (
-        <Input.DescriptionAndValidation>
-          <Input.Validation>{error}</Input.Validation>
-        </Input.DescriptionAndValidation>
-      )}
-    </Input.Root>
+    <div role='none' className='contents'>
+      <Input.Root validationValence={status}>
+        {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+        {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
+        {layout === 'full' && (
+          <Input.DescriptionAndValidation>
+            <Input.Validation>{error}</Input.Validation>
+          </Input.DescriptionAndValidation>
+        )}
+      </Input.Root>
+    </div>
   );
 };
 
@@ -158,8 +155,8 @@ export class FormFieldErrorBoundary extends Component<FormFieldErrorBoundaryProp
   override render() {
     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>
+        <div className='flex gap-2 border border-rose-fill font-mono text-sm'>
+          <span className='bg-rose-fill text-surface-text px-1 font-thin'>ERROR</span>
           {String(this.props.path?.join('.'))}
         </div>
       );

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,116 @@ 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'
+    | 'createTypename'
+    | 'createOptionLabel'
+    | 'createOptionIcon'
+    | 'createInitialValuePath'
+    | 'createFieldMap'
+    | '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

@@ -4,7 +4,7 @@
 
 import * as Option from 'effect/Option';
 import * as SchemaAST from 'effect/SchemaAST';
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
 import { IconButton, useTranslation } from '@dxos/react-ui';
@@ -77,10 +77,10 @@ export const ArrayField = ({
         <FormFieldLabel readonly={readonly} label={label} asChild />
       )}
 
-      <div role='none' className='flex flex-col gap-2'>
+      <div role='none' className='flex flex-col gap-form-gap'>
         {values?.map((_, index) => {
           return (
-            <div role='none' key={index} className='grid grid-cols-[1fr_min-content] gap-2 last:mb-3'>
+            <div role='none' key={index} className='flex gap-form-gap last:mb-form-gap'>
               <FormField
                 autoFocus={index === values.length - 1}
                 type={elementType}
@@ -91,13 +91,13 @@ 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
-                      label={t('button remove')}
+                      label={t('remove.button')}
                       onClick={() => handleDelete(index)}
                       classNames='self-center'
                     />
@@ -112,9 +112,9 @@ export const ArrayField = ({
       {/* TODO(burdon): Get label from schema. */}
       {!readonly && layout !== 'static' && (
         <IconButton
-          classNames='flex is-full _mlb-cardSpacingBlock'
+          classNames='flex w-full'
           icon='ph--plus--regular'
-          label={t('add field')}
+          label={t('add-field.button')}
           onClick={handleAdd}
         />
       )}
@@ -140,6 +140,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/GeoPointField.tsx

@@ -62,17 +62,17 @@ export const GeoPointField = ({
       {layout === 'static' ? (
         <LatLng {...value} />
       ) : (
-        <div role='none' className='grid grid-cols-2 gap-2'>
+        <div role='none' className='grid grid-cols-2 gap-form-gap'>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('latitude label')}</Input.Label>}
+              {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
                 min='-90'
                 max='90'
                 disabled={!!readonly}
-                placeholder={t('latitude placeholder')}
+                placeholder={t('latitude.placeholder')}
                 value={latitudeText ?? ''}
                 onChange={handleChange('latitude', setLatitudeText)}
                 onBlur={onBlur}
@@ -81,14 +81,14 @@ export const GeoPointField = ({
           </div>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('longitude label')}</Input.Label>}
+              {layout !== 'inline' && <Input.Label>{t('longitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
                 min='-180'
                 max='180'
                 disabled={!!readonly}
-                placeholder={t('longitude placeholder')}
+                placeholder={t('longitude.placeholder')}
                 value={longitudeText ?? ''}
                 onChange={handleChange('longitude', setLongitudeText)}
                 onBlur={onBlur}
@@ -106,7 +106,7 @@ const LatLng = ({ latitude = 0, longitude = 0 }: GeoLocation) => {
   const lngHem = longitude >= 0 ? 'E' : 'W';
 
   return (
-    <span className='inline-flex items-center gap-1'>
+    <span className='inline-flex items-center gap-form-gap'>
       <span>
         <span>{Math.abs(latitude).toFixed(5)}</span>
         <span className='text-subdued'>°{latHem}</span>

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' }}