@dxos/react-ui-form 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

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

@@ -9,9 +9,10 @@ import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { hues, osTranslations } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../../translations';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export const SelectOptionField = ({
@@ -119,7 +120,7 @@ export const SelectOptionField = ({
   return (
     <Input.Root validationValence={status}>
       <FormFieldLabel error={error} readonly={readonly} label={label} />
-      <div role='none'>
+      <div>
         {options && (
           <List.Root
             items={options}
@@ -134,7 +135,7 @@ export const SelectOptionField = ({
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-xs']}
+                      classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
@@ -146,7 +147,7 @@ export const SelectOptionField = ({
                         <IconButton
                           iconOnly
                           variant='ghost'
-                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: osTranslations })}
+                          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)}
                         />

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

@@ -12,8 +12,8 @@ export const TextField = ({
   type,
   readonly,
   placeholder,
-  onValueChange,
   onBlur,
+  onValueChange,
   ...props
 }: FormFieldComponentProps<string>) => {
   const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
@@ -29,8 +29,8 @@ export const TextField = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={value}
-          onChange={handleChange}
           onBlur={onBlur}
+          onChange={handleChange}
         />
       )}
     </FormFieldWrapper>

package/src/components/ObjectForm/ObjectForm.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { isNonNullable } from '@dxos/util';
+
+import { translationKey } from '#translations';
+
+import { Form, type FormFieldMap, omitId } from '../Form';
+
+export type ObjectFormProps = {
+  schema: Schema.Schema.AnyNoContext;
+  object: Obj.Unknown;
+};
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
+export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
+  const db = Obj.getDatabase(object);
+  const meta = Obj.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
+  const formSchema = useMemo(
+    () =>
+      omitId(
+        Schema.Struct({
+          tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+        }).pipe(Schema.extend(schema)),
+      ),
+    [schema],
+  );
+
+  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
+    invariant(db);
+    invariant(Type.isObjectSchema(schema));
+    const newObject = db.add(Obj.make(schema, values));
+    if (Obj.instanceOf(Tag.Tag, newObject)) {
+      Obj.update(object, (object) => {
+        Obj.getMeta(object).tags = [...(Obj.getMeta(object).tags ?? []), Obj.getDXN(newObject).toString()];
+      });
+    }
+  }, []);
+
+  // TODO(wittjosiah): Use FormRootProps type.
+  const handleChange = useCallback(
+    ({ tags, ...values }: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+      // Handle tags separately using Obj.update.
+      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
+      if (hasTagsChange) {
+        Obj.update(object, (object) => {
+          Obj.getMeta(object).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+        });
+      }
+
+      // Handle other property changes.
+      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
+      if (nonTagPaths.length > 0) {
+        Obj.update(object, () => {
+          for (const path of nonTagPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values, parts);
+            Obj.setValue(object, parts, value);
+          }
+        });
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form.Root
+      schema={formSchema}
+      defaultValues={values}
+      createTypename={Type.getTypename(Tag.Tag)}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add-tag.label', { ns: translationKey }]}
+      createInitialValuePath='label'
+      createFieldMap={createFieldMap}
+      db={db}
+      onValuesChanged={handleChange}
+      onCreate={handleCreate}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

package/src/components/ObjectForm/index.ts

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

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

@@ -7,16 +7,17 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { Obj } from '@dxos/echo';
+import { Filter, Obj } from '@dxos/echo';
 import { random } from '@dxos/random';
-import { Filter, useQuery } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { Person } from '@dxos/types';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { ObjectPicker } from './ObjectPicker';
 
 random.seed(1);
@@ -47,7 +48,7 @@ const DefaultStory = () => {
     }
   }, [space]);
 
-  // Get all objects in the space (similar to BoardContainer)
+  // Get all objects in the space (similar to BoardArticle)
   const allObjects = useQuery(space?.db, Filter.everything());
 
   // Map objects to options format expected by ObjectPicker
@@ -64,7 +65,9 @@ const DefaultStory = () => {
   const handleCreateCallback = useCallback(
     (values: any) => {
       console.log('[on create]', values);
-      if (!space) return;
+      if (!space) {
+        return;
+      }
       const newPerson = space.db.add(Obj.make(Person.Person, values));
       mockHandleCreate(values);
       return newPerson;
@@ -73,7 +76,7 @@ const DefaultStory = () => {
   );
 
   return (
-    <div role='none' className='w-96'>
+    <div className='w-96'>
       <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
         <ObjectPicker.Trigger asChild>
           <Button variant='primary' data-testid='trigger' classNames='w-full'>

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -6,9 +6,11 @@ import type * as Schema from 'effect/Schema';
 import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
 import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-search';
+import { Combobox } from '@dxos/react-ui-list';
+import { useSearchListResults } from '@dxos/react-ui-search';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { Form } from '../Form';
 import { type FormFieldMap } from '../Form/FormFieldComponent';
 
@@ -26,7 +28,14 @@ export type ObjectPickerContentProps = ThemedClassName<{
   createSchema?: Schema.Schema.AnyNoContext;
   createInitialValuePath?: string;
   createFieldMap?: FormFieldMap;
-  onCreate?: (values: any) => void;
+  /**
+   * Persist a newly-created object given the form values. May be async (e.g.
+   * to write to a database). The Promise is awaited before the inline create
+   * form is collapsed back to the picker list, so consumers can complete
+   * follow-up work (assign the new ref to a parent slot, close the popover)
+   * before the picker UI re-renders.
+   */
+  onCreate?: (values: any) => unknown | Promise<unknown>;
   onSelect: (id: string) => void;
 }>;
 
@@ -50,13 +59,13 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
     const [showForm, setShowForm] = useState(false);
     const [formInitialValue, setFormInitialValue] = useState<string>('');
 
-    const { results, handleSearch } = useSearchListResults({
+    const { results, query, handleSearch } = useSearchListResults({
       items: options,
     });
 
     const handleFormSave = useCallback(
-      (values: any) => {
-        onCreate?.(values);
+      async (values: any) => {
+        await onCreate?.(values);
         setShowForm(false);
         setFormInitialValue('');
       },
@@ -91,7 +100,7 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
 
     if (showForm && createSchema) {
       return (
-        <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Content {...props} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
           <Popover.Viewport>
             <Form.Root
               testId='create-referenced-object-form'
@@ -115,8 +124,13 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
     }
 
     return (
-      <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
-        <Combobox.Input placeholder={t('ref-field-combobox-input.placeholder')} autoFocus />
+      <Combobox.Content {...props} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Input
+          placeholder={t('ref-field-combobox-input.placeholder')}
+          autoFocus
+          value={query}
+          onValueChange={handleSearch}
+        />
         <Combobox.List>
           {results.map((option) => (
             <Combobox.Item
@@ -130,10 +144,11 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
           ))}
           {createSchema && onCreate && (
             <CreateItem
+              query={query}
               createOptionLabel={createOptionLabel}
               createOptionIcon={createOptionIcon ?? 'ph--plus--regular'}
-              onCreateItemSelect={(query: string) => {
-                setFormInitialValue(query);
+              onCreateItemSelect={(currentQuery: string) => {
+                setFormInitialValue(currentQuery);
                 setShowForm(true);
               }}
             />
@@ -146,16 +161,17 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
 );
 
 const CreateItem = ({
+  query,
   createOptionLabel,
   createOptionIcon,
   onCreateItemSelect,
 }: {
+  query: string;
   createOptionLabel?: [string, { ns: string }];
   createOptionIcon: string;
   onCreateItemSelect: (query: string) => void;
 }) => {
   const { t } = useTranslation(translationKey);
-  const { query } = useSearchListInput();
 
   const label = createOptionLabel
     ? t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })