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

package/dist/lib/node/index.cjs

@@ -32,6 +32,7 @@ __export(node_exports, {
   DeprecatedFormInput: () => DeprecatedFormInput,
   FieldEditor: () => FieldEditor,
   Form: () => Form,
+  FormActions: () => FormActions,
   GeiPointInput: () => GeiPointInput,
   InputHeader: () => InputHeader,
   NumberInput: () => NumberInput,
@@ -175,11 +176,11 @@ var InputHeader = ({ children, error }) => {
     side: "bottom"
   }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Arrow, null), error)));
 };
-var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+var TextInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     disabled,
@@ -187,13 +188,13 @@ var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getV
     value: getValue(property) ?? "",
     onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
-  }));
+  }), inputOnly && /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Validation, null, error));
 };
-var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+var NumberInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     type: "number",
@@ -202,24 +203,24 @@ var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, ge
     value: getValue(property) ?? 0,
     onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
-  }));
+  }), inputOnly && /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.DescriptionAndValidation, null, error));
 };
-var BooleanInput = ({ property, type, label, getStatus, getValue, onValueChange }) => {
+var BooleanInput = ({ property, type, label, inputOnly, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Switch, {
     checked: getValue(property),
     onCheckedChange: (value) => onValueChange(property, type, value)
-  }));
+  }), inputOnly && /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.DescriptionAndValidation, null, error));
 };
-var SelectInput = ({ property, type, label, disabled, placeholder, options, getStatus, getValue, onValueChange }) => {
+var SelectInput = ({ property, type, label, inputOnly, disabled, placeholder, options, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Root, {
     value: getValue(property),
@@ -234,7 +235,7 @@ var SelectInput = ({ property, type, label, disabled, placeholder, options, getS
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
-  )))))));
+  )))))), inputOnly && /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.DescriptionAndValidation, null, error));
 };
 var GeiPointInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
   const { t } = (0, import_react_ui6.useTranslation)(translationKey);
@@ -290,7 +291,7 @@ var getInputComponent = (type, format) => {
   }
 };
 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] = (0, import_react7.useState)(initialValues);
   (0, import_react7.useEffect)(() => {
     setValues(initialValues);
@@ -300,6 +301,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   const [touched, setTouched] = (0, import_react7.useState)(createKeySet(initialValues, false));
   const [changed, setChanged] = (0, import_react7.useState)(createKeySet(initialValues, false));
   const [errors, setErrors] = (0, import_react7.useState)({});
+  const [saving, setSaving] = (0, import_react7.useState)(false);
   const validate = (0, import_react7.useCallback)((values2) => {
     let errors2 = (0, import_schema3.validateSchema)(schema, values2) ?? [];
     if (errors2.length === 0 && onValidate) {
@@ -324,21 +326,27 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
-  const canSubmit = (0, import_react7.useMemo)(() => Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
+  const canSave = (0, import_react7.useMemo)(() => !saving && Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
     values,
     touched,
-    errors
+    errors,
+    saving
   ]);
-  const handleSubmit = (0, import_react7.useCallback)(() => {
+  const handleSave = (0, import_react7.useCallback)(async () => {
     if (validate(values)) {
-      onSubmit?.(values, {
-        changed
-      });
+      setSaving(true);
+      try {
+        await onSave?.(values, {
+          changed
+        });
+      } finally {
+        setSaving(false);
+      }
     }
   }, [
     values,
     validate,
-    onSubmit
+    onSave
   ]);
   const getStatus = (0, import_react7.useCallback)((property) => ({
     status: errors[property] ? "error" : void 0,
@@ -348,7 +356,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     errors
   ]);
   const getValue = (property) => {
-    return values[property];
+    return getByPath(values, property);
   };
   const onValueChange = (property, type, value) => {
     let parsedValue = value;
@@ -359,16 +367,13 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       import_log3.log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 165,
+        L: 183,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
-    const newValues = {
-      ...values,
-      [property]: parsedValue
-    };
+    const newValues = setByPath(values, property, parsedValue);
     setValues(newValues);
     setChanged((prev) => ({
       ...prev,
@@ -402,8 +407,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
     // Field utils.
     getStatus,
     getValue,
@@ -414,7 +419,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   (0, import_invariant.invariant)(obj, void 0, {
     F: __dxlog_file,
-    L: 216,
+    L: 234,
     S: void 0,
     A: [
       "obj",
@@ -434,21 +439,34 @@ var flatMap = (errors) => {
     return result;
   }, {});
 };
+var getByPath = (obj, path) => {
+  const [key, index] = path.split(".");
+  return index === void 0 ? obj[key] : obj[key][parseInt(index)];
+};
+var setByPath = (obj, path, value) => {
+  const [key, index] = path.split(".");
+  const newValue = index === void 0 ? value : [
+    ...obj[key]
+  ].map((v, i) => i === parseInt(index) ? value : v);
+  return {
+    ...obj,
+    [key]: newValue
+  };
+};
 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 }) => {
-  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const onValid = (0, import_react3.useMemo)(() => autoSave ? onSubmit : void 0, [
+var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom }) => {
+  const onValid = (0, import_react3.useMemo)(() => 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 = (0, import_react3.useMemo)(() => {
     const props = (0, import_schema2.getSchemaProperties)(schema.ast, values);
@@ -469,7 +487,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         errors
       }, {
         F: __dxlog_file2,
-        L: 96,
+        L: 100,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -479,14 +497,15 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
   ]);
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "form",
-    className: (0, import_react_ui_theme.mx)("flex flex-col w-full gap-2 py-2", classNames)
+    className: (0, import_react_ui_theme.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 { ast, name, type, format, title, description, examples, options, array } = property;
     const key = [
       ...path,
       name
     ];
-    const label = (0, import_effect.pipe)(title ?? name, import_String.capitalize);
+    const label = title ?? (0, import_effect.pipe)(name, import_String.capitalize);
     const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
     let InputComponent = Custom?.[key.join(".")];
     if (!InputComponent) {
@@ -510,6 +529,22 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         }));
       }
       InputComponent = getInputComponent(type, format);
+      if (array) {
+        return /* @__PURE__ */ import_react3.default.createElement(ArrayField, {
+          key: name,
+          name,
+          type,
+          array: true,
+          label,
+          ast,
+          values,
+          format,
+          readonly,
+          placeholder,
+          inputProps,
+          Custom
+        });
+      }
     }
     if (!InputComponent) {
       if (type === "object") {
@@ -538,7 +573,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         type
       }, {
         F: __dxlog_file2,
-        L: 160,
+        L: 185,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -557,26 +592,161 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       placeholder,
       ...inputProps
     }));
-  }).filter(import_util.isNotFalsy), (onCancel || onSubmit) && !autoSave && /* @__PURE__ */ import_react3.default.createElement("div", {
+  }).filter(import_util.isNotFalsy), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react3.default.createElement(FormActions, {
+    onCancel,
+    onSubmit: handleSave,
+    canSubmit: canSave,
+    readonly
+  }));
+};
+var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholder, inputProps, Custom }) => {
+  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  const arrayValues = values[name] ?? [];
+  const key = [
+    name
+  ];
+  const tupleType = (0, import_effect2.findNode)(ast, import_echo_schema2.AST.isTupleType);
+  const elementType = tupleType?.rest[0]?.type;
+  if (type === "object" && elementType) {
+    const baseNode = (0, import_effect2.findNode)(elementType, import_effect2.isDiscriminatedUnion);
+    const typeLiteral = baseNode ? (0, import_effect2.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect2.findNode)(elementType, import_echo_schema2.AST.isTypeLiteral);
+    if (typeLiteral) {
+      const schema = import_echo_schema2.S.make(typeLiteral);
+      return /* @__PURE__ */ import_react3.default.createElement("div", {
+        key: name,
+        role: "none",
+        className: (0, import_react_ui_theme.mx)(padding)
+      }, /* @__PURE__ */ import_react3.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react3.default.createElement("div", {
+        role: "none",
+        className: "flex flex-col gap-1"
+      }, arrayValues.map((value, index) => {
+        return /* @__PURE__ */ import_react3.default.createElement("div", {
+          key: index,
+          role: "none",
+          className: "flex items-center gap-1"
+        }, /* @__PURE__ */ import_react3.default.createElement("div", {
+          role: "none",
+          className: "flex-1"
+        }, /* @__PURE__ */ import_react3.default.createElement(Form, {
+          schema,
+          path: [
+            ...key,
+            index.toString()
+          ],
+          values: value,
+          onValuesChanged: (childValues) => {
+            const newValues = [
+              ...arrayValues
+            ];
+            newValues[index] = childValues;
+            inputProps.onValueChange(name, "object", newValues);
+          },
+          Custom
+        })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+          icon: "ph--trash--regular",
+          iconOnly: true,
+          label: t("button remove"),
+          onClick: () => {
+            const newValues = arrayValues.filter((_, i) => i !== index);
+            inputProps.onValueChange(name, type, newValues);
+          }
+        }));
+      })), /* @__PURE__ */ import_react3.default.createElement("div", {
+        role: "none",
+        className: "flex justify-between items-center plb-1"
+      }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+        icon: "ph--plus--regular",
+        iconOnly: true,
+        label: t("button add"),
+        onClick: () => {
+          const newValues = [
+            ...arrayValues,
+            {}
+          ];
+          inputProps.onValueChange(name, type, newValues);
+        }
+      })));
+    }
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
+      key: name,
+      role: "none"
+    }, "Nested form not supported in arrays, yet.");
+  }
+  const InputComponent = getInputComponent(type, format);
+  if (!InputComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    key: "meta-input",
+    className: (0, import_react_ui_theme.mx)(padding)
+  }, /* @__PURE__ */ import_react3.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1"
+  }, arrayValues.map((_, index) => /* @__PURE__ */ import_react3.default.createElement("div", {
+    key: index,
+    role: "none",
+    className: "flex items-start gap-1"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: "flex-1"
+  }, /* @__PURE__ */ import_react3.default.createElement(InputComponent, {
+    type,
+    format,
+    label,
+    inputOnly: true,
+    property: `${name}.${index}`,
+    disabled: readonly,
+    placeholder,
+    ...inputProps
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+    icon: "ph--trash--regular",
+    iconOnly: true,
+    label: t("button remove"),
+    onClick: () => {
+      const newValues = arrayValues.filter((_2, i) => i !== index);
+      inputProps.onValueChange(name, type, newValues);
+    }
+  })))), /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: "flex justify-between items-center plb-1"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("button add"),
+    onClick: () => {
+      const newValues = [
+        ...arrayValues,
+        import_effect2.SimpleType.getDefaultValue(type)
+      ];
+      inputProps.onValueChange(name, type, newValues);
+    }
+  })));
+};
+var FormActions = ({ onCancel, onSubmit, canSubmit, readonly }) => {
+  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "none",
     className: "flex justify-center"
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme.mx)(onCancel && !readonly && "grid grid-cols-2 gap-2")
   }, onCancel && !readonly && /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+    "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
   }), onSubmit && /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
     type: "submit",
+    "data-testid": "save-button",
     disabled: !canSubmit,
     icon: "ph--check--regular",
     label: t("button save"),
-    onClick: handleSubmit
-  }))));
+    onClick: onSubmit
+  })));
 };
 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 } = (0, import_react_ui2.useTranslation)(translationKey);
   const [props, setProps] = (0, import_react2.useState)(projection.getFieldProjection(field.id).props);
   (0, import_react2.useEffect)(() => setProps(projection.getFieldProjection(field.id).props), [
@@ -647,22 +817,22 @@ var FieldEditor = ({ view, projection, field, registry, onClose, onCancel }) =>
     view.fields,
     field
   ]);
-  const handleSubmit = (0, import_react2.useCallback)((props2) => {
+  const handleSave = (0, import_react2.useCallback)((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
     });
-    onClose();
+    onSave();
   }, [
     projection,
     field,
-    onClose
+    onSave
   ]);
   const handleCancel = (0, import_react2.useCallback)(() => {
     requestAnimationFrame(() => onCancel?.());
-    onClose();
+    onSave();
   }, [
-    onClose
+    onSave
   ]);
   if (!fieldSchema) {
     import_log.log.warn("invalid format", {
@@ -687,7 +857,7 @@ var FieldEditor = ({ view, projection, field, registry, onClose, onCancel }) =>
     ],
     onValuesChanged: handleValuesChanged,
     onValidate: handleValidate,
-    onSubmit: handleSubmit,
+    onSave: handleSave,
     onCancel: handleCancel,
     Custom: {
       ["format"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
@@ -717,7 +887,7 @@ var ViewMetaSchema = import_echo_schema4.S.Struct({
   name: import_echo_schema4.S.String.annotations({
     [import_echo_schema4.AST.TitleAnnotationId]: "View"
   }),
-  type: import_echo_schema4.Format.DXN.annotations({
+  typename: import_echo_schema4.Format.DXN.annotations({
     [import_echo_schema4.AST.TitleAnnotationId]: "Typename"
   })
 }).pipe(import_echo_schema4.S.mutable);
@@ -733,16 +903,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.type
     };
   }, [
     view
   ]);
-  const handleViewUpdate = (0, import_react8.useCallback)(({ name, type }) => {
+  const handleViewUpdate = (0, import_react8.useCallback)(({ name, typename }) => {
     requestAnimationFrame(() => {
       view.name = name;
-      view.query.type = type;
-      schema.updateTypename(type);
+      view.query.type = typename;
+      schema.updateTypename(typename);
     });
   }, [
     view,
@@ -771,7 +941,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
-    onSubmit: handleViewUpdate
+    onSave: handleViewUpdate
   }), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("div", {
     role: "none",
     className: "p-2"
@@ -805,7 +975,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     projection,
     field,
     registry,
-    onClose: handleClose
+    onSave: handleClose
   }), !readonly && !field && /* @__PURE__ */ import_react8.default.createElement("div", {
     className: "flex p-2 justify-center"
   }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.IconButton, {
@@ -1036,6 +1206,7 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  FormActions,
   GeiPointInput,
   InputHeader,
   NumberInput,