@dxos/react-ui-form 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

package/src/components/Form/{fields → FormField/fields/SelectOptionField}/SelectOptionField.tsx

@@ -6,14 +6,15 @@ import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, us
 
 import { type SelectOption } from '@dxos/echo/Format';
 import { PublicKey } from '@dxos/keys';
-import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
-import { List } from '@dxos/react-ui-list';
+import { type ChromaticPalette, IconButton, Input, Tag, ToggleIconButton, useTranslation } from '@dxos/react-ui';
+import { OrderedList } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
 import { hues, osTranslations } from '@dxos/ui-theme';
 
 import { translationKey } from '#translations';
+import { type FormFieldRendererProps } from '#types';
 
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { FormFieldLabel } from '../../FormFieldWrapper';
 
 export const SelectOptionField = ({
   type,
@@ -23,7 +24,7 @@ export const SelectOptionField = ({
   getStatus,
   getValue,
   onValueChange,
-}: FormFieldComponentProps<SelectOption[] | undefined>) => {
+}: FormFieldRendererProps<SelectOption[] | undefined>) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
   const [selected, setSelectedId] = useState<string | null>(null);
@@ -123,62 +124,63 @@ export const SelectOptionField = ({
       <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />
       <div>
         {options && (
-          <List.Root
+          <OrderedList.Root<SelectOption>
             items={options}
             isItem={(_item) => true}
+            getId={(option) => option.id}
             onMove={readonly ? undefined : handleMove}
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
+              <OrderedList.Content classNames='w-full overflow-auto'>
                 {items?.map((item) => (
-                  <div key={item.id}>
-                    <List.Item
-                      role='button'
-                      item={item}
-                      classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
-                      aria-expanded={selected === item.id}
-                    >
-                      <div className='flex items-center'>
-                        <List.ItemDragHandle disabled={!!readonly} />
-                        <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
-                          {/* TODO(ZaymonFC): Move spacer into Tag component. */}
-                          <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
-                        </List.ItemTitle>
-                        <IconButton
-                          iconOnly
-                          variant='ghost'
-                          label={t(selected === item.id ? 'collapse.label' : 'expand.label', { ns: osTranslations })}
-                          icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
-                          onClick={() => handleClick(item.id)}
-                        />
+                  <OrderedList.Item
+                    key={item.id}
+                    id={item.id}
+                    item={item}
+                    canDrag={!readonly}
+                    classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
+                  >
+                    <div className='flex items-center'>
+                      <OrderedList.DragHandle />
+                      {/* TODO(ZaymonFC): Move spacer into Tag component. */}
+                      <div className='flex grow items-center truncate px-2' onClick={() => handleClick(item.id)}>
+                        <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                       </div>
-                      {selected === item.id && (
-                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-md'>
-                          <Input.Label classNames='text-sm'>{t('select-option.label')}</Input.Label>
-                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
-                            <Input.TextInput
-                              disabled={!!readonly}
-                              placeholder={t('select-option-label.placeholder')}
-                              ref={selected === item.id ? inputRef : undefined}
-                              value={item.title}
-                              onChange={handleTitleChange(item.id)}
-                              onKeyDown={handleKeyDown}
-                              classNames='flex-1'
-                            />
-                            <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
-                            <IconButton
-                              disabled={!!readonly}
-                              icon='ph--trash--fill'
-                              iconOnly
-                              label={t('select-option-delete.button')}
-                              onClick={() => handleDelete(item.id)}
-                            />
-                          </div>
+                      <ToggleIconButton
+                        iconOnly
+                        variant='ghost'
+                        active={selected === item.id}
+                        icon='ph--caret-right--regular'
+                        label={t(selected === item.id ? 'collapse.label' : 'expand.label', { ns: osTranslations })}
+                        onClick={() => handleClick(item.id)}
+                      />
+                    </div>
+                    {selected === item.id && (
+                      <div className='flex flex-col p-form-padding gap-form-gap dx-density-md'>
+                        <Input.Label classNames='text-sm'>{t('select-option.label')}</Input.Label>
+                        <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
+                          <Input.TextInput
+                            disabled={!!readonly}
+                            placeholder={t('select-option-label.placeholder')}
+                            ref={selected === item.id ? inputRef : undefined}
+                            value={item.title}
+                            onChange={handleTitleChange(item.id)}
+                            onKeyDown={handleKeyDown}
+                            classNames='flex-1'
+                          />
+                          <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
+                          <IconButton
+                            disabled={!!readonly}
+                            icon='ph--trash--fill'
+                            iconOnly
+                            label={t('select-option-delete.button')}
+                            onClick={() => handleDelete(item.id)}
+                          />
                         </div>
-                      )}
-                    </List.Item>
-                  </div>
+                      </div>
+                    )}
+                  </OrderedList.Item>
                 ))}
                 <IconButton
                   variant='ghost'
@@ -188,9 +190,9 @@ export const SelectOptionField = ({
                   disabled={!!readonly}
                   classNames='w-full'
                 />
-              </div>
+              </OrderedList.Content>
             )}
-          </List.Root>
+          </OrderedList.Root>
         )}
       </div>
     </Input.Root>

package/src/components/Form/FormField/fields/SelectOptionField/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './SelectOptionField';

package/src/components/Form/FormField/fields/TextAreaField/TextAreaField.stories.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { Format } from '@dxos/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+const schema = Schema.Struct({
+  notes: Format.Text.annotations({ title: 'Notes' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ notes: 'Multi-line\nplain text.' });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/TextAreaField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/{fields → FormField/fields/TextAreaField}/TextAreaField.tsx

@@ -6,7 +6,9 @@ import React, { useCallback } from 'react';
 
 import { Input, type TextAreaProps } from '@dxos/react-ui';
 
-import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+import { type FormFieldRendererProps } from '#types';
+
+import { FormFieldWrapper } from '../../FormFieldWrapper';
 
 export const TextAreaField = ({
   type,
@@ -15,7 +17,7 @@ export const TextAreaField = ({
   onValueChange,
   onBlur,
   ...props
-}: FormFieldComponentProps<string>) => {
+}: FormFieldRendererProps<string>) => {
   const handleChange = useCallback<NonNullable<TextAreaProps['onChange']>>(
     (event) => onValueChange(type, event.target.value),
     [type, onValueChange],

package/src/components/Form/FormField/fields/TextAreaField/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './TextAreaField';

package/src/components/Form/FormField/fields/TextField/TextField.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+const schema = Schema.Struct({
+  name: Schema.String.annotations({ title: 'Name' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ name: 'Alice' });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/TextField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/{fields → FormField/fields/TextField}/TextField.tsx

@@ -6,7 +6,9 @@ import React, { useCallback } from 'react';
 
 import { Input, type TextInputProps } from '@dxos/react-ui';
 
-import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+import { type FormFieldRendererProps } from '#types';
+
+import { FormFieldWrapper } from '../../FormFieldWrapper';
 
 export const TextField = ({
   type,
@@ -15,7 +17,7 @@ export const TextField = ({
   onBlur,
   onValueChange,
   ...props
-}: FormFieldComponentProps<string>) => {
+}: FormFieldRendererProps<string>) => {
   const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
     (event) => onValueChange(type, event.target.value),
     [type, onValueChange],

package/src/components/Form/FormField/fields/TextField/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './TextField';

package/src/components/Form/FormField/fields/TupleField/TupleField.stories.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+import { TupleField } from './TupleField';
+
+// TupleField isn't auto-dispatched and needs a `binding`; wire it via `fieldMap`.
+const schema = Schema.Struct({
+  point: Schema.Struct({ x: Schema.Number, y: Schema.Number }).annotations({ title: 'Point' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ point: { x: 1, y: 2 } });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        fieldMap={{ point: (props) => <TupleField {...props} binding={['x', 'y']} /> }}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/TupleField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/{fields → FormField/fields/TupleField}/TupleField.tsx

@@ -8,7 +8,9 @@ import { Input } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 import { safeParseFloat } from '@dxos/util';
 
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { type FormFieldRendererProps } from '#types';
+
+import { FormFieldLabel } from '../../FormFieldWrapper';
 
 const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
 
@@ -22,7 +24,7 @@ export const TupleField = ({
   getValue,
   onValueChange,
   onBlur,
-}: FormFieldComponentProps<Record<string, number>> & {
+}: FormFieldRendererProps<Record<string, number>> & {
   binding: string[];
 }) => {
   const { status, error } = getStatus();

package/src/components/Form/FormField/fields/TupleField/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './TupleField';

package/src/components/Form/{fields → FormField/fields}/index.ts

@@ -6,7 +6,6 @@ export * from './ArrayField';
 export * from './BooleanField';
 export * from './DateField';
 export * from './GeoPointField';
-export * from './InlineRefField';
 export * from './MarkdownField';
 export * from './NumberField';
 export * from './RefField';

package/src/components/Form/FormField/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './FieldHeader';
+export * from './FormField';
+export * from './fields';
+export * from './FormFieldWrapper';

package/src/components/Form/{FormFieldSet.tsx → FormFieldSet/FormFieldSet.tsx}

@@ -5,19 +5,18 @@
 import * as Option from 'effect/Option';
 import React, { useMemo, useState } from 'react';
 
+import { DEFAULT_LAYOUT_NAME, FormLayoutAnnotation } from '@dxos/echo/Annotation';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { SchemaEx } from '@dxos/effect';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
+import { ToggleIconButton, useTranslation } from '@dxos/react-ui';
 
 import { translationKey } from '#translations';
+import { type CreateOptions, type FormFieldOptions, type RefFieldDataProps } from '#types';
 
-import { type FormHandlerProps } from '../../hooks';
-import { getRootFormProperties } from '../../util';
-import { useFormValues } from './Form';
-import { FormField, type FormFieldProps } from './FormField';
-import { FormFieldErrorBoundary, FormFieldLabel } from './FormFieldComponent';
-import { DEFAULT_LAYOUT_NAME, FormLayout, FormLayoutAnnotation } from './Layout';
+import { type FormHandlerProps, useFormValues } from '../../../hooks';
+import { getRootFormProperties } from '../../../util';
+import { FormField, FormFieldErrorBoundary, FormFieldLabel, type FormFieldProps } from '../FormField';
+import { FormLayout } from '../FormLayout';
 
 const FORM_FIELDSET_NAME = 'Form.FieldSet';
 
@@ -37,25 +36,10 @@ export type FormFieldSetProps<T extends AnyProperties> = {
    */
   layoutName?: string;
 } & Pick<FormHandlerProps<T>, 'schema'> &
-  Pick<
-    FormFieldProps,
-    | 'path'
-    | 'autoFocus'
-    | 'readonly'
-    | 'layout'
-    | 'projection'
-    | 'fieldMap'
-    | 'fieldProvider'
-    | 'createTypename'
-    | 'createOptionLabel'
-    | 'createOptionIcon'
-    | 'createInitialValuePath'
-    | 'createFieldMap'
-    | 'db'
-    | 'useType'
-    | 'getOptions'
-    | 'onCreate'
-  >;
+  Pick<FormFieldProps, 'path' | 'autoFocus'> &
+  FormFieldOptions &
+  CreateOptions &
+  Pick<RefFieldDataProps, 'useType' | 'getOptions' | 'onCreate'>;
 
 /**
  * Renders a set of form fields derived from a schema object.
@@ -76,7 +60,7 @@ export const FormFieldSet = ({
   const { t } = useTranslation(translationKey);
   const values = useFormValues(FORM_FIELDSET_NAME, path);
   const properties = useFormFieldSetProperties({ schema, values, exclude, sort, projection });
-  // TODO(burdon): Generalize collapse state (cf. useSelected in react-ui-attention, plugin-markdown cursor state).
+  // TODO(burdon): Generalize collapse state (cf. useSelection in react-ui-attention, plugin-markdown cursor state).
   const [collapsed, setCollapsed] = useState(false);
   if ((readonly || layout === 'static') && values == null) {
     return null;
@@ -120,19 +104,19 @@ export const FormFieldSet = ({
     <>
       {layout !== 'inline' && label && (
         <FormFieldLabel
-          asChild
+          standalone
           classNames='pl-2'
           label={label}
           path={SchemaEx.createJsonPath(path ?? [])}
           button={
             collapsible && (
-              <IconButton
+              <ToggleIconButton
+                active={!collapsed}
                 classNames='px-1 mr-0.5'
                 variant='ghost'
                 density='xs'
                 iconOnly
                 icon='ph--caret-right--regular'
-                iconClassNames={mx('transition-transform', !collapsed && 'rotate-90')}
                 label={t(collapsed ? 'expand-fields.label' : 'collapse-fields.label')}
               />
             )
@@ -146,7 +130,7 @@ export const FormFieldSet = ({
 
   // Nested field sets render inside an indented, bordered container with a collapse toggle.
   if (collapsible) {
-    return <div className='border border-subdued-separator rounded-sm mt-2'>{content}</div>;
+    return <div className='border border-subdued-separator rounded-sm mb-1'>{content}</div>;
   }
 
   return content;

package/src/components/Form/FormFieldSet/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './FormFieldSet';

package/src/components/Form/{Layout → FormLayout}/FormLayout.stories.tsx

@@ -19,9 +19,9 @@ import { trim } from '@dxos/util';
 
 import { translations } from '#translations';
 
-import { TestLayout, TestPanel } from '../../testing';
-import { Form, type FormRootProps, omitId } from '../Form';
-import { FormLayoutAnnotation } from './annotation';
+import { TestLayout, TestPanel } from '../../../testing';
+import { omitId } from '../../../util';
+import { Form, type FormRootProps } from '../Form';
 import { parseLayout } from './parser';
 
 /**
@@ -84,7 +84,7 @@ const FLIGHT_LAYOUT_COMPACT = trim`
  */
 const AnnotatedFlight = Type.getSchema(Flight)
   .annotations({})
-  .pipe(FormLayoutAnnotation.set({ default: FLIGHT_LAYOUT, compact: FLIGHT_LAYOUT_COMPACT }));
+  .pipe(Annotation.FormLayoutAnnotation.set({ default: FLIGHT_LAYOUT, compact: FLIGHT_LAYOUT_COMPACT }));
 
 /**
  * Sample schema with nested `Place` structs carrying a `LabelAnnotation`.

package/src/components/Form/{Layout → FormLayout}/FormLayout.tsx

@@ -13,10 +13,11 @@ import { type AnyProperties } from '@dxos/echo/internal';
 import { SchemaEx } from '@dxos/effect';
 import { Input } from '@dxos/react-ui';
 
-import { useFormFieldState } from '../Form';
+import { type FormPresentation } from '#types';
+
+import { useFormFieldState } from '../../../hooks';
 import { FormField, type FormFieldProps } from '../FormField';
-import { FormFieldErrorBoundary, FormFieldLabel, type Presentation } from '../FormFieldComponent';
-import { DEFAULT_LAYOUT_NAME, FormLayoutAnnotation } from './annotation';
+import { FormFieldErrorBoundary, FormFieldLabel } from '../FormField';
 import { LayoutParseError, type LayoutNode, parseLayout } from './parser';
 
 const FORM_LAYOUT_NAME = 'Form.Layout';
@@ -57,14 +58,14 @@ type FormFieldSetSubset = Pick<
 export const FormLayout = ({
   schema,
   template,
-  name = DEFAULT_LAYOUT_NAME,
+  name = Annotation.DEFAULT_LAYOUT_NAME,
   path,
   readonly,
   layout,
   projection,
   ...props
 }: FormLayoutProps) => {
-  const annotated = Option.getOrUndefined(FormLayoutAnnotation.get(schema));
+  const annotated = Option.getOrUndefined(Annotation.FormLayoutAnnotation.get(schema));
   const source = template ?? annotated?.[name];
   if (source === undefined) {
     throw new LayoutParseError(
@@ -222,7 +223,7 @@ type LabelFieldProps = {
   schema: Schema.Schema<any>;
   label: string;
   path: (string | number)[];
-  layout?: Presentation;
+  layout?: FormPresentation;
 };
 
 /**

package/src/components/Form/{Layout → FormLayout}/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './annotation';
-export { FormLayout } from './FormLayout';
+export { FormLayout, type FormLayoutProps } from './FormLayout';
 export { LayoutParseError, parseLayout, type LayoutNode } from './parser';

package/src/components/Form/index.ts

@@ -2,10 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './fields';
+export * from './meta-tags';
 
 export * from './Form';
-export * from './FormFieldComponent';
-export * from './FormTooltipsContext';
-export * from './meta-tags';
-export * from './Layout';
+export * from './FormField';
+export * from './FormFieldSet';

package/src/components/Form/meta-tags.ts

@@ -6,7 +6,7 @@ import * as Schema from 'effect/Schema';
 
 import { Ref, Tag } from '@dxos/echo';
 
-import { omitId } from './Form';
+import { omitId } from '../../util';
 
 /**
  * Form-field key for the synthetic meta-tags array spliced into property/create forms.