@dxos/react-ui-form 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/Form/fields/RefField.tsx

@@ -0,0 +1,266 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import '@dxos/lit-ui/dx-tag-picker.pcss';
+import { type Database, Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
+import { useQuery, useType as defaultUseType } from '@dxos/echo-react';
+import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
+import { SchemaEx } from '@dxos/effect';
+import { DXN, EID, URI } from '@dxos/keys';
+import { DxAnchor } from '@dxos/lit-ui/react';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { ParentLabelAnnotationId } from '@dxos/schema';
+
+import { translationKey } from '#translations';
+
+import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
+import { omitHiddenFormFields, omitId } from '../Form';
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+// TODO(burdon): Factor out.
+const isRefSnapshot = (val: any): val is { '/': string } => {
+  return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
+};
+
+/**
+ * Find the option a ref-like form value points at. Matches on the local (entity-id) form so a bare local EID
+ * (`echo:/<id>`, produced by `Ref.make`) still resolves against an option keyed by the entity's qualified
+ * self URI (`echo://<space>/<id>`). Returns `undefined` when the value is not a ref or no option matches.
+ *
+ * Comparing by entity id is only sound within one space (ids are unique there, not globally). Two EIDs that
+ * both carry a space authority must therefore agree on it: a qualified value and a qualified option from
+ * different spaces never match, even when their entity ids coincide.
+ */
+export const findRefOption = (value: unknown, options: RefOption[]): RefOption | undefined => {
+  const isRef = Ref.isRef(value);
+  if (!isRef && !isRefSnapshot(value)) {
+    return undefined;
+  }
+  const valueEid = EID.tryParse(isRef ? value.uri : value['/']);
+  if (!valueEid) {
+    return undefined;
+  }
+  const valueSpaceId = EID.getSpaceId(valueEid);
+  const valueLocal = EID.toLocal(valueEid);
+  return options.find((option) => {
+    const optionEid = EID.tryParse(option.id);
+    if (!optionEid) {
+      return false;
+    }
+    const optionSpaceId = EID.getSpaceId(optionEid);
+    if (valueSpaceId != null && optionSpaceId != null && valueSpaceId !== optionSpaceId) {
+      return false;
+    }
+    return EID.equals(EID.toLocal(optionEid), valueLocal);
+  });
+};
+
+const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (
+  results,
+  { parentLabel, getTypePlaceholder } = {},
+) =>
+  results
+    // When labeling by parent, only surface objects that actually have a parent — an unparented object
+    // (e.g. a system feed) has no meaningful parent to label by.
+    .filter((result) => !parentLabel || Obj.getParent(result as Obj.Unknown) != null)
+    .map((result) => {
+      const id = Entity.getURI(result, { prefer: 'named' });
+      const parent = parentLabel ? Obj.getParent(result as Obj.Unknown) : undefined;
+      const labelEntity = parent ?? result;
+      const typename = Entity.getTypename(labelEntity);
+      // Fall back to the entity's type placeholder when it has no label of its own — matching the
+      // app-graph/navtree (`object-name.placeholder` in the entity's typename namespace).
+      const label = Entity.getLabel(labelEntity) ?? (typename ? getTypePlaceholder?.(typename) : undefined) ?? id;
+      return { id, label };
+    });
+
+const defaultUseResults: NonNullable<RefFieldProps['useResults']> = (db, typename) =>
+  useQuery(
+    db,
+    !typename
+      ? Query.select(Filter.nothing())
+      : typename === ANY_OBJECT_TYPENAME
+        ? // Untyped refs show space objects only; the registry is too broad for "any".
+          Query.select(Filter.everything())
+        : // Include registry scope so keyed entities (blueprints, operations) appear as options.
+          Query.select(Filter.type(DXN.make(typename))).from(Scope.space(), Scope.registry()),
+  );
+
+export type RefFieldProps = FormFieldComponentProps &
+  Pick<
+    ObjectPickerContentProps,
+    'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap'
+  > & {
+    db?: Database.Database;
+    // TODO(burdon): Replace hooks with callbacks.
+    useType?: (db?: Database.Database, typeUri?: URI.URI) => Type.AnyEntity;
+    useResults?: (db?: Database.Database, typename?: string) => Entity.Any[];
+    getOptions?: (
+      objects: Entity.Any[],
+      options?: { parentLabel?: boolean; getTypePlaceholder?: (typename: string) => string },
+    ) => RefOption[];
+    /**
+     * Persist a newly-created object. Called after the user fills out the
+     * inline create form and clicks Save. Should add the object to the
+     * database and return it (sync or async). The returned object is then
+     * wired into this slot's form value as a Ref.
+     */
+    onCreate?: (schema: Type.AnyEntity, values: any) => Obj.Unknown | Promise<Obj.Unknown> | undefined | void;
+  };
+
+export const RefField = (props: RefFieldProps) => {
+  const {
+    type,
+    readonly,
+    label,
+    jsonPath,
+    placeholder,
+    layout,
+    getStatus,
+    getValue,
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    createFieldMap,
+    db,
+    useType = defaultUseType,
+    useResults = defaultUseResults,
+    getOptions = defaultGetOptions,
+    onCreate,
+    onValueChange,
+  } = props;
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+
+  const typename = useMemo(
+    () => (type ? SchemaEx.findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
+    [type],
+  );
+
+  // Resolve a type-based placeholder label for entities that have no label of their own — the entity's
+  // `object-name.placeholder` in its own typename namespace, like the app-graph/navtree. Falls back to a
+  // humanized typename segment so we never surface a raw DXN for a type that hasn't registered one.
+  const getTypePlaceholder = useCallback(
+    (placeholderTypename: string): string => {
+      const segment = placeholderTypename.split(/[.:/]/).filter(Boolean).pop() ?? placeholderTypename;
+      const humanized = segment.charAt(0).toUpperCase() + segment.slice(1);
+      return t('object-name.placeholder', { ns: placeholderTypename, defaultValue: humanized });
+    },
+    [t],
+  );
+
+  const results = useResults(db, typename);
+  const options = useMemo(() => {
+    const parentLabel = type ? SchemaEx.findAnnotation<boolean>(type, ParentLabelAnnotationId) === true : false;
+    return getOptions(results, { parentLabel, getTypePlaceholder });
+  }, [results, getOptions, type, getTypePlaceholder]);
+
+  const handleGetValue = useCallback(() => findRefOption(getValue(), options), [options, getValue]);
+
+  const item = handleGetValue();
+  const selectedIds = useMemo(() => (item ? [item.id] : []), [item]);
+  const createSchema = useType(db, typename && typename !== ANY_OBJECT_TYPENAME ? DXN.make(typename) : undefined);
+
+  // Lift the popover open state so we can dismiss it after a successful create.
+  const [open, setOpen] = useState(false);
+
+  const handleCreate = useCallback(
+    async (values: any) => {
+      if (!createSchema || !onCreate) {
+        return;
+      }
+      const newObject = await onCreate(createSchema, values);
+      if (newObject) {
+        // Wire the newly-created object into this slot's form value. ArrayField
+        // owns the array; this RefField represents a single slot, so writing a
+        // Ref via `onValueChange` populates that slot.
+        onValueChange(type, Ref.make(newObject));
+      }
+      setOpen(false);
+    },
+    [createSchema, onCreate, type, onValueChange],
+  );
+
+  const handleUpdate = useCallback(
+    (id: string | undefined) => {
+      const item = options.find((option) => option.id === id);
+      const ref = item ? Ref.fromURI(URI.make(item.id)) : undefined;
+      onValueChange(type, ref);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (item?.id === id) {
+        handleUpdate(undefined);
+      } else {
+        handleUpdate(id);
+      }
+    },
+    [item, handleUpdate],
+  );
+
+  if (!typename || ((readonly || layout === 'static') && !item)) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
+      <div>
+        {readonly ? (
+          !item ? (
+            <p className='text-description mb-2'>{t('empty-readonly-ref-field.label')}</p>
+          ) : (
+            <DxAnchor key={item.id} dxn={item.id} rootclassname='me-1'>
+              {item.label}
+            </DxAnchor>
+          )
+        ) : (
+          <ObjectPicker.Root open={open} onOpenChange={setOpen}>
+            <ObjectPicker.Trigger asChild classNames='p-0'>
+              {item ? (
+                <div className='flex gap-form-gap w-full'>
+                  <Input.Root key={item.id}>
+                    <Input.TextInput value={item.label} readOnly classNames='w-full' />
+                  </Input.Root>
+                </div>
+              ) : (
+                <Button classNames='w-full text-start gap-form-gap'>
+                  <div className='grow overflow-hidden'>
+                    <span className='truncate text-description'>
+                      {placeholder || label || t('ref-field.placeholder')}
+                    </span>
+                  </div>
+                  <Icon size={3} icon='ph--caret-down--bold' />
+                </Button>
+              )}
+            </ObjectPicker.Trigger>
+            <ObjectPicker.Portal>
+              <ObjectPicker.Content
+                classNames='dx-card-popover-width'
+                options={options}
+                selectedIds={selectedIds}
+                // Strip hidden (`FormInputAnnotation.set(false)`) fields so the
+                // form's validator doesn't reject required-but-hidden fields
+                // such as backing-object refs supplied by a `FactoryAnnotation`.
+                createSchema={createSchema && omitHiddenFormFields(omitId(Type.getSchema(createSchema)))}
+                createOptionLabel={createOptionLabel}
+                createOptionIcon={createOptionIcon}
+                createInitialValuePath={createInitialValuePath}
+                createFieldMap={createFieldMap}
+                onCreate={handleCreate}
+                onSelect={handleSelect}
+              />
+            </ObjectPicker.Portal>
+          </ObjectPicker.Root>
+        )}
+      </div>
+      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+    </Input.Root>
+  );
+};

package/src/components/Form/fields/SelectField.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Icon, Input, Select, type SelectRootProps } from '@dxos/react-ui';
+import { getStyles } from '@dxos/ui-theme';
+
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export type SelectFieldOptions = FormFieldComponentProps & {
+  options?: Array<{ value: string | number; label?: string; secondaryLabel?: string; icon?: string; iconHue?: string }>;
+};
+
+export const SelectField = ({
+  type,
+  readonly,
+  label,
+  jsonPath,
+  layout,
+  placeholder,
+  options,
+  getStatus,
+  getValue,
+  onValueChange,
+}: SelectFieldOptions) => {
+  const { status, error } = getStatus();
+  const value = getValue() as string | undefined;
+
+  const handleValueChange = useCallback<NonNullable<SelectRootProps['onValueChange']>>(
+    (value) => onValueChange(type, value),
+    [type, onValueChange],
+  );
+
+  if ((readonly || layout === 'static') && value == null) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
+      {layout === 'static' ? (
+        <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
+      ) : (
+        <Select.Root value={value} onValueChange={handleValueChange}>
+          {/* TODO(burdon): Placeholder not working? */}
+          <Select.TriggerButton classNames='w-full' disabled={!!readonly} placeholder={placeholder} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {options?.map(({ value, label, secondaryLabel, icon, iconHue }) => (
+                  // NOTE: Numeric values are converted to and from strings.
+                  <Select.Option key={String(value)} value={String(value)}>
+                    <span className='flex items-center flex-row gap-2'>
+                      {icon && <Icon icon={icon} classNames={getIconHueStyles(iconHue)} />}
+                      {label ?? String(value)}
+                      {secondaryLabel && <span className='text-subdued text-xs'>{secondaryLabel}</span>}
+                    </span>
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+              <Select.Arrow />
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      )}
+      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+    </Input.Root>
+  );
+};
+
+const getIconHueStyles = (iconHue?: string): string | undefined => {
+  const styles = iconHue ? getStyles(iconHue) : undefined;
+
+  return styles?.fg;
+};

package/src/components/Form/fields/SelectOptionField.stories.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { SelectOption } from '@dxos/echo/Format';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../testing';
+import { Form } from '../Form';
+import { SelectOptionField } from './SelectOptionField';
+
+const schema = Schema.Struct({
+  options: Schema.Array(SelectOption).pipe(Schema.mutable),
+}).pipe(Schema.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>
+      <Form.Root
+        schema={schema}
+        values={values}
+        fieldMap={{ options: SelectOptionField }}
+        onSave={(values) => setValues(values)}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Actions />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/SelectOptionField',
+  component: SelectOptionField as any,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx}

@@ -4,30 +4,39 @@
 
 import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import { type SelectOption } from '@dxos/echo-schema';
+import { type SelectOption } from '@dxos/echo/Format';
 import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, subtleHover } from '@dxos/react-ui-theme';
+import { hues, osTranslations } from '@dxos/ui-theme';
 
-import { translationKey } from '../../../translations';
-import { InputHeader, type InputProps } from '../Input';
+import { translationKey } from '#translations';
 
-export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const SelectOptionField = ({
+  type,
+  readonly,
+  label,
+  jsonPath,
+  getStatus,
+  getValue,
+  onValueChange,
+}: FormFieldComponentProps<SelectOption[] | undefined>) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
   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>();
+  const options = getValue();
 
   // Initialization.
   useEffect(() => {
     if (options === undefined) {
       onValueChange(type, []);
     }
-  }, [options, onValueChange, type]);
+  }, [options, type, onValueChange]);
 
   const randomHue = () => {
     const usedHues = new Set(options?.map((option) => option.color) ?? []);
@@ -88,8 +97,8 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
     [options, type, onValueChange],
   );
 
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
+  const handleKeyDown = useCallback((ev: KeyboardEvent<HTMLInputElement>) => {
+    if (ev.key === 'Enter') {
       setSelectedId(null);
     }
   }, []);
