@dxos/react-ui-form 0.7.5-main.9d2a38b → 0.7.5-main.c41020f

package/src/components/Form/FormContent.tsx

@@ -0,0 +1,170 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { pipe } from 'effect';
+import { capitalize } from 'effect/String';
+import React, { useMemo } from 'react';
+
+import { AST, S } from '@dxos/echo-schema';
+import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
+import { mx } from '@dxos/react-ui-theme';
+import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
+import { isNotFalsy } from '@dxos/util';
+
+import { ArrayField } from './ArrayField';
+import { SelectInput } from './Defaults';
+import { type ComponentLookup } from './Form';
+import { useInputProps, useFormValues } from './FormContext';
+import { type InputComponent } from './Input';
+import { getInputComponent } from './factory';
+
+export type FormContentProps = {
+  schema: S.Schema.All;
+  path?: (string | number)[];
+  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
+  sort?: string[];
+  readonly?: boolean;
+  lookupComponent?: ComponentLookup;
+  Custom?: Partial<Record<string, InputComponent>>;
+};
+
+export type FormFieldProps = {
+  property: SchemaProperty<any>;
+  path?: (string | number)[];
+  readonly?: boolean;
+  /** Used to indicate if input should be presented inline (e.g. for array items). */
+  inline?: boolean;
+  lookupComponent?: ComponentLookup;
+  Custom?: Partial<Record<string, InputComponent>>;
+};
+
+export const FormField = ({ property, path, readonly, inline, lookupComponent, Custom }: FormFieldProps) => {
+  const inputProps = useInputProps(path);
+  const { ast, name, type, format, title, description, options, examples, array } = property;
+
+  const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
+  const placeholder = useMemo(
+    () => (examples?.length ? `Example: "${examples[0]}"` : description),
+    [examples, description],
+  );
+
+  const FoundComponent = lookupComponent?.({
+    prop: name,
+    schema: S.make(ast),
+    inputProps: {
+      type,
+      format,
+      label,
+      disabled: readonly,
+      placeholder,
+      ...inputProps,
+    },
+  });
+
+  if (FoundComponent) {
+    return <div role='none'>{FoundComponent}</div>;
+  }
+
+  const jsonPath = createJsonPath(path ?? []);
+  const CustomComponent = Custom?.[jsonPath];
+  if (CustomComponent) {
+    return (
+      <CustomComponent
+        type={type}
+        format={format}
+        label={label}
+        inputOnly={inline}
+        placeholder={placeholder}
+        disabled={readonly}
+        {...inputProps}
+      />
+    );
+  }
+
+  if (array) {
+    return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
+  }
+
+  const InputComponent = getInputComponent(type, format);
+  if (InputComponent) {
+    return (
+      <div role='none'>
+        <InputComponent
+          type={type}
+          format={format}
+          label={label}
+          inputOnly={inline}
+          placeholder={placeholder}
+          disabled={readonly}
+          {...inputProps}
+        />
+      </div>
+    );
+  }
+
+  if (options) {
+    return (
+      <div role='none'>
+        <SelectInput
+          type={type}
+          format={format}
+          disabled={readonly}
+          inputOnly={inline}
+          label={label}
+          options={options.map((option) => ({ value: option, label: String(option) }))}
+          placeholder={placeholder}
+          {...inputProps}
+        />
+      </div>
+    );
+  }
+
+  if (type === 'object') {
+    const baseNode = findNode(ast, isDiscriminatedUnion);
+    const typeLiteral = baseNode
+      ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
+      : findNode(ast, AST.isTypeLiteral);
+
+    if (typeLiteral) {
+      return (
+        <div role='none'>
+          {!inline && <div>{label}</div>}
+          <FormFields schema={S.make(typeLiteral)} path={path} readonly={readonly} Custom={Custom} />
+        </div>
+      );
+    }
+  }
+
+  return null;
+};
+
+export const FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }: FormContentProps) => {
+  const values = useFormValues(path);
+
+  const properties = useMemo(() => {
+    const props = getSchemaProperties(schema.ast, values);
+    const filtered = filter ? filter(props) : props;
+
+    return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
+  }, [schema, values, filter, sort]);
+
+  return (
+    <div role='form' className={mx('flex flex-col w-full gap-2')}>
+      {properties
+        .map((property) => {
+          return (
+            <FormField
+              key={property.name}
+              property={property}
+              path={[...(path ?? []), property.name]}
+              readonly={readonly}
+              lookupComponent={lookupComponent}
+              Custom={Custom}
+            />
+          );
+        })
+        .filter(isNotFalsy)}
+    </div>
+  );
+};

