@dxos/react-ui-form 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/FieldEditor/FieldEditor.tsx

@@ -79,6 +79,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
         }
         return { fieldSchema };
       });
+
       setReferenceSchema((prev) => {
         if (_props.referenceSchema !== prev?.typename) {
           const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
@@ -129,7 +130,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
     onSave();
   }, [onSave]);
 
-  const Custom: Partial<Record<string, InputComponent>> = useMemo(
+  const custom: Partial<Record<string, InputComponent>> = useMemo(
     () => ({
       ['format' satisfies keyof PropertyType]: (props) => (
         <SelectInput
@@ -187,7 +188,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
       onValidate={handleValidate}
       onSave={handleSave}
       onCancel={handleCancel}
-      Custom={Custom}
+      Custom={custom}
     />
   );
 };

package/src/components/Form/ArrayField.tsx

@@ -2,15 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
-import React, { useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback } from 'react';
 
-import { AST } from '@dxos/echo-schema';
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 
 import { type ComponentLookup } from './Form';
@@ -18,8 +16,7 @@ import { FormField } from './FormContent';
 import { useFormValues, type FormInputStateProps } from './FormContext';
 import { InputHeader, type InputComponent } from './Input';
 import { translationKey } from '../../translations';
-
-const padding = 'px-2';
+import { findArrayElementType } from '../../util';
 
 type ArrayFieldProps = {
   property: SchemaProperty<any>;
@@ -33,16 +30,17 @@ type ArrayFieldProps = {
 export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
   const { t } = useTranslation(translationKey);
   const { ast, name, type, title } = property;
-  const values = useFormValues(path ?? []) as any[];
+  // TODO(wittjosiah): The fallback to an empty array stops the form from crashing but isn't immediately live.
+  //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
+  const values = (useFormValues(path ?? []) ?? []) as any[];
   invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
   const label = title ?? pipe(name, capitalize);
 
-  const tupleType = findNode(ast, AST.isTupleType);
-  const elementType = (tupleType as AST.TupleType | undefined)?.rest[0]?.type;
+  const elementType = findArrayElementType(ast);
 
-  const getDefaultObjectValue = (typeNode: AST.AST): any => {
+  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
     const baseNode = findNode(typeNode, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, AST.isTypeLiteral);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
     if (!typeLiteral) {
       return {};
     }
@@ -50,17 +48,12 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
     return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
   };
 
-  const newValue = useMemo(() => {
-    if (type === 'object' && elementType) {
-      return getDefaultObjectValue(elementType);
-    } else {
-      return SimpleType.getDefaultValue(type);
-    }
-  }, [type, elementType]);
+  const getDefaultValue = () =>
+    type === 'object' && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
 
   const handleAdd = useCallback(() => {
-    inputProps.onValueChange(type, [...values, newValue]);
-  }, [type, elementType, inputProps, newValue, values]);
+    inputProps.onValueChange(type, [...values, getDefaultValue()]);
+  }, [type, elementType, inputProps, values]);
 
   const handleRemove = useCallback(
     (index: number) => {
@@ -74,38 +67,58 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
     return null;
   }
 
-  return (
-    <div role='none' className={mx(padding)}>
+  return readonly && values.length < 1 ? null : (
+    <>
       <InputHeader>{label}</InputHeader>
-      <div role='none' className='flex flex-col gap-1'>
-        {values.map((_value, index) => (
-          <div key={index} role='none' className='flex items-center gap-1'>
-            <div role='none' className='flex-1'>
-              <FormField
-                property={{
-                  ...property,
-                  array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
-                  ast: elementType,
-                }}
-                path={[...(path ?? []), index]}
-                readonly={readonly}
-                inline
-                Custom={Custom}
-                lookupComponent={lookupComponent}
-              />
-            </div>
-            <IconButton
-              icon='ph--trash--regular'
-              iconOnly
-              label={t('button remove')}
-              onClick={() => handleRemove(index)}
+      <div
+        role='none'
+        className={
+          readonly
+            ? 'flex flex-wrap gap-1 mlb-1'
+            : values.length > 0
+              ? 'grid gap-1 grid-cols-[1fr_min-content] mlb-1'
+              : 'hidden'
+        }
+      >
+        {values.map((_value, index) => {
+          const field = (
+            <FormField
+              property={{
+                ...property,
+                array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
+                ast: elementType,
+              }}
+              path={[...(path ?? []), index]}
+              readonly={readonly}
+              inline
+              Custom={Custom}
+              lookupComponent={lookupComponent}
             />
-          </div>
-        ))}
-      </div>
-      <div role='none' className='flex justify-between items-center plb-1'>
-        <IconButton icon='ph--plus--regular' iconOnly label={t('button add')} onClick={handleAdd} />
+          );
+          return readonly ? (
+            field
+          ) : (
+            <Fragment key={index}>
+              <div role='none'>{field}</div>
+              <IconButton
+                icon='ph--trash--regular'
+                iconOnly
+                label={t('button remove')}
+                onClick={() => handleRemove(index)}
+                classNames='self-center'
+              />
+            </Fragment>
+          );
+        })}
       </div>
-    </div>
+      {!readonly && (
+        <IconButton
+          classNames='is-full mlb-1 flex'
+          icon='ph--plus--regular'
+          label={t('add field')}
+          onClick={handleAdd}
+        />
+      )}
+    </>
   );
 };

package/src/components/Form/Defaults.tsx

@@ -4,9 +4,10 @@
 
 import React, { useCallback, useEffect, useRef } from 'react';
 
-import { Input, Select } from '@dxos/react-ui';
+import { Input, Select, useTranslation } from '@dxos/react-ui';
 
 import { type InputProps, InputHeader } from './Input';
+import { translationKey } from '../../translations';
 
 export const TextInput = ({
   type,
@@ -21,20 +22,26 @@ export const TextInput = ({
 }: InputProps) => {
   const { status, error } = getStatus();
 
-  return (
+  return disabled && !getValue() ? null : disabled && inputOnly ? (
+    <p>{getValue() ?? ''}</p>
+  ) : (
     <Input.Root validationValence={status}>
       {!inputOnly && (
         <InputHeader error={error}>
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.TextInput
-        disabled={disabled}
-        placeholder={placeholder}
-        value={getValue() ?? ''}
-        onChange={(event) => onValueChange(type, event.target.value)}
-        onBlur={onBlur}
-      />
+      {disabled ? (
+        <p>{getValue() ?? ''}</p>
+      ) : (
+        <Input.TextInput
+          disabled={disabled}
+          placeholder={placeholder}
+          value={getValue() ?? ''}
+          onChange={(event) => onValueChange(type, event.target.value)}
+          onBlur={onBlur}
+        />
+      )}
       {inputOnly && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );
@@ -53,29 +60,36 @@ export const NumberInput = ({
 }: InputProps) => {
   const { status, error } = getStatus();
 
-  return (
+  return disabled && !getValue() ? null : disabled && inputOnly ? (
+    <p>{getValue() ?? ''}</p>
+  ) : (
     <Input.Root validationValence={status}>
       {!inputOnly && (
         <InputHeader error={error}>
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.TextInput
-        type='number'
-        disabled={disabled}
-        placeholder={placeholder}
-        value={getValue() ?? 0}
-        onChange={(event) => onValueChange(type, event.target.value)}
-        onBlur={onBlur}
-      />
+      {disabled ? (
+        <p>{getValue() ?? ''}</p>
+      ) : (
+        <Input.TextInput
+          type='number'
+          disabled={disabled}
+          placeholder={placeholder}
+          value={getValue() ?? 0}
+          onChange={(event) => onValueChange(type, event.target.value)}
+          onBlur={onBlur}
+        />
+      )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };
 
-export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange }: InputProps) => {
+export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, disabled }: InputProps) => {
   const { status, error } = getStatus();
   const checked = Boolean(getValue());
+  const { t } = useTranslation(translationKey);
 
   return (
     <Input.Root validationValence={status}>
@@ -84,7 +98,11 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
+      {disabled ? (
+        <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
+      ) : (
+        <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
+      )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
@@ -107,29 +125,36 @@ export const SelectInput = ({
 }: SelectInputOptions) => {
   const { status, error } = getStatus();
 
-  return (
+  const value = getValue() as string | undefined;
+  const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
+
+  return disabled && !value ? null : (
     <Input.Root validationValence={status}>
       {!inputOnly && (
         <InputHeader error={error}>
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Select.Root value={getValue()} onValueChange={(value) => onValueChange(type, value)}>
-        {/* TODO(burdon): Placeholder not working? */}
-        <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
-        <Select.Portal>
-          <Select.Content>
-            <Select.Viewport>
-              {options?.map(({ value, label }) => (
-                // NOTE: Numeric values are converted to and from strings.
-                <Select.Option key={String(value)} value={String(value)}>
-                  {label ?? String(value)}
-                </Select.Option>
-              ))}
-            </Select.Viewport>
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
+      {disabled ? (
+        <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
+      ) : (
+        <Select.Root value={value} onValueChange={handleValueChange}>
+          {/* TODO(burdon): Placeholder not working? */}
+          <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {options?.map(({ value, label }) => (
+                  // NOTE: Numeric values are converted to and from strings.
+                  <Select.Option key={String(value)} value={String(value)}>
+                    {label ?? String(value)}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      )}
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
@@ -177,17 +202,21 @@ export const MarkdownInput = ({
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.TextArea
-        ref={textareaRef}
-        disabled={disabled}
-        placeholder={placeholder}
-        value={getValue() ?? ''}
-        classNames={'min-bs-auto max-h-40 overflow-auto'}
-        onChange={(event) => onValueChange(type, event.target.value)}
-        onBlur={onBlur}
-        style={{ resize: 'none' }}
-        spellCheck={false}
-      />
+      {disabled ? (
+        <p>{getValue() ?? ''}</p>
+      ) : (
+        <Input.TextArea
+          ref={textareaRef}
+          disabled={disabled}
+          placeholder={placeholder}
+          value={getValue() ?? ''}
+          classNames={'min-bs-auto max-h-40 overflow-auto'}
+          onChange={(event) => onValueChange(type, event.target.value)}
+          onBlur={onBlur}
+          style={{ resize: 'none' }}
+          spellCheck={false}
+        />
+      )}
       {inputOnly && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );