@dxos/react-ui-form 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.5-labs.c0e040f",
+  "version": "0.7.5-labs.d199c0f",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -28,21 +29,21 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.5-labs.c0e040f",
-    "@dxos/debug": "0.7.5-labs.c0e040f",
-    "@dxos/echo-schema": "0.7.5-labs.c0e040f",
-    "@dxos/echo-db": "0.7.5-labs.c0e040f",
-    "@dxos/effect": "0.7.5-labs.c0e040f",
-    "@dxos/keys": "0.7.5-labs.c0e040f",
-    "@dxos/invariant": "0.7.5-labs.c0e040f",
-    "@dxos/live-object": "0.7.5-labs.c0e040f",
-    "@dxos/log": "0.7.5-labs.c0e040f",
-    "@dxos/react-client": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-list": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-pickers": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-types": "0.7.5-labs.c0e040f",
-    "@dxos/schema": "0.7.5-labs.c0e040f",
-    "@dxos/util": "0.7.5-labs.c0e040f"
+    "@dxos/async": "0.7.5-labs.d199c0f",
+    "@dxos/debug": "0.7.5-labs.d199c0f",
+    "@dxos/echo-db": "0.7.5-labs.d199c0f",
+    "@dxos/echo-schema": "0.7.5-labs.d199c0f",
+    "@dxos/effect": "0.7.5-labs.d199c0f",
+    "@dxos/invariant": "0.7.5-labs.d199c0f",
+    "@dxos/live-object": "0.7.5-labs.d199c0f",
+    "@dxos/log": "0.7.5-labs.d199c0f",
+    "@dxos/react-client": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-list": "0.7.5-labs.d199c0f",
+    "@dxos/keys": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-pickers": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-types": "0.7.5-labs.d199c0f",
+    "@dxos/schema": "0.7.5-labs.d199c0f",
+    "@dxos/util": "0.7.5-labs.d199c0f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -54,12 +55,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.5-labs.c0e040f",
-    "@dxos/echo-signals": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f",
-    "@dxos/storybook-utils": "0.7.5-labs.c0e040f"
+    "@dxos/echo-signals": "0.7.5-labs.d199c0f",
+    "@dxos/random": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.d199c0f",
+    "@dxos/storybook-utils": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -67,8 +68,8 @@
     "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f"
+    "@dxos/react-ui": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Defaults.tsx

@@ -182,7 +182,7 @@ export const MarkdownInput = ({
         disabled={disabled}
         placeholder={placeholder}
         value={getValue() ?? ''}
-        classNames={'min-bs-auto overflow-hidden'}
+        classNames={'min-bs-auto max-h-40 overflow-auto'}
         onChange={(event) => onValueChange(type, event.target.value)}
         onBlur={onBlur}
         style={{ resize: 'none' }}

package/src/components/Form/FormContext.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { createContext, useContext, useEffect, type FocusEvent, type PropsWithChildren } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, type FocusEvent, type PropsWithChildren } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -34,12 +34,16 @@ export type FormInputStateProps = {
 export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
   const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
 
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type: SimpleType, value: any) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path),
-  };
+  const stablePath = useMemo(() => path, [Array.isArray(path) ? path.join('.') : path]);
+  return useMemo(
+    () => ({
+      getStatus: () => getStatus(stablePath),
+      getValue: () => getFormValue(stablePath),
+      onValueChange: (type: SimpleType, value: any) => onValueChange(stablePath, type, value),
+      onBlur: () => onTouched(stablePath),
+    }),
+    [getStatus, getFormValue, onValueChange, onTouched, stablePath],
+  );
 };
 
 export const FormProvider = ({

package/src/components/Form/custom/GeoPointInput.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 
-import { type GeoPoint } from '@dxos/echo-schema';
+import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
@@ -14,28 +14,58 @@ import { InputHeader, type InputProps } from '../Input';
 export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue<GeoPoint>() ?? [];
+  const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
+  const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
+
+  const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
+
+  useEffect(() => {
+    const location = GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude.toString());
+    setLatitudeText(location.latitude.toString());
+  }, [geoPoint]);
+
+  const handleCoordinateChange = useCallback(
+    (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const inputText = event.target.value;
+        setText(inputText);
+        if (inputText !== '' && inputText !== '-') {
+          const coord = safeParseFloat(inputText);
+          if (coord !== undefined && !isNaN(coord)) {
+            const currentLocation = GeoLocation.fromGeoPoint(getValue<GeoPoint>() ?? [0, 0]);
+            const newLocation = { ...currentLocation, [coordinateType]: coord };
+            const newValue = GeoLocation.toGeoPoint(newLocation);
+            onValueChange(type, newValue);
+          }
+        }
+      },
+    [getValue, onValueChange, type],
+  );
 
   return (
     <Input.Root validationValence={status}>
       <InputHeader error={error}>
         <Input.Label>{label}</Input.Label>
       </InputHeader>
-      <div className='grid grid-cols-2 gap-2'>
+      <div role='none' className='grid grid-cols-2 gap-2'>
         <Input.TextInput
-          type='number'
+          type='text'
+          pattern='^-?[0-9]*\.?[0-9]*$'
           disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={lng}
-          onChange={(event) => onValueChange(type, [lat, safeParseFloat(event.target.value, 0)])}
+          placeholder={t('placeholder latitude')}
+          value={latitudeText}
+          onChange={handleCoordinateChange('latitude', setLatitudeText)}
           onBlur={onBlur}
         />
         <Input.TextInput
-          type='number'
+          type='text'
+          pattern='^-?[0-9]*\.?[0-9]*$'
           disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={lat}
-          onChange={(event) => onValueChange(type, [safeParseFloat(event.target.value, 0), lng])}
+          placeholder={t('placeholder longitude')}
+          value={longitudeText}
+          onChange={handleCoordinateChange('longitude', setLongitudeText)}
           onBlur={onBlur}
         />
       </div>

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -8,7 +8,7 @@ import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
-import { HuePickerToolbarButton } from '@dxos/react-ui-pickers';
+import { HuePicker } from '@dxos/react-ui-pickers';
 import { hues, mx } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
@@ -154,7 +154,7 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               data-no-submit
                             />
                             <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePickerToolbarButton hue={item.color} onChangeHue={handleColorChange(item.id)} />
+                              <HuePicker value={item.color} onChange={handleColorChange(item.id)} />
                             </Toolbar.Root>
                             <IconButton
                               icon='ph--trash--fill'

package/src/components/Form/factory.tsx

@@ -14,7 +14,7 @@ import { GeoPointInput } from './custom';
  */
 export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
   switch (format) {
-    case FormatEnum.LatLng:
+    case FormatEnum.GeoPoint:
       return GeoPointInput;
     case FormatEnum.Markdown:
       return MarkdownInput;

package/src/hooks/useForm.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -141,7 +141,7 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      // Check if any error paths that are touched have errors
+      // Check if any error paths that are touched have errors.
       !Object.entries(touched).some(
         ([path, isTouched]) =>
           isTouched &&
@@ -183,32 +183,38 @@ export const useForm = <T extends BaseObject>({
     [errors],
   );
 
-  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
-    return getValue(values, createJsonPath(path));
-  };
+  const getFormValue = useCallback<FormHandler<T>['getValue']>(
+    <V>(path: (string | number)[]): V | undefined => {
+      return getValue(values, createJsonPath(path));
+    },
+    [values],
+  );
 
-  const onValueChange = (path: (string | number)[], type: SimpleType, value: any) => {
-    const jsonPath = createJsonPath(path);
-    let parsedValue = value;
-    try {
-      if (type === 'number') {
-        parsedValue = parseFloat(value as string) || 0;
+  const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
+    (path: (string | number)[], type: SimpleType, value: any) => {
+      const jsonPath = createJsonPath(path);
+      let parsedValue = value;
+      try {
+        if (type === 'number') {
+          parsedValue = parseFloat(value as string) || 0;
+        }
+      } catch (err) {
+        log.catch(err);
+        parsedValue = undefined;
       }
-    } catch (err) {
-      log.catch(err);
-      parsedValue = undefined;
-    }
 
-    const newValues = { ...setValue(values, jsonPath, parsedValue) };
-    setValues(newValues);
-    setChanged((prev) => ({ ...prev, [jsonPath]: true }));
-    onValuesChanged?.(newValues);
+      const newValues = { ...setValue(values, jsonPath, parsedValue) };
+      setValues(newValues);
+      setChanged((prev) => ({ ...prev, [jsonPath]: true }));
+      onValuesChanged?.(newValues);
 
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, { changed });
-    }
-  };
+      const isValid = validate(newValues);
+      if (isValid && onValid) {
+        onValid(newValues, { changed });
+      }
+    },
+    [values, onValuesChanged, validate, onValid, changed],
+  );
 
   const onTouched = useCallback(
     (path: (string | number)[]) => {
@@ -219,22 +225,39 @@ export const useForm = <T extends BaseObject>({
     [validate, values],
   );
 
-  return {
-    // State.
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    handleSave,
-    formIsValid,
-
-    // Field utils.
-    getStatus,
-    getValue: getFormValue,
-    onValueChange,
-    onTouched,
-  } satisfies FormHandler<T>;
+  return useMemo(
+    () => ({
+      // State.
+      values,
+      errors,
+      touched,
+      changed,
+      canSave,
+      formIsValid,
+
+      // Actions.
+      handleSave,
+
+      // Field utils.
+      getStatus,
+      getValue: getFormValue,
+      onValueChange,
+      onTouched,
+    }),
+    [
+      values,
+      errors,
+      touched,
+      changed,
+      canSave,
+      formIsValid,
+      handleSave,
+      getStatus,
+      getFormValue,
+      onValueChange,
+      onTouched,
+    ],
+  );
 };
 
 const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
@@ -245,7 +268,7 @@ const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPat
 const flatMap = (errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
-      // Convert the validation error path format to our JsonPath format
+      // Convert the validation error path format to our JsonPath format.
       const jsonPath = fromEffectValidationPath(path);
       if (!(jsonPath in result)) {
         result[jsonPath] = message;

package/src/translations.ts

@@ -36,7 +36,7 @@ export default [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'LatLng',
+        'format latlng': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -81,6 +81,24 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
       return isNaN(date.getTime()) ? null : date;
     }
 
+    case FormatEnum.GeoPoint: {
+      // Parse string in format "lat,long" to GeoPoint [longitude, latitude].
+      if (typeof value === 'string') {
+        // Only keep digits, decimal points, minus signs, and commas.
+        const cleaned = value.replace(/[^0-9.,-]+/g, '');
+        const parts = cleaned.split(',');
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation.toGeoPoint({ latitude: lat, longitude: long });
+          }
+        }
+      }
+
+      return [0, 0];
+    }
+
     default: {
       return value;
     }

package/src/util/formatting.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 
 type ValueFormatProps = {
   type: TypeEnum;
@@ -73,6 +73,19 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
         return date.toLocaleTimeString(locale);
       }
     }
+    case FormatEnum.GeoPoint: {
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // For GeoPoint format [longitude, latitude].
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation.fromGeoPoint(value as [number, number]);
+        return `${latitude},${longitude}`;
+      }
+
+      return String(value);
+    }
     default: {
       if (value === null || value === 'undefined') {
         return '';
@@ -125,6 +138,21 @@ export const formatForEditing = ({ type, format, value, locale = undefined }: Va
       const date = new Date(value as number);
       return date.toISOString().split('T')[1].split('.')[0];
     }
+    case FormatEnum.GeoPoint: {
+      // Handle null or undefined
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // For GeoPoint format [longitude, latitude].
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation.fromGeoPoint(value as [number, number]);
+        return `${latitude},${longitude}`;
+      }
+
+      return String(value);
+    }
+
     default: {
       return String(value);
     }