package/src/components/Form/FormContext.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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';
+import { createJsonPath, type SimpleType } from '@dxos/effect';
+
+import { type FormHandler, type FormOptions, useForm } from '../../hooks';
+
+type FormContextValue<T extends BaseObject> = FormHandler<T>;
+
+const FormContext = createContext<FormContextValue<any> | undefined>(undefined);
+
+export const useFormContext = <T extends BaseObject>(): FormContextValue<T> => {
+  return useContext(FormContext) ?? raise(new Error('Missing FormContext'));
+};
+
+export const useFormValues = (path: (string | number)[] = []): any => {
+  const { values: formValues } = useFormContext();
+  const jsonPath = createJsonPath(path);
+  return getValue(formValues, jsonPath) as BaseObject;
+};
+
+export type FormInputStateProps = {
+  getStatus: () => { status?: 'error'; error?: string };
+  getValue: <V>() => V | undefined;
+  onValueChange: (type: SimpleType, value: any) => void;
+  onBlur: (event: FocusEvent<HTMLElement>) => void;
+};
+
+export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
+  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
+
+  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 = ({
+  children,
+  formRef,
+  autoSave,
+  ...formOptions
+}: PropsWithChildren<
+  FormOptions<any> & {
+    formRef?: React.RefObject<HTMLDivElement>;
+    autoSave?: boolean;
+  }
+>) => {
+  const form = useForm(formOptions);
+
+  useEffect(() => {
+    if (!formRef?.current) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const keyIsEnter = event.key === 'Enter';
+      const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+      const inputIsTextarea = (event.target as HTMLElement).tagName.toLowerCase() === 'textarea';
+      const inputOptOut = (event.target as HTMLElement).hasAttribute('data-no-submit');
+
+      // Regular inputs: Submit on Enter (no modifiers).
+      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
+
+      // Textareas: Submit only on Meta+Enter.
+      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
+
+      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
+        if (!autoSave && form.canSave) {
+          form.handleSave();
+        }
+        if (autoSave && form.formIsValid) {
+          (event.target as HTMLElement).blur();
+        }
+      }
+    };
+
+    const formElement = formRef.current;
+
+    formElement.addEventListener('keydown', handleKeyDown);
+    return () => formElement.removeEventListener('keydown', handleKeyDown);
+  }, [formRef, form.canSave, form.formIsValid, form.handleSave, autoSave]);
+
+  return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
+};

package/src/components/Form/Input.tsx

@@ -4,30 +4,29 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
+import { type FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Tooltip } from '@dxos/react-ui';
 import { errorText } from '@dxos/react-ui-theme';
 
-import { type FormHandler } from '../../hooks';
+import { type FormInputStateProps } from './FormContext';
 
 /**
  * Props passed to input components.
  */
-export type InputProps<T extends BaseObject> = {
-  property: PropertyKey<T>;
+export type InputProps = {
   type: SimpleType;
   format?: FormatEnum;
   label?: string;
   disabled?: boolean;
   placeholder?: string;
   inputOnly?: boolean;
-} & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
+} & FormInputStateProps;
 
 /**
  * Form input component.
  */
