@dxos/react-ui-form 0.7.2 → 0.7.3-staging.0905f03

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

@@ -14,14 +14,23 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
     filter?: PropsFilter<T>;
     sort?: PropertyKey<T>[];
     autoSave?: boolean;
+    testId?: string;
     onCancel?: () => void;
     /**
      * Map of custom renderers for specific properties.
      */
     Custom?: Partial<Record<string, InputComponent<T>>>;
-} & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSubmit'>>;
+} & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>>;
 /**
  * General purpose form component that displays field controls based on the given schema.
  */
-export declare const Form: <T extends BaseObject>({ classNames, schema, values: initialValues, path, readonly, filter, sort, autoSave, onValuesChanged, onValidate, onSubmit, onCancel, Custom, }: FormProps<T>) => React.JSX.Element;
+export declare const Form: <T extends BaseObject>({ classNames, schema, values: initialValues, path, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom, }: FormProps<T>) => React.JSX.Element;
+type FormActionsProps = {
+    readonly?: boolean;
+    canSubmit: boolean;
+    onCancel?: () => void;
+    onSubmit: () => void;
+};
+export declare const FormActions: ({ onCancel, onSubmit, canSubmit, readonly }: FormActionsProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=Form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAK,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG9E,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,OAAO,EAAE,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAOxD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IACE,MAAM,EAAE,CAAC,CAAC;IACV,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC,CACnF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,mJActC,SAAS,CAAC,CAAC,CAAC,sBAoId,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAK,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IAEE,MAAM,EAAE,CAAC,CAAC;IAEV,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,CACjF,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,yJAetC,SAAS,CAAC,CAAC,CAAC,sBAwId,CAAC;AAqJF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAAiD,gBAAgB,sBAsBxF,CAAC"}

package/dist/types/src/components/Form/Form.stories.d.ts

@@ -1,6 +1,7 @@
 import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { S } from '@dxos/echo-schema';
+import { type BaseObject, S } from '@dxos/echo-schema';
+import { Testing } from '@dxos/schema/testing';
 import { type FormProps } from './Form';
 declare const TestSchema: S.mutable<S.Struct<{
     name: S.optional<S.SchemaClass<string, string, never>>;
@@ -15,11 +16,14 @@ declare const TestSchema: S.mutable<S.Struct<{
     }>>;
 }>>;
 type TestType = S.Schema.Type<typeof TestSchema>;
-type StoryProps = FormProps<TestType>;
-declare const meta: Meta<StoryProps>;
+type StoryProps<T extends BaseObject> = {
+    schema: S.Schema<T>;
+} & FormProps<T>;
+declare const meta: Meta<StoryProps<any>>;
 export default meta;
-type Story = StoryObj<StoryProps>;
-export declare const Default: Story;
+type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
+export declare const Default: Story<TestType>;
+export declare const Org: Story<Testing.OrgSchemaType>;
 declare const ShapeSchema: S.mutable<S.Struct<{
     shape: S.optional<S.Union<[S.Struct<{
         type: S.Literal<["circle"]>;
@@ -32,4 +36,15 @@ declare const ShapeSchema: S.mutable<S.Struct<{
 type ShapeType = S.Schema.Type<typeof ShapeSchema>;
 type DiscriminatedUnionStoryProps = FormProps<ShapeType>;
 export declare const DiscriminatedShape: StoryObj<DiscriminatedUnionStoryProps>;
+declare const ArraysSchema: S.mutable<S.Struct<{
+    names: S.Array$<S.filter<S.Schema<string, string, never>>>;
+    addresses: S.Array$<S.Struct<{
+        street: S.optional<S.SchemaClass<string, string, never>>;
+        city: S.optional<S.SchemaClass<string, string, never>>;
+        zip: S.optional<S.refine<string, S.Schema<string, string, never>>>;
+        location: S.optional<S.Tuple<[S.refine<number, S.Schema<number, number, never>>, S.refine<number, S.Schema<number, number, never>>, S.Element<typeof S.Number, "?">]>>;
+    }>>;
+}>>;
+type ArraysType = S.Schema.Type<typeof ArraysSchema>;
+export declare const Arrays: StoryObj<FormProps<ArraysType>>;
 //# sourceMappingURL=Form.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAe,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAK9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAaE,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAiBtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAQ1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AACnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAY9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAME,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGA,CAAC;AAEnB,KAAK,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAiBrD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAQlD,CAAC"}

package/dist/types/src/components/Form/Input.d.ts

@@ -1,17 +1,18 @@
 import React, { type FC, type PropsWithChildren } from 'react';
-import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
-import { type FormHandler } from '../../hooks';
+import { type FormPath, type FormHandler } from '../../hooks';
 /**
  * Props passed to input components.
  */
 export type InputProps<T extends BaseObject> = {
-    property: PropertyKey<T>;
+    property: FormPath<T>;
     type: SimpleType;
     format?: FormatEnum;
-    label: string;
+    label?: string;
     disabled?: boolean;
     placeholder?: string;
+    inputOnly?: boolean;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 /**
  * Form input component.

package/dist/types/src/components/Form/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,aAAa,EAAK,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,6EAQpB,eAAe,sBA0GjB,CAAC"}
+{"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,aAAa,EAAK,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,6EAQpB,eAAe,sBA2GjB,CAAC"}

package/dist/types/src/components/deprecated/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkC,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrF,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,QAAQ,CAAC;AAIlE,QAAA,MAAM,YAAY,UAAW,mBAAmB,sBAM/C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAQnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAErD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkC,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAIlE,QAAA,MAAM,YAAY,UAAW,mBAAmB,sBAM/C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAQnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAErD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

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

@@ -2,29 +2,37 @@ import { type FocusEvent } from 'react';
 import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType, type S } from '@dxos/effect';
 import { type ValidationError } from '@dxos/schema';
+import { type MaybePromise } from '@dxos/util';
+export type FormPath<T extends object = {}> = PropertyKey<T> | `${PropertyKey<T>}.${number}`;
 /**
  * Return type from `useForm` hook.
  */
 export type FormHandler<T extends BaseObject> = {
     values: T;
-    errors: Record<PropertyKey<T>, string>;
-    touched: Record<PropertyKey<T>, boolean>;
-    changed: Record<PropertyKey<T>, boolean>;
-    canSubmit: boolean;
-    handleSubmit: () => void;
-    getStatus: (property: PropertyKey<T>) => {
+    errors: Record<FormPath<T>, string>;
+    touched: Record<FormPath<T>, boolean>;
+    changed: Record<FormPath<T>, boolean>;
+    canSave: boolean;
+    handleSave: () => void;
+    getStatus: (property: FormPath<T>) => {
         status?: 'error';
         error?: string;
     };
-    getValue: <V>(property: PropertyKey<T>) => V;
-    onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
+    getValue: <V>(property: FormPath<T>) => V;
+    onValueChange: <V>(property: FormPath<T>, type: SimpleType, value: V) => void;
     onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 };
 /**
  * Hook options.
  */
 export interface FormOptions<T extends BaseObject> {
+    /**
+     * Effect schema.
+     */
     schema: S.Schema<T>;
+    /**
+     * Initial values (which may not pass validation).
+     */
     initialValues: T;
     /**
      * Callback for value changes. Note: This is called even when values are invalid.
@@ -47,13 +55,13 @@ export interface FormOptions<T extends BaseObject> {
     /**
      * Called when the form is submitted and passes validation.
      */
-    onSubmit?: (values: T, meta: {
+    onSave?: (values: T, meta: {
         changed: FormHandler<T>['changed'];
-    }) => void;
+    }) => MaybePromise<void>;
 }
 /**
  * Creates a hook for managing form state, including values, validation, and submission.
  * Deeply integrated with `@dxos/schema` for schema-based validation.
  */
-export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit, }: FormOptions<T>) => FormHandler<T>;
+export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave, }: FormOptions<T>) => FormHandler<T>;
 //# sourceMappingURL=useForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IAMzB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAGpB,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9E;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,8EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAiIhC,CAAC"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC;AAE7F;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC1C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IAEH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IAEH,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,4EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAwIhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.2",
+  "version": "0.7.3-staging.0905f03",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,19 +29,20 @@
     "date-fns": "^3.3.1",
     "effect": "^3.9.2",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.2",
-    "@dxos/debug": "0.7.2",
-    "@dxos/echo-db": "0.7.2",
-    "@dxos/echo-schema": "0.7.2",
-    "@dxos/effect": "0.7.2",
-    "@dxos/keys": "0.7.2",
-    "@dxos/invariant": "0.7.2",
-    "@dxos/log": "0.7.2",
-    "@dxos/react-client": "0.7.2",
-    "@dxos/react-ui-list": "0.7.2",
-    "@dxos/react-ui-types": "0.7.2",
-    "@dxos/schema": "0.7.2",
-    "@dxos/util": "0.7.2"
+    "@dxos/debug": "0.7.3-staging.0905f03",
+    "@dxos/async": "0.7.3-staging.0905f03",
+    "@dxos/echo-schema": "0.7.3-staging.0905f03",
+    "@dxos/echo-db": "0.7.3-staging.0905f03",
+    "@dxos/effect": "0.7.3-staging.0905f03",
+    "@dxos/invariant": "0.7.3-staging.0905f03",
+    "@dxos/keys": "0.7.3-staging.0905f03",
+    "@dxos/live-object": "0.7.3-staging.0905f03",
+    "@dxos/log": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-types": "0.7.3-staging.0905f03",
+    "@dxos/react-client": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-list": "0.7.3-staging.0905f03",
+    "@dxos/util": "0.7.3-staging.0905f03",
+    "@dxos/schema": "0.7.3-staging.0905f03"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -52,12 +53,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.2",
-    "@dxos/random": "0.7.2",
-    "@dxos/react-ui-syntax-highlighter": "0.7.2",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2",
-    "@dxos/storybook-utils": "0.7.2"
+    "@dxos/echo-signals": "0.7.3-staging.0905f03",
+    "@dxos/random": "0.7.3-staging.0905f03",
+    "@dxos/react-ui": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-syntax-highlighter": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-theme": "0.7.3-staging.0905f03",
+    "@dxos/storybook-utils": "0.7.3-staging.0905f03"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -65,8 +66,8 @@
     "effect": "^3.9.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.2",
-    "@dxos/react-ui": "0.7.2"
+    "@dxos/react-ui": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-theme": "0.7.3-staging.0905f03"
   },
   "publishConfig": {
     "access": "public"

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { createMutableSchema } from '@dxos/echo-schema/testing';
+import { createMutableSchema } from '@dxos/live-object/testing';
 import { log } from '@dxos/log';
 import { ViewProjection } from '@dxos/schema';
 import { TestSchema, testView } from '@dxos/schema/testing';
@@ -20,14 +20,14 @@ import { TestLayout, TestPanel } from '../testing';
 type StoryProps = FieldEditorProps;
 
 const DefaultStory = (props: FieldEditorProps) => {
-  const handleComplete: FieldEditorProps['onClose'] = () => {
+  const handleComplete: FieldEditorProps['onSave'] = () => {
     log.info('onClose', { props });
   };
 
   return (
     <TestLayout json={{ props }}>
       <TestPanel>
-        <FieldEditor {...props} onClose={handleComplete} />
+        <FieldEditor {...props} onSave={handleComplete} />
       </TestPanel>
     </TestLayout>
   );

package/src/components/FieldEditor/FieldEditor.tsx

@@ -26,14 +26,14 @@ export type FieldEditorProps = {
   projection: ViewProjection;
   field: FieldType;
   registry?: SchemaResolver;
-  onClose: () => void;
+  onSave: () => void;
   onCancel?: () => void;
 };
 
 /**
  * Displays a Form representing the metadata for a given `Field` and `View`.
  */
-export const FieldEditor = ({ view, projection, field, registry, onClose, onCancel }: FieldEditorProps) => {
+export const FieldEditor = ({ view, projection, field, registry, onSave, onCancel }: FieldEditorProps) => {
   const { t } = useTranslation(translationKey);
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
@@ -100,19 +100,19 @@ export const FieldEditor = ({ view, projection, field, registry, onClose, onCanc
     [view.fields, field],
   );
 
-  const handleSubmit = useCallback<NonNullable<FormProps<PropertyType>['onSubmit']>>(
+  const handleSave = useCallback<NonNullable<FormProps<PropertyType>['onSave']>>(
     (props) => {
       projection.setFieldProjection({ field, props });
-      onClose();
+      onSave();
     },
-    [projection, field, onClose],
+    [projection, field, onSave],
   );
 
   const handleCancel = useCallback<NonNullable<FormProps<PropertyType>['onCancel']>>(() => {
     // Need to defer to allow form to close.
     requestAnimationFrame(() => onCancel?.());
-    onClose();
-  }, [onClose]);
+    onSave();
+  }, [onSave]);
 
   if (!fieldSchema) {
     log.warn('invalid format', { props });
@@ -129,7 +129,7 @@ export const FieldEditor = ({ view, projection, field, registry, onClose, onCanc
       sort={['property', 'format']}
       onValuesChanged={handleValuesChanged}
       onValidate={handleValidate}
-      onSubmit={handleSubmit}
+      onSave={handleSave}
       onCancel={handleCancel}
       Custom={{
         ['format' satisfies keyof PropertyType]: (props) => (

package/src/components/Form/Defaults.tsx

@@ -13,6 +13,7 @@ export const TextInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   disabled,
   placeholder,
   getStatus,
@@ -24,9 +25,11 @@ export const TextInput = <T extends BaseObject>({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Input.TextInput
         disabled={disabled}
         placeholder={placeholder}
@@ -34,6 +37,7 @@ export const TextInput = <T extends BaseObject>({
         onChange={(event) => onValueChange(property, type, event.target.value)}
         onBlur={onBlur}
       />
+      {inputOnly && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );
 };
@@ -42,6 +46,7 @@ export const NumberInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   disabled,
   placeholder,
   getStatus,
@@ -51,12 +56,13 @@ export const NumberInput = <T extends BaseObject>({
 }: InputProps<T>) => {
   const { status, error } = getStatus?.(property);
 
-  // TODO(burdon): Only show stepper if bounded integer.
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Input.TextInput
         type='number'
         disabled={disabled}
@@ -65,6 +71,7 @@ export const NumberInput = <T extends BaseObject>({
         onChange={(event) => onValueChange(property, type, event.target.value)}
         onBlur={onBlur}
       />
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };
@@ -73,6 +80,7 @@ export const BooleanInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   getStatus,
   getValue,
   onValueChange,
@@ -81,13 +89,16 @@ export const BooleanInput = <T extends BaseObject>({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Input.Switch
         checked={getValue<boolean>(property)}
         onCheckedChange={(value) => onValueChange(property, type, value)}
       />
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };
@@ -100,6 +111,7 @@ export const SelectInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   disabled,
   placeholder,
   options,
@@ -111,9 +123,11 @@ export const SelectInput = <T extends BaseObject>({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Select.Root value={getValue(property)} onValueChange={(value) => onValueChange(property, type, value)}>
         {/* TODO(burdon): Placeholder not working? */}
         <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
@@ -130,6 +144,7 @@ export const SelectInput = <T extends BaseObject>({
           </Select.Content>
         </Select.Portal>
       </Select.Root>
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };