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

package/dist/lib/node-esm/index.mjs

@@ -89,6 +89,8 @@ import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties2, sortProperties } from "@dxos/schema";
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
+import { pipe } from "effect";
+import { capitalize } from "effect/String";
 import React5, { useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { AST, S } from "@dxos/echo-schema";
 import { findNode, getDiscriminatedType, isDiscriminatedUnion } from "@dxos/effect";
@@ -98,12 +100,9 @@ import { mx } from "@dxos/react-ui-theme";
 import { getSchemaProperties } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
-// packages/ui/react-ui-form/src/components/Form/factory.tsx
-import { FormatEnum } from "@dxos/echo-schema";
-
-// packages/ui/react-ui-form/src/components/Form/Custom.tsx
+// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
 import React3 from "react";
-import { Input as Input2, useTranslation } from "@dxos/react-ui";
+import { Input as Input2, Select } from "@dxos/react-ui";
 
 // packages/ui/react-ui-form/src/components/Form/Input.tsx
 import React2 from "react";
@@ -124,57 +123,14 @@ var InputHeader = ({ children, error }) => {
   }, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error)));
 };
 
-// packages/ui/react-ui-form/src/components/Form/Custom.tsx
-var LatLngInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus?.(property);
-  const { lat = 0, lng = 0 } = getValue(property) ?? {};
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ React3.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement("div", {
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: lat,
-    onChange: (event) => onValueChange(property, type, {
-      lat: safeParseFloat(event.target.value, 0),
-      lng
-    }),
-    onBlur
-  }), /* @__PURE__ */ React3.createElement(Input2.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;
-  }
-};
-
 // packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-import React4 from "react";
-import { Input as Input3, Select } from "@dxos/react-ui";
 var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ React4.createElement(Input3.Root, {
+  return /* @__PURE__ */ React3.createElement(Input2.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+  }, /* @__PURE__ */ React3.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
     disabled,
     placeholder,
     value: getValue(property) ?? "",
@@ -184,11 +140,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__ */ React4.createElement(Input3.Root, {
+  return /* @__PURE__ */ React3.createElement(Input2.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+  }, /* @__PURE__ */ React3.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
     type: "number",
     disabled,
     placeholder,
@@ -199,42 +155,88 @@ var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, ge
 };
 var BooleanInput = ({ property, type, label, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ React4.createElement(Input3.Root, {
+  return /* @__PURE__ */ React3.createElement(Input2.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+  }, /* @__PURE__ */ React3.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Input3.Switch, {
+  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Input2.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__ */ React4.createElement(Input3.Root, {
+  return /* @__PURE__ */ React3.createElement(Input2.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+  }, /* @__PURE__ */ React3.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Select.Root, {
+  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Select.Root, {
     value: getValue(property),
     onValueChange: (value) => onValueChange(property, type, value)
-  }, /* @__PURE__ */ React4.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ React4.createElement(Select.Portal, null, /* @__PURE__ */ React4.createElement(Select.Content, null, /* @__PURE__ */ React4.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React4.createElement(Select.Option, {
+    /* @__PURE__ */ React3.createElement(Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
   )))))));
 };
 
+// packages/ui/react-ui-form/src/components/Form/factory.tsx
+import { FormatEnum } from "@dxos/echo-schema";
+
+// packages/ui/react-ui-form/src/components/Form/Custom.tsx
+import React4 from "react";
+import { Input as Input3, useTranslation } from "@dxos/react-ui";
+var GeiPointInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue(property) ?? [];
+  return /* @__PURE__ */ React4.createElement(Input3.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: lng,
+    onChange: (event) => onValueChange(property, type, [
+      lat,
+      safeParseFloat(event.target.value, 0)
+    ]),
+    onBlur
+  }), /* @__PURE__ */ React4.createElement(Input3.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;
+  }
+};
+
 // packages/ui/react-ui-form/src/components/Form/factory.tsx
 var getInputComponent = (type, format) => {
   switch (format) {
     case FormatEnum.LatLng:
-      return LatLngInput;
+      return GeiPointInput;
   }
   switch (type) {
     case "string":
@@ -252,7 +254,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);
@@ -286,21 +288,21 @@ 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(() => Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
     values,
     touched,
     errors
   ]);
-  const handleSubmit = useCallback(() => {
+  const handleSave = useCallback(() => {
     if (validate(values)) {
-      onSubmit?.(values, {
+      onSave?.(values, {
         changed
       });
     }
   }, [
     values,
     validate,
-    onSubmit
+    onSave
   ]);
   const getStatus = useCallback((property) => ({
     status: errors[property] ? "error" : void 0,
@@ -321,7 +323,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 164,
+        L: 165,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -364,8 +366,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
     // Field utils.
     getStatus,
     getValue,
@@ -376,7 +378,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 215,
+    L: 216,
     S: void 0,
     A: [
       "obj",
@@ -400,25 +402,25 @@ 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, 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 props = useMemo2(() => {
-    const props2 = getSchemaProperties(schema.ast, values);
-    const filtered = filter ? filter(props2) : props2;
-    const findIndex = (props3, prop) => {
-      const idx = props3.findIndex((p) => p === prop);
+  const properties = useMemo2(() => {
+    const props = 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;
@@ -433,7 +435,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)
       });
@@ -444,16 +446,41 @@ 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)
-  }, 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 ?? pipe(name, capitalize);
+    const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+    let InputComponent = Custom?.[key.join(".")];
+    if (!InputComponent) {
+      if (options) {
+        return /* @__PURE__ */ React5.createElement("div", {
+          key: name,
+          role: "none",
+          className: padding
+        }, /* @__PURE__ */ React5.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 = findNode(prop.type, isDiscriminatedUnion);
-        const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(prop.type, AST.isTypeLiteral);
+        const baseNode = findNode(ast, isDiscriminatedUnion);
+        const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(ast, AST.isTypeLiteral);
         if (typeLiteral) {
           const schema2 = S.make(typeLiteral);
           return /* @__PURE__ */ React5.createElement("div", {
@@ -461,7 +488,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
             role: "none"
           }, /* @__PURE__ */ React5.createElement("div", {
             className: padding
-          }, title ?? name), /* @__PURE__ */ React5.createElement(Form, {
+          }, label), /* @__PURE__ */ React5.createElement(Form, {
             schema: schema2,
             path: key,
             values: values[name] ?? {},
@@ -477,13 +504,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__ */ React5.createElement("div", {
       key: name,
       role: "none",
@@ -493,11 +519,11 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       format,
       property: name,
       disabled: readonly,
-      label: title ?? name,
+      label,
       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", {
@@ -507,18 +533,18 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), onSubmit && /* @__PURE__ */ React5.createElement(IconButton, {
+  }), onSave && /* @__PURE__ */ React5.createElement(IconButton, {
     type: "submit",
-    disabled: !canSubmit,
+    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), [
@@ -589,22 +615,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", {
@@ -629,7 +655,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, {
@@ -668,7 +694,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);
@@ -684,16 +710,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,
@@ -722,7 +748,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"
@@ -756,7 +782,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, {
@@ -992,8 +1018,8 @@ export {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  GeiPointInput,
   InputHeader,
-  LatLngInput,
   NumberInput,
   SelectInput,
   TextInput,