-export type InputComponent<T extends BaseObject> = FC<InputProps<T>>;
+export type InputComponent = FC<InputProps>;
 
 export type InputHeaderProps = PropsWithChildren<{
   error?: string;

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

@@ -2,49 +2,70 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 
-import { type BaseObject, 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';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-export const GeoPointInput = <T extends BaseObject>({
-  property,
-  type,
-  label,
-  disabled,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps<T>) => {
+export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus?.(property);
-  const [lng = 0, lat = 0] = getValue<GeoPoint>(property) ?? [];
+  const { status, error } = getStatus();
+  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(property, 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(property, 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.stories.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { S, SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SelectOptionInput } from './SelectOptionsInput';
+import translations from '../../../translations';
+import { TestLayout, TestPanel } from '../../testing';
+import { Form } from '../Form';
+
+const schema = S.Struct({
+  options: S.Array(SelectOptionSchema).pipe(S.mutable),
+}).pipe(S.mutable);
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<{ options: SelectOption[] }>({
+    // TODO(Zaymon): Pick colors from our limited set.
+    options: [
+      { id: 'opt_1', title: 'First option', color: 'amber' },
+      { id: 'opt_2', title: 'Second option', color: 'emerald' },
+      { id: 'opt_3', title: 'Third option', color: 'rose' },
+    ],
+  });
+
+  return (
+    <TestLayout>
+      <TestPanel>
+        <Form
+          schema={schema}
+          values={values}
+          onSave={(vals) => setValues(vals)}
+          Custom={{ options: SelectOptionInput }}
+        />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-form/SelectOptionsInput',
+  component: SelectOptionInput,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: { translations },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: DefaultStory,
+};

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

@@ -0,0 +1,190 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState, type ChangeEvent, useRef } from 'react';
+
+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 { HuePicker } from '@dxos/react-ui-pickers';
+import { hues, mx } from '@dxos/react-ui-theme';
+
+import { translationKey } from '../../../translations';
+import { InputHeader, type InputProps } from '../Input';
+
+// TODO(ZaymonFC): Handle disabled.
+export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+  const [selected, setSelectedId] = useState<string | null>(null);
+  const [isNewOption, setIsNewOption] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const options = getValue<SelectOption[] | undefined>();
+
+  // Initialization.
+  useEffect(() => {
+    if (options === undefined) {
+      onValueChange(type, []);
+    }
+  }, [options, onValueChange, type]);
+
+  const randomHue = () => {
+    const usedHues = new Set(options?.map((option) => option.color) ?? []);
+    // Pick a random unused option from hueTokenThemes.
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
+    if (unusedHues.length > 0) {
+      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+    }
+
+    // Pick a random one that hasn't been used in the last three options
+    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
+    return (
+      availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)]
+    );
+  };
+
+  const handleAdd = useCallback(() => {
+    const newId = PublicKey.random().truncate();
+    const newOption = { id: newId, title: '', color: randomHue() };
+    onValueChange(type, [...(options ?? []), newOption]);
+    setSelectedId(newId);
+    setIsNewOption(true);
+  }, [options, type, onValueChange]);
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      const newOptions = options?.filter((option) => option.id !== id) ?? [];
+      onValueChange(type, newOptions);
+      setSelectedId(null);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleMove = useCallback(
+    (from: number, to: number) => {
+      if (!options) {
+        return;
+      }
+
+      const newOptions = [...options];
+      const [removed] = newOptions.splice(from, 1);
+      newOptions.splice(to, 0, removed);
+      onValueChange(type, newOptions);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleClick = useCallback((id: string) => {
+    setSelectedId((current) => (current === id ? null : id));
+  }, []);
+
+  const handleTitleChange = useCallback(
+    (id: string) => (e: ChangeEvent<HTMLInputElement>) => {
+      const newOptions = options?.map((o) => (o.id === id ? { ...o, title: e.target.value } : o));
+      onValueChange(type, newOptions ?? []);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setSelectedId(null);
+    }
+  }, []);
+
+  const handleColorChange = useCallback(
+    (id: string) => (hue: string) => {
+      const newOptions = options?.map((o) => (o.id === id ? { ...o, color: hue } : o));
+      onValueChange(type, newOptions ?? []);
+    },
+    [options, type, onValueChange],
+  );
+
+  useEffect(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
+    }
+  }, [selected, isNewOption]);
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <div role='none'>
+        {options && (
+          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+            {({ items }) => (
+              <div role='list' className='w-full overflow-auto'>
+                {items?.map((item) => (
+                  <div key={item.id}>
+                    <List.Item
+                      role='button'
+                      item={item}
+                      classNames={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                      aria-expanded={selected === item.id}
+                    >
+                      <div className='flex items-center'>
+                        <List.ItemDragHandle />
+                        <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
+                          {/* TODO(ZaymonFC): Move spacer into Tag component. */}
+                          <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
+                        </List.ItemTitle>
+                        <Icon
+                          icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
+                          onClick={() => handleClick(item.id)}
+                        />
+                      </div>
+                      {selected === item.id && (
+                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                          {/* 16px to match drag handle width. */}
+                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
+                          <div className='flex flex-row items-center gap-1'>
+                            <Input.TextInput
+                              placeholder={t('select option label placeholder')}
+                              ref={selected === item.id ? inputRef : undefined}
+                              value={item.title}
+                              onChange={handleTitleChange(item.id)}
+                              onKeyDown={handleKeyDown}
+                              classNames='flex-1'
+                              data-no-submit
+                            />
+                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
+                              <HuePicker value={item.color} onChange={handleColorChange(item.id)} />
+                            </Toolbar.Root>
+                            <IconButton
+                              icon='ph--trash--fill'
+                              iconOnly
+                              label={t('select option delete')}
+                              onClick={() => handleDelete(item.id)}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </List.Item>
+                  </div>
+                ))}
+                <div role='listitem'>
+                  <div
+                    role='button'
+                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                    onClick={handleAdd}
+                  >
+                    <div className='flex items-center gap-1'>
+                      <Icon icon='ph--plus--regular' />
+                      <span className='text-sm'>{t('select option add')}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </List.Root>
+        )}
+      </div>
+    </Input.Root>
+  );
+};

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

@@ -4,7 +4,6 @@
 
 import React from 'react';
 
-import { type BaseObject } from '@dxos/echo-schema';
 import { Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { safeParseFloat } from '@dxos/util';
@@ -13,9 +12,8 @@ import { InputHeader, type InputProps } from '../Input';
 
 const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
 
-export const TupleInput = <T extends BaseObject>({
+export const TupleInput = ({
   binding,
-  property,
   type,
   label,
   disabled,
@@ -23,11 +21,11 @@ export const TupleInput = <T extends BaseObject>({
   getValue,
   onValueChange,
   onBlur,
-}: InputProps<T> & { binding: string[] }) => {
-  const { status, error } = getStatus?.(property);
+}: InputProps & { binding: string[] }) => {
+  const { status, error } = getStatus();
 
   // TODO(burdon): Generalize number/float/string, etc.
-  const values: Record<string, number> = getValue<Record<string, number>>(property) ?? {};
+  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
 
   return (
     <Input.Root validationValence={status}>
@@ -41,9 +39,7 @@ export const TupleInput = <T extends BaseObject>({
             type='number'
             disabled={disabled}
             value={values[prop]}
-            onChange={(event) =>
-              onValueChange(property, type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })
-            }
+            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
             onBlur={onBlur}
           />
         ))}