@dxos/react-ui-form 0.7.1 → 0.7.2-staging.6d26b2a

package/dist/lib/browser/index.mjs

@@ -87,6 +87,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";
@@ -96,12 +98,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";
@@ -122,57 +121,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) ?? "",
@@ -182,11 +138,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,
@@ -197,42 +153,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":
@@ -319,7 +321,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)
       });
@@ -374,7 +376,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",
@@ -412,11 +414,11 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     onValid,
     onSubmit
   });
-  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;
@@ -431,7 +433,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)
       });
@@ -442,16 +444,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 = pipe(title ?? 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", {
@@ -459,7 +486,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] ?? {},
@@ -475,13 +502,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",
@@ -491,7 +517,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       format,
       property: name,
       disabled: readonly,
-      label: title ?? name,
+      label,
       placeholder,
       ...inputProps
     }));
@@ -990,8 +1016,8 @@ export {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  GeiPointInput,
   InputHeader,
-  LatLngInput,
   NumberInput,
   SelectInput,
   TextInput,