@dxos/react-ui-form 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f

package/src/components/Form/Form.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ReactElement, useMemo } from 'react';
+import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
 
 import { type BaseObject, type S, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -23,6 +23,8 @@ export type ComponentLookup = (args: {
   inputProps: InputProps;
 }) => ReactElement | undefined;
 
+export type CustomInputMap = Partial<Record<string, InputComponent>>;
+
 export type FormProps<T extends BaseObject> = ThemedClassName<
   {
     values: Partial<T>;
@@ -44,7 +46,7 @@ export type FormProps<T extends BaseObject> = ThemedClassName<
      * Map of custom renderers for specific properties.
      * Prefer lookupComponent for plugin specific input surfaces.
      */
-    Custom?: Partial<Record<string, InputComponent>>;
+    Custom?: CustomInputMap;
   } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>
 >;
 
@@ -53,6 +55,7 @@ export const Form = <T extends BaseObject>({
   schema,
   values: initialValues,
   path = [],
+  autoFocus,
   readonly,
   filter,
   sort,
@@ -65,18 +68,32 @@ export const Form = <T extends BaseObject>({
   lookupComponent,
   Custom,
 }: FormProps<T>) => {
+  const formRef = useRef<HTMLDivElement>(null);
   const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
 
+  // Focus the first input element within this form.
+  useEffect(() => {
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector('input');
+      if (input) {
+        input.focus();
+      }
+    }
+  }, [autoFocus]);
+
   return (
     <FormProvider
+      formRef={formRef}
       schema={schema}
+      autoSave={autoSave}
       initialValues={initialValues}
       onValuesChanged={onValuesChanged}
       onValidate={onValidate}
       onValid={onValid}
       onSave={onSave}
     >
-      <div role='none' className={mx('p-2', classNames)} data-testid={testId}>
+      {/* TODO(burdon): Remove padding. */}
+      <div ref={formRef} role='none' className={mx('p-2', classNames)} data-testid={testId}>
         <FormFields
           schema={schema}
           path={path}

package/src/components/Form/FormActions.tsx

@@ -20,7 +20,7 @@ export const FormActions = ({ onCancel, readonly }: FormActionsProps) => {
   const { canSave, handleSave } = useFormContext();
 
   return (
-    <div role='none' className='flex justify-center'>
+    <div role='none' className='mt-2 flex justify-center'>
       <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
         {onCancel && !readonly && (
           <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />

package/src/components/Form/FormContent.tsx

@@ -49,10 +49,6 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
     [examples, description],
   );
 
-  if (array) {
-    return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
-  }
-
   const FoundComponent = lookupComponent?.({
     prop: name,
     schema: S.make(ast),
@@ -67,14 +63,33 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
   });
 
   if (FoundComponent) {
-    return <div>{FoundComponent}</div>;
+    return <div role='none'>{FoundComponent}</div>;
   }
 
   const jsonPath = createJsonPath(path ?? []);
-  const InputComponent = Custom?.[jsonPath] || getInputComponent(type, format);
+  const CustomComponent = Custom?.[jsonPath];
+  if (CustomComponent) {
+    return (
+      <CustomComponent
+        type={type}
+        format={format}
+        label={label}
+        inputOnly={inline}
+        placeholder={placeholder}
+        disabled={readonly}
+        {...inputProps}
+      />
+    );
+  }
+
+  if (array) {
+    return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
+  }
+
+  const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
     return (
-      <div>
+      <div role='none'>
         <InputComponent
           type={type}
           format={format}
@@ -113,7 +128,7 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
 
     if (typeLiteral) {
       return (
-        <div>
+        <div role='none'>
           {!inline && <div>{label}</div>}
           <FormFields schema={S.make(typeLiteral)} path={path} readonly={readonly} Custom={Custom} />
         </div>
@@ -135,7 +150,7 @@ export const FormFields = ({ schema, path, filter, sort, readonly, lookupCompone
   }, [schema, values, filter, sort]);
 
   return (
-    <div role='form' className={mx('flex flex-col w-full gap-2 py-2')}>
+    <div role='form' className={mx('flex flex-col w-full gap-2')}>
       {properties
         .map((property) => {
           return (

package/src/components/Form/FormContext.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { createContext, useContext, type FocusEvent, type PropsWithChildren } from 'react';
+import React, { createContext, useContext, useEffect, type FocusEvent, type PropsWithChildren } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -42,7 +42,51 @@ export const useInputProps = (path: (string | number)[] = []): FormInputStatePro
   };
 };
 
-export const FormProvider = ({ children, ...formOptions }: PropsWithChildren<FormOptions<any>>) => {
-  const formHandler = useForm(formOptions);
-  return <FormContext.Provider value={formHandler}>{children}</FormContext.Provider>;
+export const FormProvider = ({
+  children,
+  formRef,
+  autoSave,
+  ...formOptions
+}: PropsWithChildren<
+  FormOptions<any> & {
+    formRef?: React.RefObject<HTMLDivElement>;
+    autoSave?: boolean;
+  }
+>) => {
+  const form = useForm(formOptions);
+
+  useEffect(() => {
+    if (!formRef?.current) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const keyIsEnter = event.key === 'Enter';
+      const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+      const inputIsTextarea = (event.target as HTMLElement).tagName.toLowerCase() === 'textarea';
+      const inputOptOut = (event.target as HTMLElement).hasAttribute('data-no-submit');
+
+      // Regular inputs: Submit on Enter (no modifiers).
+      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
+
+      // Textareas: Submit only on Meta+Enter.
+      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
+
+      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
+        if (!autoSave && form.canSave) {
+          form.handleSave();
+        }
+        if (autoSave && form.formIsValid) {
+          (event.target as HTMLElement).blur();
+        }
+      }
+    };
+
+    const formElement = formRef.current;
+
+    formElement.addEventListener('keydown', handleKeyDown);
+    return () => formElement.removeEventListener('keydown', handleKeyDown);
+  }, [formRef, form.canSave, form.formIsValid, form.handleSave, autoSave]);
+
+  return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
 };

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

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { S, SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SelectOptionInput } from './SelectOptionsInput';
+import translations from '../../../translations';
+import { TestLayout, TestPanel } from '../../testing';
+import { Form } from '../Form';
+
+const schema = S.Struct({
+  options: S.Array(SelectOptionSchema).pipe(S.mutable),
+}).pipe(S.mutable);
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<{ options: SelectOption[] }>({
+    // TODO(Zaymon): Pick colors from our limited set.
+    options: [
+      { id: 'opt_1', title: 'First option', color: 'amber' },
+      { id: 'opt_2', title: 'Second option', color: 'emerald' },
+      { id: 'opt_3', title: 'Third option', color: 'rose' },
+    ],
+  });
+
+  return (
+    <TestLayout>
+      <TestPanel>
+        <Form
+          schema={schema}
+          values={values}
+          onSave={(vals) => setValues(vals)}
+          Custom={{ options: SelectOptionInput }}
+        />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-form/SelectOptionsInput',
+  component: SelectOptionInput,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: { translations },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: DefaultStory,
+};

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -0,0 +1,190 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState, type ChangeEvent, useRef } from 'react';
+
+import { type SelectOption } from '@dxos/echo-schema';
+import { PublicKey } from '@dxos/keys';
+import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
+import { List } from '@dxos/react-ui-list';
+import { HuePickerToolbarButton } from '@dxos/react-ui-pickers';
+import { hues, mx } from '@dxos/react-ui-theme';
+
+import { translationKey } from '../../../translations';
+import { InputHeader, type InputProps } from '../Input';
+
+// TODO(ZaymonFC): Handle disabled.
+export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+  const [selected, setSelectedId] = useState<string | null>(null);
+  const [isNewOption, setIsNewOption] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const options = getValue<SelectOption[] | undefined>();
+
+  // Initialization.
+  useEffect(() => {
+    if (options === undefined) {
+      onValueChange(type, []);
+    }
+  }, [options, onValueChange, type]);
+
+  const randomHue = () => {
+    const usedHues = new Set(options?.map((option) => option.color) ?? []);
+    // Pick a random unused option from hueTokenThemes.
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
+    if (unusedHues.length > 0) {
+      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+    }
+
+    // Pick a random one that hasn't been used in the last three options
+    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
+    return (
+      availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)]
+    );
+  };
+
+  const handleAdd = useCallback(() => {
+    const newId = PublicKey.random().truncate();
+    const newOption = { id: newId, title: '', color: randomHue() };
+    onValueChange(type, [...(options ?? []), newOption]);
+    setSelectedId(newId);
+    setIsNewOption(true);
+  }, [options, type, onValueChange]);
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      const newOptions = options?.filter((option) => option.id !== id) ?? [];
+      onValueChange(type, newOptions);
+      setSelectedId(null);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleMove = useCallback(
+    (from: number, to: number) => {
+      if (!options) {
+        return;
+      }
+
+      const newOptions = [...options];
+      const [removed] = newOptions.splice(from, 1);
+      newOptions.splice(to, 0, removed);
+      onValueChange(type, newOptions);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleClick = useCallback((id: string) => {
+    setSelectedId((current) => (current === id ? null : id));
+  }, []);
+
+  const handleTitleChange = useCallback(
+    (id: string) => (e: ChangeEvent<HTMLInputElement>) => {
+      const newOptions = options?.map((o) => (o.id === id ? { ...o, title: e.target.value } : o));
+      onValueChange(type, newOptions ?? []);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setSelectedId(null);
+    }
+  }, []);
+
+  const handleColorChange = useCallback(
+    (id: string) => (hue: string) => {
+      const newOptions = options?.map((o) => (o.id === id ? { ...o, color: hue } : o));
+      onValueChange(type, newOptions ?? []);
+    },
+    [options, type, onValueChange],
+  );
+
+  useEffect(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
+    }
+  }, [selected, isNewOption]);
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <div role='none'>
+        {options && (
+          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+            {({ items }) => (
+              <div role='list' className='w-full overflow-auto'>
+                {items?.map((item) => (
+                  <div key={item.id}>
+                    <List.Item
+                      role='button'
+                      item={item}
+                      classNames={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                      aria-expanded={selected === item.id}
+                    >
+                      <div className='flex items-center'>
+                        <List.ItemDragHandle />
+                        <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>
+                        <Icon
+                          icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
+                          onClick={() => handleClick(item.id)}
+                        />
+                      </div>
+                      {selected === item.id && (
+                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                          {/* 16px to match drag handle width. */}
+                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
+                          <div className='flex flex-row items-center gap-1'>
+                            <Input.TextInput
+                              placeholder={t('select option label placeholder')}
+                              ref={selected === item.id ? inputRef : undefined}
+                              value={item.title}
+                              onChange={handleTitleChange(item.id)}
+                              onKeyDown={handleKeyDown}
+                              classNames='flex-1'
+                              data-no-submit
+                            />
+                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
+                              <HuePickerToolbarButton hue={item.color} onChangeHue={handleColorChange(item.id)} />
+                            </Toolbar.Root>
+                            <IconButton
+                              icon='ph--trash--fill'
+                              iconOnly
+                              label={t('select option delete')}
+                              onClick={() => handleDelete(item.id)}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </List.Item>
+                  </div>
+                ))}
+                <div role='listitem'>
+                  <div
+                    role='button'
+                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                    onClick={handleAdd}
+                  >
+                    <div className='flex items-center gap-1'>
+                      <Icon icon='ph--plus--regular' />
+                      <span className='text-sm'>{t('select option add')}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </List.Root>
+        )}
+      </div>
+    </Input.Root>
+  );
+};

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

@@ -3,4 +3,5 @@
 //
 
 export * from './GeoPointInput';
+export * from './SelectOptionsInput';
 export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -5,7 +5,7 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
-import { BooleanInput, NumberInput, TextInput } from './Defaults';
+import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
 import { GeoPointInput } from './custom';
 
@@ -16,6 +16,8 @@ export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputC
   switch (format) {
     case FormatEnum.LatLng:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
 
   switch (type) {

package/src/components/Form/index.ts

@@ -2,8 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFormValues } from './FormContext';
+
 export * from './custom';
 
 export * from './Defaults';
 export * from './Form';
 export * from './Input';
+export { useFormValues };

package/src/components/ViewEditor/ViewEditor.tsx

@@ -10,7 +10,6 @@ import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
-import { arrayMove } from '@dxos/util';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
@@ -22,7 +21,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  typename: Format.DXN.annotations({
+  typename: Format.URL.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -91,7 +90,11 @@ export const ViewEditor = ({
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      arrayMove(view.fields, fromIndex, toIndex);
+      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+      const fields = [...view.fields];
+      const [moved] = fields.splice(fromIndex, 1);
+      fields.splice(toIndex, 0, moved);
+      view.fields = fields;
     },
     [view.fields],
   );
@@ -100,7 +103,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
+      <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}

package/src/components/deprecated/FormInput.tsx

@@ -4,7 +4,21 @@
 
 import React, { type JSX, type PropsWithChildren } from 'react';
 
-import { Input } from '@dxos/react-ui';
+import { Input, type ThemedClassName } from '@dxos/react-ui';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
+
+/**
+ * @deprecated
+ */
+export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div role='none' className='w-full p-4 justify-center overflow-x-hidden overflow-y-auto'>
+      <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
+        {children}
+      </div>
+    </div>
+  );
+};
 
 export type DeprecatedFormInputProps = {
   label: string;
@@ -15,7 +29,6 @@ export type DeprecatedFormInputProps = {
 /**
  * @deprecated
  */
-// TODO(burdon): Still used in ObservabilitySettings and all settings.
 export const DeprecatedFormInput = ({
   label,
   description,
@@ -26,8 +39,9 @@ export const DeprecatedFormInput = ({
     <div role='none' className='flex w-full gap-4 py-1'>
       <Input.Root>
         <div role='none' className='flex flex-col w-full'>
-          {/* TODO(burdon): Consistent height for controls (e.g., Select, Textbox, and Checkbox are all different). */}
-          <Input.Label classNames='flex min-h-[40px] items-center'>{label}</Input.Label>
+          <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
+            {label}
+          </Input.Label>
           {description && (
             <Input.DescriptionAndValidation classNames='mbs-0.5'>
               <Input.Description>{description}</Input.Description>
@@ -36,7 +50,7 @@ export const DeprecatedFormInput = ({
         </div>
 
         <div role='none'>
-          <div role='none' className='flex min-h-[40px] items-center'>
+          <div role='none' className='flex min-bs-[--rail-action] items-center'>
             {children}
           </div>
         </div>
@@ -45,9 +59,8 @@ export const DeprecatedFormInput = ({
   );
 
   if (secondary) {
-    // console.log(secondary);
     return (
-      <div role='none' className='flex flex-col w-full'>
+      <div role='none'>
         {primary}
         {secondary}
       </div>

package/src/hooks/useForm.ts

@@ -24,6 +24,7 @@ export type FormHandler<T extends BaseObject> = {
   touched: Record<JsonPath, boolean>;
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
+  formIsValid: boolean;
   handleSave: () => void;
 
   //
@@ -104,7 +105,6 @@ export const useForm = <T extends BaseObject>({
   // Validation.
   //
 
-  // TODO(burdon): Validate each property separately.
   const validate = useCallback(
     (values: Partial<T>): values is T => {
       let errors: ValidationError[] = validateSchema(schema, values) ?? [];
@@ -130,6 +130,10 @@ export const useForm = <T extends BaseObject>({
     }
   }, [values, schemaDirty]);
 
+  const formIsValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [errors]);
+
   /**
    * NOTE: We can submit if there is no touched field that has an error.
    * Basically, if there's a validation message visible in the form, submit should be disabled.
@@ -223,6 +227,7 @@ export const useForm = <T extends BaseObject>({
     changed,
     canSave,
     handleSave,
+    formIsValid,
 
     // Field utils.
     getStatus,

package/src/translations.ts

@@ -42,6 +42,7 @@ export default [
         'format ref': 'Reference',
         'format regex': 'RegExp',
         'format string': 'String',
+        'format single-select': 'Select',
         'format text': 'Long text',
         'format time': 'Time',
         'format timestamp': 'Timestamp',
@@ -53,6 +54,13 @@ export default [
         // Placeholders
         'placeholder latitude': 'Latitude',
         'placeholder longitude': 'Longitude',
+
+        // SelectOptionsInput
+        'select option label': 'Label',
+        'select option label placeholder': 'Option label',
+        'select option color': 'Color',
+        'select option delete': 'Delete',
+        'select option add': 'Add option',
       },
     },
   },