@dxos/react-ui-form 0.7.1 → 0.7.2-main.f1adc9f

package/dist/lib/node/index.cjs

@@ -32,8 +32,8 @@ __export(node_exports, {
   DeprecatedFormInput: () => DeprecatedFormInput,
   FieldEditor: () => FieldEditor,
   Form: () => Form,
+  GeiPointInput: () => GeiPointInput,
   InputHeader: () => InputHeader,
-  LatLngInput: () => LatLngInput,
   NumberInput: () => NumberInput,
   SelectInput: () => SelectInput,
   TextInput: () => TextInput,
@@ -55,20 +55,22 @@ var import_echo_schema = require("@dxos/echo-schema");
 var import_log = require("@dxos/log");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_schema = require("@dxos/schema");
+var import_effect = require("effect");
+var import_String = require("effect/String");
 var import_react3 = __toESM(require("react"));
 var import_echo_schema2 = require("@dxos/echo-schema");
-var import_effect = require("@dxos/effect");
+var import_effect2 = require("@dxos/effect");
 var import_log2 = require("@dxos/log");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_schema2 = require("@dxos/schema");
 var import_util = require("@dxos/util");
-var import_echo_schema3 = require("@dxos/echo-schema");
 var import_react4 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react5 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_echo_schema3 = require("@dxos/echo-schema");
 var import_react6 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
 var import_react7 = require("react");
@@ -173,52 +175,13 @@ var InputHeader = ({ children, error }) => {
     side: "bottom"
   }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Arrow, null), error)));
 };
-var LatLngInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
-  const { lat = 0, lng = 0 } = getValue(property) ?? {};
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
   }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: lat,
-    onChange: (event) => onValueChange(property, type, {
-      lat: safeParseFloat(event.target.value, 0),
-      lng
-    }),
-    onBlur
-  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder longitude"),
-    value: lng,
-    onChange: (event) => onValueChange(property, type, {
-      lat,
-      lng: safeParseFloat(event.target.value, 0)
-    }),
-    onBlur
-  })));
-};
-var safeParseFloat = (str, defaultValue) => {
-  try {
-    return parseFloat(str);
-  } catch {
-    return defaultValue ?? 0;
-  }
-};
-var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
-  const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     disabled,
     placeholder,
     value: getValue(property) ?? "",
@@ -228,11 +191,11 @@ var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getV
 };
 var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     type: "number",
     disabled,
     placeholder,
