@dxos/react-ui-form 0.7.2 → 0.7.3-staging.971cd8d

package/dist/lib/browser/index.mjs

@@ -252,7 +252,7 @@ import { invariant } from "@dxos/invariant";
 import { log } from "@dxos/log";
 import { validateSchema } from "@dxos/schema";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
-var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit }) => {
+var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
   const [values, setValues] = useState(initialValues);
   useEffect(() => {
     setValues(initialValues);
@@ -262,6 +262,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   const [touched, setTouched] = useState(createKeySet(initialValues, false));
   const [changed, setChanged] = useState(createKeySet(initialValues, false));
   const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
   const validate = useCallback((values2) => {
     let errors2 = validateSchema(schema, values2) ?? [];
     if (errors2.length === 0 && onValidate) {
@@ -286,21 +287,27 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
-  const canSubmit = useMemo(() => Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
+  const canSave = useMemo(() => !saving && Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
     values,
     touched,
-    errors
+    errors,
+    saving
   ]);
-  const handleSubmit = useCallback(() => {
+  const handleSave = useCallback(async () => {
     if (validate(values)) {
-      onSubmit?.(values, {
-        changed
-      });
+      setSaving(true);
+      try {
+        await onSave?.(values, {
+          changed
+        });
+      } finally {
+        setSaving(false);
+      }
     }
   }, [
     values,
     validate,
-    onSubmit
+    onSave
   ]);
   const getStatus = useCallback((property) => ({
     status: errors[property] ? "error" : void 0,
@@ -321,7 +328,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 165,
+        L: 180,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -364,8 +371,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
     // Field utils.
     getStatus,
     getValue,
@@ -376,7 +383,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 216,
+    L: 231,
     S: void 0,
     A: [
       "obj",
@@ -400,19 +407,19 @@ var flatMap = (errors) => {
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/Form.tsx";
 var padding = "px-2";
-var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, onValuesChanged, onValidate, onSubmit, onCancel, Custom }) => {
+var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom }) => {
   const { t } = useTranslation2(translationKey);
-  const onValid = useMemo2(() => autoSave ? onSubmit : void 0, [
+  const onValid = useMemo2(() => autoSave ? onSave : void 0, [
     autoSave,
-    onSubmit
+    onSave
   ]);
-  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm({
+  const { canSave, values, errors, handleSave, ...inputProps } = useForm({
     schema,
     initialValues,
     onValuesChanged,
     onValidate,
     onValid,
-    onSubmit
+    onSave
   });
   const properties = useMemo2(() => {
     const props = getSchemaProperties(schema.ast, values);
@@ -433,7 +440,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         errors
       }, {
         F: __dxlog_file2,
-        L: 96,
+        L: 101,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -443,14 +450,15 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
   ]);
   return /* @__PURE__ */ React5.createElement("div", {
     role: "form",
-    className: mx("flex flex-col w-full gap-2 py-2", classNames)
+    className: mx("flex flex-col w-full gap-2 py-2", classNames),
+    "data-testid": testId
   }, properties.map((property) => {
     const { ast, name, type, format, title, description, examples, options } = property;
     const key = [
       ...path,
       name
     ];
-    const label = pipe(title ?? name, capitalize);
+    const label = title ?? pipe(name, capitalize);
     const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
     let InputComponent = Custom?.[key.join(".")];
     if (!InputComponent) {
@@ -502,7 +510,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         type
       }, {
         F: __dxlog_file2,
-        L: 160,
+        L: 165,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -521,28 +529,30 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       placeholder,
       ...inputProps
     }));
-  }).filter(isNotFalsy), (onCancel || onSubmit) && !autoSave && /* @__PURE__ */ React5.createElement("div", {
+  }).filter(isNotFalsy), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "flex justify-center"
   }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx(onCancel && !readonly && "grid grid-cols-2 gap-2")
   }, onCancel && !readonly && /* @__PURE__ */ React5.createElement(IconButton, {
+    "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), onSubmit && /* @__PURE__ */ React5.createElement(IconButton, {
+  }), onSave && /* @__PURE__ */ React5.createElement(IconButton, {
     type: "submit",
-    disabled: !canSubmit,
+    "data-testid": "save-button",
+    disabled: !canSave,
     icon: "ph--check--regular",
     label: t("button save"),
-    onClick: handleSubmit
+    onClick: handleSave
   }))));
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ view, projection, field, registry, onClose, onCancel }) => {
+var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   const { t } = useTranslation3(translationKey);
   const [props, setProps] = useState2(projection.getFieldProjection(field.id).props);
   useEffect3(() => setProps(projection.getFieldProjection(field.id).props), [
@@ -613,22 +623,22 @@ var FieldEditor = ({ view, projection, field, registry, onClose, onCancel }) =>
     view.fields,
     field
   ]);
-  const handleSubmit = useCallback2((props2) => {
+  const handleSave = useCallback2((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
     });
-    onClose();
+    onSave();
   }, [
     projection,
     field,
-    onClose
+    onSave
   ]);
   const handleCancel = useCallback2(() => {
     requestAnimationFrame(() => onCancel?.());
-    onClose();
+    onSave();
   }, [
-    onClose
+    onSave
   ]);
   if (!fieldSchema) {
     log3.warn("invalid format", {
@@ -653,7 +663,7 @@ var FieldEditor = ({ view, projection, field, registry, onClose, onCancel }) =>
     ],
     onValuesChanged: handleValuesChanged,
     onValidate: handleValidate,
-    onSubmit: handleSubmit,
+    onSave: handleSave,
     onCancel: handleCancel,
     Custom: {
       ["format"]: (props2) => /* @__PURE__ */ React6.createElement(SelectInput, {
@@ -692,7 +702,7 @@ var ViewMetaSchema = S2.Struct({
   name: S2.String.annotations({
     [AST2.TitleAnnotationId]: "View"
   }),
-  type: Format.DXN.annotations({
+  typename: Format.DXN.annotations({
     [AST2.TitleAnnotationId]: "Typename"
   })
 }).pipe(S2.mutable);
@@ -708,16 +718,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
-      type: view.query.type
+      typename: view.query.typename
     };
   }, [
     view
   ]);
-  const handleViewUpdate = useCallback3(({ name, type }) => {
+  const handleViewUpdate = useCallback3(({ name, typename }) => {
     requestAnimationFrame(() => {
       view.name = name;
-      view.query.type = type;
-      schema.updateTypename(type);
+      view.query.typename = typename;
+      schema.updateTypename(typename);
     });
   }, [
     view,
@@ -746,7 +756,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
-    onSubmit: handleViewUpdate
+    onSave: handleViewUpdate
   }), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "p-2"
@@ -780,7 +790,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     projection,
     field,
     registry,
-    onClose: handleClose
+    onSave: handleClose
   }), !readonly && !field && /* @__PURE__ */ React7.createElement("div", {
     className: "flex p-2 justify-center"
   }, /* @__PURE__ */ React7.createElement(IconButton2, {