@dxos/react-ui-form 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,58 +30,58 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
     "tabster": "^8.5.5",
-    "@dxos/debug": "0.8.4-main.21d9917",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/echo-query": "0.8.4-main.21d9917",
-    "@dxos/effect": "0.8.4-main.21d9917",
-    "@dxos/echo-react": "0.8.4-main.21d9917",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/keys": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/lit-ui": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/react-ui-components": "0.8.4-main.21d9917",
-    "@dxos/react-ui-pickers": "0.8.4-main.21d9917",
-    "@dxos/react-ui-mosaic": "0.8.4-main.21d9917",
-    "@dxos/react-ui-editor": "0.8.4-main.21d9917",
-    "@dxos/react-ui-list": "0.8.4-main.21d9917",
-    "@dxos/react-ui-searchlist": "0.8.4-main.21d9917",
-    "@dxos/react-ui-stack": "0.8.4-main.21d9917",
-    "@dxos/types": "0.8.4-main.21d9917",
-    "@dxos/ui-types": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917",
-    "@dxos/schema": "0.8.4-main.21d9917"
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/debug": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/echo-query": "0.8.4-main.2244d791bb",
+    "@dxos/echo-react": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/effect": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/keys": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-components": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/lit-ui": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-editor": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-list": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-pickers": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-searchlist": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
+    "@dxos/schema": "0.8.4-main.2244d791bb",
+    "@dxos/types": "0.8.4-main.2244d791bb",
+    "@dxos/ui-types": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "fast-check": "^3.19.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917"
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -82,7 +82,7 @@ const meta = {
   title: 'ui/react-ui-form/FieldEditor',
   component: FieldEditor as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/Form/Form-old.stories.tsx

@@ -98,7 +98,7 @@ const meta = {
   title: 'ui/react-ui-form/Form-Old',
   component: Form.Root as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayoutVariants()],
+  decorators: [withTheme(), withLayoutVariants()],
   parameters: {
     layout: 'fullscreen',
     translations,

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

@@ -12,7 +12,7 @@ import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Tooltip } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 import { TestLayout } from '../testing';
@@ -127,7 +127,10 @@ const meta = {
   render: DefaultStory,
 
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({
+      layout: 'fullscreen',
+    }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,

package/src/components/Form/Form.tsx

@@ -8,7 +8,7 @@ import type * as SchemaAST from 'effect/SchemaAST';
 import React, { type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
 
 import { type AnyProperties } from '@dxos/echo/internal';
-import { createJsonPath, getValue as getValue$, setValue as setValue$ } from '@dxos/effect';
+import { createJsonPath, getValue as getValue$ } from '@dxos/effect';
 import { IconButton, type IconButtonProps, ScrollArea, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
@@ -20,6 +20,7 @@ import {
   useKeyHandler,
 } from '../../hooks';
 import { translationKey } from '../../translations';
+import { setValueEchoAware } from '../../util';
 
 import { FormFieldLabel, type FormFieldLabelProps, type FormFieldStateProps } from './FormFieldComponent';
 import {
@@ -93,7 +94,7 @@ const useFormValues: {
 
   useEffect(() => {
     if (!value && defaultValue) {
-      setValue$(values, jsonPath, defaultValue());
+      setValueEchoAware(values, jsonPath, defaultValue());
     }
   }, [value, defaultValue]);
 
@@ -163,30 +164,32 @@ FormRoot.displayName = 'Form.Root';
 // Viewport
 //
 
-type FormViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+const FORM_VIEWPORT_NAME = 'Form.Viewport';
 
-const FormViewport = ({ classNames, children }: FormViewportProps) => {
+type FormViewportProps = PropsWithChildren<{}>;
+
+// TODO(burdon): Ref and props (allow asChild).
+const FormViewport = ({ children }: FormViewportProps) => {
   return (
-    <ScrollArea.Root>
-      <ScrollArea.Viewport classNames={['plb-cardSpacingBlock', classNames]}>{children}</ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation='vertical'>
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
     </ScrollArea.Root>
   );
 };
 
-FormViewport.displayName = 'Form.Viewport';
+FormViewport.displayName = FORM_VIEWPORT_NAME;
 
 //
 // Content
 //
 
+const FORM_CONTENT_NAME = 'Form.Content';
+
 type FormContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 // TOOD(burdon): Figure out nesting (indent and testId).
 const FormContent = ({ classNames, children }: FormContentProps) => {
-  const { form, testId } = useFormContext(FormContent.displayName);
+  const { form, testId } = useFormContext(FORM_CONTENT_NAME);
   const ref = useRef<HTMLDivElement>(null);
   useKeyHandler(ref.current, form);
 
@@ -202,26 +205,30 @@ const FormContent = ({ classNames, children }: FormContentProps) => {
   );
 };
 
-FormContent.displayName = 'Form.Content';
+FormContent.displayName = FORM_CONTENT_NAME;
 
 //
 // FieldSet
 //
 
+const FORM_FIELDSET_NAME = 'Form.FieldSet';
+
 type FormFieldSetProps = ThemedClassName<{}>;
 
 const FormFieldSet = ({ classNames }: FormFieldSetProps) => {
-  const { form, ...props } = useFormContext(FormFieldSet.displayName);
+  const { form, ...props } = useFormContext(FORM_FIELDSET_NAME);
 
   return <NaturalFormFieldSet classNames={classNames} schema={form.schema} {...props} />;
 };
 
-FormFieldSet.displayName = 'Form.FieldSet';
+FormFieldSet.displayName = FORM_FIELDSET_NAME;
 
 //
 // Actions
 //
 
+const FORM_ACTIONS_NAME = 'Form.Actions';
+
 type FormActionsProps = ThemedClassName<{}>;
 
 const FormActions = ({ classNames }: FormActionsProps) => {
@@ -230,7 +237,7 @@ const FormActions = ({ classNames }: FormActionsProps) => {
     form: { canSave, onSave, onCancel },
     readonly,
     layout,
-  } = useFormContext(FormActions.displayName);
+  } = useFormContext(FORM_ACTIONS_NAME);
 
   if (readonly || layout === 'static') {
     return null;
@@ -266,21 +273,23 @@ const FormActions = ({ classNames }: FormActionsProps) => {
   );
 };
 
-FormActions.displayName = 'Form.Actions';
+FormActions.displayName = FORM_ACTIONS_NAME;
 
 //
 // Submit
 //
 
-type FormSubmitProps = ThemedClassName<Partial<Pick<IconButtonProps, 'icon' | 'label'>>>;
+const FORM_SUBMIT_NAME = 'Form.Submit';
+
+type FormSubmitProps = ThemedClassName<Partial<Pick<IconButtonProps, 'icon' | 'label' | 'disabled'>>>;
 
-const FormSubmit = ({ classNames, label, icon }: FormSubmitProps) => {
+const FormSubmit = ({ classNames, label, icon, disabled }: FormSubmitProps) => {
   const { t } = useTranslation(translationKey);
   const {
     form: { canSave, onSave },
     readonly,
     layout,
-  } = useFormContext(FormSubmit.displayName);
+  } = useFormContext(FORM_SUBMIT_NAME);
 
   if (readonly || layout === 'static') {
     return null;
@@ -292,7 +301,7 @@ const FormSubmit = ({ classNames, label, icon }: FormSubmitProps) => {
         classNames='is-full'
         type='submit'
         variant='primary'
-        disabled={!canSave}
+        disabled={disabled ?? !canSave}
         icon={icon ?? 'ph--check--regular'}
         label={label ?? t('save button label')}
         onClick={onSave}
@@ -302,7 +311,7 @@ const FormSubmit = ({ classNames, label, icon }: FormSubmitProps) => {
   );
 };
 
-FormSubmit.displayName = 'Form.Submit';
+FormSubmit.displayName = FORM_SUBMIT_NAME;
 
 //
 // Form
@@ -327,5 +336,6 @@ export type {
   FormContentProps,
   FormFieldSetProps,
   FormActionsProps,
+  FormSubmitProps,
   FormFieldLabelProps as LabelProps,
 };

package/src/components/Form/FormFieldComponent.stories.tsx

@@ -44,7 +44,7 @@ const Component = ({
 const meta: Meta<typeof Component> = {
   title: 'ui/react-ui-form/FormFieldComponent',
   component: Component,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Form/FormFieldComponent.tsx

@@ -15,7 +15,7 @@ import React, {
 
 import { type Format } from '@dxos/echo/internal';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
-import { errorText, mx } from '@dxos/ui-theme';
+import { errorText } from '@dxos/ui-theme';
 
 import { type FormFieldStatus } from '../../hooks';
 
@@ -79,17 +79,15 @@ export type FormFieldLabelProps = {
 
 export const FormFieldLabel = ({ label, error, readonly, asChild }: FormFieldLabelProps) => {
   const Label = readonly || asChild ? 'span' : Input.Label;
-  const labelProps = readonly || asChild ? { className: 'text-description text-sm' } : { classNames: '!mlb-0 text-sm' };
-
   return (
-    <div role='none' className={mx('flex justify-between items-center', labelSpacing)}>
-      <Label {...labelProps}>{label}</Label>
+    <>
+      <Label>{label}</Label>
       {error && (
         <Tooltip.Trigger asChild content={error} side='bottom'>
           <Icon icon='ph--warning--regular' size={4} classNames={errorText} />
         </Tooltip.Trigger>
       )}
-    </div>
+    </>
   );
 };
 
@@ -118,15 +116,17 @@ export const FormFieldWrapper = <T,>(props: FormFieldWrapperProps<T>) => {
   const str = String(value ?? '');
 
   return (
-    <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
-      {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
-      {layout === 'full' && (
-        <Input.DescriptionAndValidation>
-          <Input.Validation>{error}</Input.Validation>
-        </Input.DescriptionAndValidation>
-      )}
-    </Input.Root>
+    <div role='none' className='contents'>
+      <Input.Root validationValence={status}>
+        {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+        {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
+        {layout === 'full' && (
+          <Input.DescriptionAndValidation>
+            <Input.Validation>{error}</Input.Validation>
+          </Input.DescriptionAndValidation>
+        )}
+      </Input.Root>
+    </div>
   );
 };
 

package/src/components/Form/FormFieldSet.tsx

@@ -42,9 +42,11 @@ export type FormFieldSetProps<T extends AnyProperties> = ThemedClassName<
     >
 >;
 
+const FORM_FIELDSET_NAME = 'Form.FieldSet';
+
 export const FormFieldSet = forwardRef<HTMLDivElement, FormFieldSetProps<any>>(
   ({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef) => {
-    const values = useFormValues(FormFieldSet.displayName!, path);
+    const values = useFormValues(FORM_FIELDSET_NAME, path);
 
     // TODO(burdon): Updates on every value change.
     //  Remove values dep if can remove from getSchemaProperties.
@@ -122,4 +124,4 @@ export const FormFieldSet = forwardRef<HTMLDivElement, FormFieldSetProps<any>>(
   },
 );
 
-FormFieldSet.displayName = 'Form.Fields';
+FormFieldSet.displayName = FORM_FIELDSET_NAME;

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

@@ -140,6 +140,9 @@ export const getDefaultValue = (ast?: SchemaAST.AST): any => {
     case 'BooleanKeyword': {
       return false;
     }
+    case 'Suspend': {
+      return getDefaultValue(ast.f());
+    }
     default: {
       if (ast && isNestedType(ast)) {
         return {};

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

@@ -6,7 +6,7 @@ import '@dxos/lit-ui/dx-tag-picker.pcss';
 
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Entity, Filter, Ref, type Type } from '@dxos/echo';
+import { type Database, Entity, Filter, Ref, Type } from '@dxos/echo';
 import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { useQuery, useSchema as useSchema$ } from '@dxos/echo-react';
 import { findAnnotation } from '@dxos/effect';
@@ -33,7 +33,15 @@ const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results) =>
   });
 
 const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typename) =>
-  useQuery(db, typename ? Filter.typename(typename) : Filter.nothing());
+  useQuery(
+    db,
+    typename
+      ? // For Type.Ref(Type.Obj) we want to show all objects.
+        typename === Type.getTypename(Type.Obj)
+        ? Filter.everything()
+        : Filter.typename(typename)
+      : Filter.nothing(),
+  );
 
 export type RefFieldProps = FormFieldComponentProps &
   Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath'> & {
@@ -137,7 +145,7 @@ export const RefField = (props: RefFieldProps) => {
           !item ? (
             <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
           ) : (
-            <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
+            <DxAnchor key={item.id} dxn={item.id} rootclassname='mie-1'>
               {item.label}
             </DxAnchor>
           )

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

@@ -50,7 +50,7 @@ const meta = {
   title: 'ui/react-ui-form/SelectOptionField',
   component: SelectOptionField as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
     translations,

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

@@ -100,7 +100,7 @@ const meta = {
   title: 'ui/react-ui-form/ObjectPicker',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       types: [Person.Person],
       createIdentity: true,

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Settings } from './Settings';
+
+faker.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Root>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Group>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+            <Input.Root>
+              <Input.TextInput placeholder='Input' />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+            <Input.Root>
+              <Input.Switch />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(3)} description={faker.lorem.paragraphs(2)}>
+            <Button>Test</Button>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};