@@ -243,40 +206,79 @@ var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, ge
 };
 var BooleanInput = ({ property, type, label, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Switch, {
+  }, /* @__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)
   }));
 };
 var SelectInput = ({ property, type, label, disabled, placeholder, options, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Root, {
+  }, /* @__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),
     onValueChange: (value) => onValueChange(property, type, value)
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.TriggerButton, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Portal, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Option, {
+    /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
   )))))));
 };
+var GeiPointInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = (0, import_react_ui6.useTranslation)(translationKey);
+  const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue(property) ?? [];
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: lng,
+    onChange: (event) => onValueChange(property, type, [
+      lat,
+      safeParseFloat(event.target.value, 0)
+    ]),
+    onBlur
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: lat,
+    onChange: (event) => onValueChange(property, type, [
+      safeParseFloat(event.target.value, 0),
+      lng
+    ]),
+    onBlur
+  })));
+};
+var safeParseFloat = (str, defaultValue) => {
+  try {
+    return parseFloat(str);
+  } catch {
+    return defaultValue ?? 0;
+  }
+};
 var getInputComponent = (type, format) => {
   switch (format) {
     case import_echo_schema3.FormatEnum.LatLng:
-      return LatLngInput;
+      return GeiPointInput;
   }
   switch (type) {
     case "string":
@@ -288,7 +290,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);
@@ -322,21 +324,21 @@ 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)(() => Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
     values,
     touched,
     errors
   ]);
-  const handleSubmit = (0, import_react7.useCallback)(() => {
+  const handleSave = (0, import_react7.useCallback)(() => {
     if (validate(values)) {
-      onSubmit?.(values, {
+      onSave?.(values, {
         changed
       });
     }
   }, [
     values,
     validate,
-    onSubmit
+    onSave
   ]);
   const getStatus = (0, import_react7.useCallback)((property) => ({
     status: errors[property] ? "error" : void 0,
@@ -357,7 +359,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       import_log3.log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 164,
+        L: 165,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -400,8 +402,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
     // Field utils.
     getStatus,
     getValue,
@@ -412,7 +414,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   (0, import_invariant.invariant)(obj, void 0, {
     F: __dxlog_file,
-    L: 215,
+    L: 216,
     S: void 0,
     A: [
       "obj",
@@ -434,25 +436,25 @@ var flatMap = (errors) => {
 };
 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, onValuesChanged, onValidate, onSave, onCancel, Custom }) => {
   const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const onValid = (0, import_react3.useMemo)(() => autoSave ? onSubmit : void 0, [
+  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 props = (0, import_react3.useMemo)(() => {
-    const props2 = (0, import_schema2.getSchemaProperties)(schema.ast, values);
-    const filtered = filter ? filter(props2) : props2;
-    const findIndex = (props3, prop) => {
-      const idx = props3.findIndex((p) => p === prop);
+  const properties = (0, import_react3.useMemo)(() => {
+    const props = (0, import_schema2.getSchemaProperties)(schema.ast, values);
+    const filtered = filter ? filter(props) : props;
+    const findIndex = (props2, prop) => {
+      const idx = props2.findIndex((p) => p === prop);
       return idx === -1 ? Infinity : idx;
     };
     return sort ? filtered.sort(({ name: a }, { name: b }) => findIndex(sort, a) - findIndex(sort, b)) : filtered;
@@ -467,7 +469,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         errors
       }, {
         F: __dxlog_file2,
-        L: 93,
+        L: 96,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -478,16 +480,41 @@ 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)
-  }, props.map(({ prop, name, type, format, title, description, examples }) => {
+  }, properties.map((property) => {
+    const { ast, name, type, format, title, description, examples, options } = property;
     const key = [
       ...path,
       name
     ];
-    const InputComponent = Custom?.[key.join(".")] ?? getInputComponent(type, format);
+    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) {
+      if (options) {
+        return /* @__PURE__ */ import_react3.default.createElement("div", {
+          key: name,
+          role: "none",
+          className: padding
+        }, /* @__PURE__ */ import_react3.default.createElement(SelectInput, {
+          type,
+          format,
+          property: name,
+          disabled: readonly,
+          label,
+          options: options.map((option) => ({
+            value: option,
+            label: String(option)
+          })),
+          placeholder,
+          ...inputProps
+        }));
+      }
+      InputComponent = getInputComponent(type, format);
+    }
     if (!InputComponent) {
       if (type === "object") {
-        const baseNode = (0, import_effect.findNode)(prop.type, import_effect.isDiscriminatedUnion);
-        const typeLiteral = baseNode ? (0, import_effect.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect.findNode)(prop.type, import_echo_schema2.AST.isTypeLiteral);
+        const baseNode = (0, import_effect2.findNode)(ast, import_effect2.isDiscriminatedUnion);
+        const typeLiteral = baseNode ? (0, import_effect2.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect2.findNode)(ast, import_echo_schema2.AST.isTypeLiteral);
         if (typeLiteral) {
           const schema2 = import_echo_schema2.S.make(typeLiteral);
           return /* @__PURE__ */ import_react3.default.createElement("div", {
@@ -495,7 +522,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
             role: "none"
           }, /* @__PURE__ */ import_react3.default.createElement("div", {
             className: padding
-          }, title ?? name), /* @__PURE__ */ import_react3.default.createElement(Form, {
+          }, label), /* @__PURE__ */ import_react3.default.createElement(Form, {
             schema: schema2,
             path: key,
             values: values[name] ?? {},
@@ -511,13 +538,12 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         type
       }, {
         F: __dxlog_file2,
-        L: 132,
+        L: 160,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return null;
     }
-    const placeholder = examples?.length ? `Example: ${examples[0]}` : description;
     return /* @__PURE__ */ import_react3.default.createElement("div", {
       key: name,
       role: "none",
@@ -527,11 +553,11 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       format,
       property: name,
       disabled: readonly,
-      label: title ?? name,
+      label,
       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("div", {
     role: "none",
     className: "flex justify-center"
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
@@ -541,16 +567,16 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), onSubmit && /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+  }), onSave && /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
     type: "submit",
-    disabled: !canSubmit,
+    disabled: !canSave,
     icon: "ph--check--regular",
     label: t("button save"),
-    onClick: handleSubmit
+    onClick: handleSave
   }))));
 };
 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), [
@@ -621,22 +647,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", {
@@ -661,7 +687,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, {
@@ -691,7 +717,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);
@@ -707,16 +733,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 = (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.typename = typename;
+      schema.updateTypename(typename);
     });
   }, [
     view,
@@ -745,7 +771,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"
@@ -779,7 +805,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, {
@@ -1010,8 +1036,8 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  GeiPointInput,
   InputHeader,
-  LatLngInput,
   NumberInput,
   SelectInput,
   TextInput,