@@ -111,14 +120,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
-      <div role='none'>
+      <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />
+      <div>
         {options && (
           <List.Root
             items={options}
-            isItem={(item) => true}
-            onMove={disabled ? undefined : handleMove}
-            readonly={disabled}
+            isItem={(_item) => true}
+            onMove={readonly ? undefined : handleMove}
+            readonly={!!readonly}
           >
             {({ items }) => (
               <div role='list' className='w-full overflow-auto'>
@@ -127,11 +136,11 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
+                      classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle disabled={disabled} />
+                        <List.ItemDragHandle disabled={!!readonly} />
                         <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>
@@ -139,32 +148,30 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                         <IconButton
                           iconOnly
                           variant='ghost'
-                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
+                          label={t(selected === item.id ? 'collapse.label' : 'expand.label', { ns: osTranslations })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
-                          {/* 16px to match drag handle width. */}
-                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
+                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-md'>
+                          <Input.Label classNames='text-sm'>{t('select-option.label')}</Input.Label>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
                             <Input.TextInput
-                              disabled={disabled}
-                              placeholder={t('select option label placeholder')}
+                              disabled={!!readonly}
+                              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
                             />
-                            <HuePicker disabled={disabled} value={item.color} onChange={handleColorChange(item.id)} />
+                            <HuePicker disabled={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
-                              disabled={disabled}
+                              disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
-                              label={t('select option delete')}
+                              label={t('select-option-delete.button')}
                               onClick={() => handleDelete(item.id)}
                             />
                           </div>
@@ -176,10 +183,10 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                 <IconButton
                   variant='ghost'
                   icon='ph--plus--regular'
-                  label={t('select option add')}
+                  label={t('select-option-add.button')}
                   onClick={handleAdd}
-                  disabled={disabled}
-                  classNames='is-full'
+                  disabled={!!readonly}
+                  classNames='w-full'
                 />
               </div>
             )}

package/src/components/Form/fields/TextAreaField.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextAreaProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const TextAreaField = ({
+  type,
+  readonly,
+  placeholder,
+  onValueChange,
+  onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleChange = useCallback<NonNullable<TextAreaProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextArea
+          rows={5}
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};

package/src/components/Form/fields/TextField.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextInputProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const TextField = ({
+  type,
+  readonly,
+  placeholder,
+  onBlur,
+  onValueChange,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextInput
+          noAutoFill
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onBlur={onBlur}
+          onChange={handleChange}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};