@dxos/react-ui-form 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/hooks/useFormHandler.ts

@@ -7,13 +7,22 @@ import type * as Schema from 'effect/Schema';
 import type * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type AnyProperties, getValue as getValue$, setValue as setValue$ } from '@dxos/echo/internal';
-import { type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
+import { Obj } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
+import {
+  type JsonPath,
+  createJsonPath,
+  fromEffectValidationPath,
+  getValue as getValue$,
+  setValue as setValue$,
+} from '@dxos/effect';
 import { log } from '@dxos/log';
 import { useDefaultValue } from '@dxos/react-ui';
 import { type ValidationError, validateSchema } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
 
+import { setValueEchoAware } from '../util';
+
 export type FormFieldStatus = {
   status?: 'error';
   error?: string;
@@ -126,7 +135,7 @@ export const useFormHandler = <T extends AnyProperties>({
   const [errors, setErrors] = useState<Record<JsonPath, string>>({});
   const [saving, setSaving] = useState(false);
   const defaultValues = useDefaultValue<Partial<T>>(defaultValuesProp, () => ({}));
-  const [values, setValues] = useControllableState<Partial<T>>({
+  const [values$, setValues] = useControllableState<Partial<T>>({
     prop: valuesProp,
     defaultProp: defaultValues,
     onChange: () => {
@@ -137,6 +146,8 @@ export const useFormHandler = <T extends AnyProperties>({
       setSaving(false);
     },
   });
+  // TODO(wittjosiah): Upgrade @radix-ui/react-use-controllable-state.
+  const values = values$ as Partial<T>;
 
   // Validate.
   const validate = useCallback(
@@ -259,12 +270,15 @@ export const useFormHandler = <T extends AnyProperties>({
       }
 
       // Update.
-      const newValues = { ...setValue$(values, jsonPath, parsedValue) };
+      // For ECHO objects, mutate in place via Obj.change(); for plain objects, spread to create new reference.
+      const newValues = Obj.isObject(values)
+        ? (setValueEchoAware(values, jsonPath, parsedValue), values)
+        : { ...setValue$(values, jsonPath, parsedValue) };
       setValues(newValues);
 
       // TODO(burdon): Check value has changed from original.
-      const newChanged = { ...changed, [jsonPath]: true };
-      setChanged({ ...changed, [jsonPath]: true });
+      const newChanged = { [jsonPath]: true };
+      setChanged({ ...changed, ...newChanged });
 
       // Validate.
       const isValid = validate(newValues);

package/src/translations.ts

@@ -4,7 +4,7 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-form';
+export const translationKey = '@dxos/react-ui-form';
 
 export const translations = [
   {

package/src/util/echo.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Obj } from '@dxos/echo';
+import { type JsonPath, setValue as setValuePlain, splitJsonPath } from '@dxos/effect';
+
+/**
+ * Sets a value on an object, using Obj.change() if it's an ECHO object.
+ */
+// TODO(wittjosiah): Consider refactoring Form to not know about ECHO at all.
+//   Instead of directly mutating the values object, Form could work with a plain
+//   object copy and communicate all mutations through callbacks (e.g., onValuesChanged).
+//   The caller would then be responsible for applying changes to ECHO objects via
+//   Obj.change(). This would keep Form agnostic to the underlying data layer and
+//   avoid coupling react-ui-form to @dxos/echo.
+export const setValueEchoAware = <T extends object>(obj: T, path: JsonPath, value: any): T => {
+  if (Obj.isObject(obj)) {
+    Obj.change(obj, (mutableObj) => {
+      Obj.setValue(mutableObj, splitJsonPath(path), value);
+    });
+    return obj;
+  }
+  return setValuePlain(obj, path, value);
+};

package/src/util/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './echo';
 export * from './field';
 export * from './formatting';
 export * from './properties';

package/dist/types/src/components/ControlSection/ControlSection.d.ts

@@ -1,23 +0,0 @@
-import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
-import { type ButtonProps, type Label, type ThemedClassName } from '@dxos/react-ui';
-export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
-export declare const ControlPage: ({ children, classNames, ...props }: ControlPageProps) => React.JSX.Element;
-export type ControlSectionProps = PropsWithChildren<{
-    title: Label;
-    description?: Label;
-}>;
-export declare const ControlSection: ({ title, description, children }: ControlSectionProps) => React.JSX.Element;
-export declare const ControlSectionHeading: ({ title, description }: Omit<ControlSectionProps, "children">) => React.JSX.Element;
-export declare const ControlGroupButton: ({ classNames, ...props }: ButtonProps) => React.JSX.Element;
-export type ControlGroupProps = ThemedClassName<PropsWithChildren>;
-export declare const ControlGroup: ({ children, classNames }: ControlGroupProps) => React.JSX.Element;
-export declare const ControlFrame: ({ children }: ControlGroupProps) => React.JSX.Element;
-export declare const controlItemClasses: string;
-export type ControlItemProps = PropsWithChildren<{
-    title: Label;
-    description?: Label;
-}>;
-export declare const ControlItem: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
-export declare const ControlItemInput: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
-export declare const ControlFrameItem: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
-//# sourceMappingURL=ControlSection.d.ts.map

package/dist/types/src/components/ControlSection/ControlSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,KAAK,EACV,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEhF,eAAO,MAAM,WAAW,GAAI,oCAAoC,gBAAgB,sBAQ/E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,kCAAkC,mBAAmB,sBAOnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wBAAwB,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,sBAYlG,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,0BAA0B,WAAW,sBAEvE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEnE,eAAO,MAAM,YAAY,GAAI,0BAA0B,iBAAiB,sBAWvE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,cAAc,iBAAiB,sBAU3D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAKH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,kCAAkC,gBAAgB,sBAY7E,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kCAAkC,gBAAgB,sBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kCAAkC,gBAAgB,sBAUlF,CAAC"}

package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/types/src/components/ControlSection/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ControlSection';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/ControlSection/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}

package/dist/types/src/hooks/useQueryRefOptions.d.ts

@@ -1,30 +0,0 @@
-import { type DXN } from '@dxos/keys';
-import { type Palette } from '@dxos/react-ui-types';
-import { type MaybePromise } from '@dxos/util';
-export type RefOption = {
-    dxn: DXN;
-    label?: string;
-};
-export type QueryRefOptions = ({ typename }: {
-    typename: string;
-}) => MaybePromise<RefOption[]>;
-export type QueryTag = {
-    id: string;
-    label: string;
-    hue?: Palette;
-};
-type UseQueryRefOptionsProps = {
-    typename?: string;
-    onQueryRefOptions?: QueryRefOptions;
-};
-/**
- * Hook to query reference options based on type information.
- * Used internally within forms to fetch and format reference options for reference fields.
- */
-export declare const useQueryRefOptions: ({ typename, onQueryRefOptions }: UseQueryRefOptionsProps) => {
-    options: QueryTag[];
-    update: () => void;
-    loading: boolean;
-};
-export {};
-//# sourceMappingURL=useQueryRefOptions.d.ts.map

package/dist/types/src/hooks/useQueryRefOptions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useQueryRefOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useQueryRefOptions.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,GAAG,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,KAAK,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC;AAEhG,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,iCAAiC,uBAAuB;;;;CAmC1F,CAAC"}

package/dist/types/src/hooks/useRefQueryOptions.d.ts

@@ -1,8 +0,0 @@
-import { type Space } from '@dxos/react-client/echo';
-import { type QueryRefOptions } from './useQueryRefOptions';
-type UseRefQueryOptionsProps = {
-    space?: Space;
-};
-export declare const useRefQueryOptions: ({ space }: UseRefQueryOptionsProps) => QueryRefOptions;
-export {};
-//# sourceMappingURL=useRefQueryOptions.d.ts.map

package/dist/types/src/hooks/useRefQueryOptions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRefQueryOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useRefQueryOptions.ts"],"names":[],"mappings":"AAOA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,KAAK,uBAAuB,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEjD,eAAO,MAAM,kBAAkB,GAAI,WAAW,uBAAuB,KAAG,eAsBvE,CAAC"}

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -1,38 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { ControlPage, ControlSection } from './ControlSection';
-
-const meta = {
-  title: 'ui/react-ui-form/ControlSection',
-  component: ControlSection,
-  render: (args) => (
-    <ControlPage classNames='is-[40rem]'>
-      <ControlSection {...args} />
-    </ControlPage>
-  ),
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-} satisfies Meta<typeof ControlSection>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: 'Control Section',
-    description: 'This is a control section',
-  },
-};

package/src/components/ControlSection/ControlSection.tsx

@@ -1,153 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
-
-import {
-  Button,
-  type ButtonProps,
-  Input,
-  type Label,
-  type ThemedClassName,
-  toLocalizedString,
-  useTranslation,
-} from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
-
-import { translationKey } from '../../translations';
-
-export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
-
-export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
-  return (
-    <StackItem.Content scrollable classNames='[--control-spacing:var(--dx-trimMd)]'>
-      <div role='none' className={mx('pli-cardSpacingInline pbe-trimLg', classNames)} {...props}>
-        {children}
-      </div>
-    </StackItem.Content>
-  );
-};
-
-export type ControlSectionProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const ControlSection = ({ title, description, children }: ControlSectionProps) => {
-  return (
-    <>
-      <ControlSectionHeading title={title} description={description} />
-      {children}
-    </>
-  );
-};
-
-export const ControlSectionHeading = ({ title, description }: Omit<ControlSectionProps, 'children'>) => {
-  const { t } = useTranslation(translationKey);
-  return (
-    <>
-      <h2 className='pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd'>{toLocalizedString(title, t)}</h2>
-      {description && (
-        <p className='pli-trimMd mlb-trimMd container-max-width text-description'>
-          {toLocalizedString(description, t)}
-        </p>
-      )}
-    </>
-  );
-};
-
-export const ControlGroupButton = ({ classNames, ...props }: ButtonProps) => {
-  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
-};
-
-export type ControlGroupProps = ThemedClassName<PropsWithChildren>;
-
-export const ControlGroup = ({ children, classNames }: ControlGroupProps) => (
-  <div
-    role='none'
-    className={mx(
-      'group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd',
-      '[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end',
-      classNames,
-    )}
-  >
-    {children}
-  </div>
-);
-
-export const ControlFrame = ({ children }: ControlGroupProps) => (
-  <div
-    role='none'
-    className={mx(
-      'container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd',
-      'border border-separator rounded-md',
-    )}
-  >
-    {children}
-  </div>
-);
-
-export const controlItemClasses = mx([
-  'container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center',
-  // TODO(burdon): Use grid gap consistently or apply margins consistently?
-  'mlb-[--control-spacing] *:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
-  'border border-separator rounded-md',
-]);
-
-const controlItemTitleClasses = 'mbe-0 text-lg text-baseText font-normal';
-const controlItemDescriptionClasses = 'mlb-trimSm md:mbe-0 text-base text-description';
-
-export type ControlItemProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const ControlItem = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <div className={controlItemClasses}>
-      <div role='none'>
-        <h3 className={controlItemTitleClasses}>{toLocalizedString(title, t)}</h3>
-        {description && <p className={controlItemDescriptionClasses}>{toLocalizedString(description, t)}</p>}
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export const ControlItemInput = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root>
-      <div className={controlItemClasses}>
-        <div role='none'>
-          <Input.Label classNames={controlItemTitleClasses}>{toLocalizedString(title, t)}</Input.Label>
-          {description && (
-            <Input.DescriptionAndValidation>
-              <Input.Description classNames={controlItemDescriptionClasses}>
-                {toLocalizedString(description, t)}
-              </Input.Description>
-            </Input.DescriptionAndValidation>
-          )}
-        </div>
-        {children}
-      </div>
-    </Input.Root>
-  );
-};
-
-export const ControlFrameItem = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <div role='group' className='min-is-0'>
-      <h3 className='text-lg mbe-2'>{toLocalizedString(title, t)}</h3>
-      {description && <p className='mlb-trimSm md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
-      {children}
-    </div>
-  );
-};

package/src/hooks/useQueryRefOptions.ts

@@ -1,70 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useCallback, useState } from 'react';
-
-import { type DXN } from '@dxos/keys';
-import { log } from '@dxos/log';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { type Palette } from '@dxos/react-ui-types';
-import { type MaybePromise } from '@dxos/util';
-
-export type RefOption = {
-  dxn: DXN;
-  label?: string;
-};
-
-export type QueryRefOptions = ({ typename }: { typename: string }) => MaybePromise<RefOption[]>;
-
-export type QueryTag = {
-  id: string;
-  label: string;
-  hue?: Palette;
-};
-
-type UseQueryRefOptionsProps = {
-  typename?: string;
-  onQueryRefOptions?: QueryRefOptions;
-};
-
-/**
- * Hook to query reference options based on type information.
- * Used internally within forms to fetch and format reference options for reference fields.
- */
-export const useQueryRefOptions = ({ typename, onQueryRefOptions }: UseQueryRefOptionsProps) => {
-  const [options, setOptions] = useState<QueryTag[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [state, setState] = useState({});
-  const update = useCallback(() => setState({}), []);
-
-  useAsyncEffect(async () => {
-    if (!typename || !onQueryRefOptions) {
-      return;
-    }
-
-    setLoading(true);
-    try {
-      // TODO(wittjosiah): This should be a reactive query so that the options are always up to date.
-      const options = await onQueryRefOptions({ typename });
-      log('options', { options: options.length });
-      setOptions(
-        options.map((option) => {
-          const dxn = option.dxn.toString() as string;
-          return {
-            id: dxn,
-            label: option.label ?? dxn,
-            hue: 'neutral' as any,
-          };
-        }),
-      );
-    } catch (error) {
-      log.error('Failed to fetch ref options:', error);
-      setOptions([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [typename, onQueryRefOptions, state]);
-
-  return { options, update, loading };
-};

package/src/hooks/useRefQueryOptions.ts

@@ -1,37 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useCallback } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { Filter, type Space } from '@dxos/react-client/echo';
-import { isNonNullable } from '@dxos/util';
-
-import { type QueryRefOptions } from './useQueryRefOptions';
-
-type UseRefQueryOptionsProps = { space?: Space };
-
-export const useRefQueryOptions = ({ space }: UseRefQueryOptionsProps): QueryRefOptions => {
-  return useCallback<QueryRefOptions>(
-    async ({ typename }) => {
-      if (!space) {
-        return [];
-      }
-
-      const query = space.db.query(Filter.typename(typename));
-      const objects = await query.run();
-      return objects
-        .map((object) => {
-          const dxn = Obj.getDXN(object);
-          if (!dxn) {
-            return undefined;
-          }
-
-          return { dxn, label: Obj.getLabel(object) ?? object?.id ?? '' };
-        })
-        .filter(isNonNullable);
-    },
-    [space],
-  );
-};