termcast 1.3.10 → 1.3.18

package/src/components/form/text-area.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { TextAttributes } from '@opentui/core'
-import { useFormContext, Controller } from 'react-hook-form'
-import { useFocusContext } from './index'
+import React, { useRef, useCallback } from 'react'
+import { BoxRenderable, TextareaRenderable } from '@opentui/core'
+import { useFormContext } from 'react-hook-form'
+import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { logger } from 'termcast/src/logger'
 import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
+import { createTextareaFormRef } from './form-ref'
 
 export interface TextAreaProps extends FormItemProps<string> {
   placeholder?: string
@@ -16,67 +16,87 @@ export interface TextAreaProps extends FormItemProps<string> {
 export type TextAreaRef = FormItemRef
 
 export const TextArea = (props: TextAreaProps): any => {
-  const { control } = useFormContext()
+  const { register, formState } = useFormContext()
   const { focusedField, setFocusedField } = useFocusContext()
   const isFocused = focusedField === props.id
 
+  const elementRef = useRef<BoxRenderable>(null)
+  const textareaRef = useRef<TextareaRenderable>(null)
+
+  // Register as form field descendant for scroll support
+  useFormFieldDescendant({
+    id: props.id,
+    elementRef: elementRef.current,
+  })
+
   // TODO in textarea arrows should probably go to lines instead of other forms
   useFormNavigation(props.id)
 
+  // Get register props
+  const registration = register(props.id)
+
+  // Create form ref adapter with onContentChange handler
+  const { formRef, onContentChange } = createTextareaFormRef(
+    props.id,
+    textareaRef,
+    registration,
+  )
+
+  // Memoize ref callback - register() returns new object every render,
+  // so we must not pass registration.ref directly to avoid re-renders
+  const handleRef = useCallback((el: TextareaRenderable | null) => {
+    textareaRef.current = el
+    registration.ref(formRef)
+  }, [])
+
+  const handleContentChange = useCallback(() => {
+    onContentChange()
+    props.onChange?.(formRef.value)
+  }, [props.onChange])
+
+  const fieldError = formState.errors[props.id]
+
   return (
-    <Controller
-      name={props.id}
-      control={control}
-      defaultValue={props.defaultValue || props.value || ''}
-      render={({ field, fieldState, formState }) => {
-        return (
-          <box flexDirection='column'>
-            <WithLeftBorder withDiamond isFocused={isFocused}>
-              <text
-                fg={Theme.text}
-                onMouseDown={() => {
-                  setFocusedField(props.id)
-                }}
-              >
-                {props.title}
-              </text>
-            </WithLeftBorder>
+    <box ref={elementRef} flexDirection="column">
+      <WithLeftBorder withDiamond isFocused={isFocused}>
+        <text
+          fg={isFocused ? Theme.primary : Theme.text}
+          onMouseDown={() => {
+            setFocusedField(props.id)
+          }}
+        >
+          {props.title}
+        </text>
+      </WithLeftBorder>
 
-            <WithLeftBorder isFocused={isFocused}>
-              <box flexGrow={1}>
-                <input
-                  value={field.value}
-                  onInput={(value: string) => {
-                    field.onChange(value)
-                    if (props.onChange) {
-                      props.onChange(value)
-                    }
-                  }}
-                  minHeight={4}
-                  placeholder={props.placeholder}
-                  focused={isFocused}
-                  onMouseDown={() => {
-                    setFocusedField(props.id)
-                  }}
-                />
-              </box>
-            </WithLeftBorder>
+      <WithLeftBorder isFocused={isFocused}>
+        <box flexGrow={1}>
+          <textarea
+            ref={handleRef}
+            initialValue={props.defaultValue || props.value || ''}
+            onContentChange={handleContentChange}
+            minHeight={4}
+            placeholder={props.placeholder}
+            focused={isFocused}
+            onMouseDown={() => {
+              setFocusedField(props.id)
+            }}
+          />
+        </box>
+      </WithLeftBorder>
 
-            {(fieldState.error || props.error) && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.error}>
-                  {fieldState.error?.message || props.error}
-                </text>
-              </WithLeftBorder>
-            )}
-            {props.info && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.textMuted}>{props.info}</text>
-              </WithLeftBorder>
-            )}
-          </box>
-        ) as React.ReactElement
-      }}
-    />
+      {(fieldError || props.error) && (
+        <WithLeftBorder isFocused={isFocused}>
+          <text fg={Theme.error}>
+            {(fieldError?.message as string) || props.error}
+          </text>
+        </WithLeftBorder>
+      )}
+      {props.info && (
+        <WithLeftBorder isFocused={isFocused}>
+          <text fg={Theme.textMuted}>{props.info}</text>
+        </WithLeftBorder>
+      )}
+    </box>
   )
 }

package/src/components/form/text-field.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { TextAttributes } from '@opentui/core'
-import { useFormContext, Controller } from 'react-hook-form'
-import { useFocusContext } from './index'
+import React, { useRef, useCallback } from 'react'
+import { BoxRenderable, TextareaRenderable } from '@opentui/core'
+import { useFormContext } from 'react-hook-form'
+import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { logger } from 'termcast/src/logger'
 import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
+import { createTextareaFormRef } from './form-ref'
 
 export interface TextFieldProps extends FormItemProps<string> {
   placeholder?: string
@@ -15,68 +15,89 @@ export interface TextFieldProps extends FormItemProps<string> {
 export type TextFieldRef = FormItemRef
 
 export const TextField = (props: TextFieldProps): any => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext()
+  const { register, formState } = useFormContext()
   const { focusedField, setFocusedField } = useFocusContext()
   const isFocused = focusedField === props.id
 
+  const elementRef = useRef<BoxRenderable>(null)
+  const textareaRef = useRef<TextareaRenderable>(null)
+
+  // Register as form field descendant for scroll support
+  useFormFieldDescendant({
+    id: props.id,
+    elementRef: elementRef.current,
+  })
+
   // Use form navigation hook
   useFormNavigation(props.id)
 
+  // Get register props
+  const registration = register(props.id, {
+    required: props.error ? props.error : false,
+  })
+
+  // Create form ref adapter with onContentChange handler
+  const { formRef, onContentChange } = createTextareaFormRef(
+    props.id,
+    textareaRef,
+    registration,
+  )
+
+  // Memoize ref callback - register() returns new object every render,
+  // so we must not pass registration.ref directly to avoid re-renders
+  const handleRef = useCallback((el: TextareaRenderable | null) => {
+    textareaRef.current = el
+    registration.ref(formRef)
+  }, [])
+
+  const handleContentChange = useCallback(() => {
+    onContentChange()
+    props.onChange?.(formRef.value)
+  }, [props.onChange])
+
+  const fieldError = formState.errors[props.id]
+
   return (
-    <Controller
-      name={props.id}
-      control={control}
-      defaultValue={props.defaultValue || props.value || ''}
-      rules={{
-        required: props.error ? props.error : false,
-      }}
-      render={({ field, fieldState, formState }) => {
-        return (
-          <box flexDirection='column'>
-            <WithLeftBorder withDiamond isFocused={isFocused}>
-              <text
-                fg={Theme.text}
-                onMouseDown={() => {
-                  setFocusedField(props.id)
-                }}
-              >
-                {props.title}
-              </text>
-            </WithLeftBorder>
-            <WithLeftBorder isFocused={isFocused}>
-              <input
-                value={field.value}
-                onInput={(value: string) => {
-                  field.onChange(value)
-                  if (props.onChange) {
-                    props.onChange(value)
-                  }
-                }}
-                placeholder={props.placeholder}
-                focused={isFocused}
-                onMouseDown={() => {
-                  setFocusedField(props.id)
-                }}
-              />
-            </WithLeftBorder>
-            {(fieldState.error || props.error) && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.error}>
-                  {fieldState.error?.message || props.error}
-                </text>
-              </WithLeftBorder>
-            )}
-            {props.info && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.textMuted}>{props.info}</text>
-              </WithLeftBorder>
-            )}
-          </box>
-        ) as React.ReactElement
-      }}
-    />
+    <box ref={elementRef} flexDirection="column">
+      <WithLeftBorder withDiamond isFocused={isFocused}>
+        <text
+          fg={isFocused ? Theme.primary : Theme.text}
+          onMouseDown={() => {
+            setFocusedField(props.id)
+          }}
+        >
+          {props.title}
+        </text>
+      </WithLeftBorder>
+      <WithLeftBorder isFocused={isFocused}>
+        <textarea
+          ref={handleRef}
+          height={1}
+          keyBindings={[
+            { name: 'return', action: 'submit' },
+            { name: 'linefeed', action: 'submit' },
+          ]}
+          initialValue={props.defaultValue || props.value || ''}
+          onContentChange={handleContentChange}
+          placeholder={props.placeholder}
+          focused={isFocused}
+          onMouseDown={() => {
+            setFocusedField(props.id)
+          }}
+        />
+      </WithLeftBorder>
+      {(fieldError || props.error) && (
+        <WithLeftBorder isFocused={isFocused}>
+          <text fg={Theme.error}>
+            {(fieldError?.message as string) || props.error}
+          </text>
+        </WithLeftBorder>
+      )}
+      {props.info && (
+        <WithLeftBorder isFocused={isFocused}>
+          <text fg={Theme.textMuted}>{props.info}</text>
+        </WithLeftBorder>
+      )}
+    </box>
   )
 }

package/src/components/form/use-form-navigation.tsx

@@ -1,8 +1,47 @@
 import { useKeyboard } from '@opentui/react'
-import { useFormContext } from 'react-hook-form'
-import { useFocusContext } from './index'
+import { useFocusContext, useFormScrollContext } from './index'
 import { useIsInFocus } from '../../internal/focus-context'
 
+// Helper hook to get navigation functions without keyboard handling
+export function useFormNavigationHelpers(id: string) {
+  const scrollContext = useFormScrollContext()
+  const { setFocusedField } = useFocusContext()
+
+  // Get sorted field IDs from descendants
+  const getFieldIds = () => {
+    if (!scrollContext) return []
+    const descendants = Object.values(scrollContext.descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.id)
+      .sort((a, b) => a.index - b.index)
+    return descendants.map((item) => item.props!.id)
+  }
+
+  const navigateToPrevious = () => {
+    const fieldIds = getFieldIds()
+    const currentIndex = fieldIds.indexOf(id)
+    if (currentIndex > 0) {
+      setFocusedField(fieldIds[currentIndex - 1])
+    } else {
+      setFocusedField(fieldIds[fieldIds.length - 1])
+    }
+  }
+
+  const navigateToNext = () => {
+    const fieldIds = getFieldIds()
+    const currentIndex = fieldIds.indexOf(id)
+    if (currentIndex < fieldIds.length - 1) {
+      setFocusedField(fieldIds[currentIndex + 1])
+    } else {
+      setFocusedField(fieldIds[0])
+    }
+  }
+
+  return {
+    navigateToPrevious,
+    navigateToNext,
+  }
+}
+
 export function useFormNavigation(
   id: string,
   options?: {
@@ -10,8 +49,7 @@ export function useFormNavigation(
     handleTabs?: boolean
   },
 ) {
-  const { getValues } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const { focusedField } = useFocusContext()
   const isInFocus = useIsInFocus()
   const isFocused = focusedField === id
 
@@ -19,25 +57,7 @@ export function useFormNavigation(
 
   handleArrows = false
 
-  const navigateToPrevious = () => {
-    const fieldNames = Object.keys(getValues())
-    const currentIndex = fieldNames.indexOf(id)
-    if (currentIndex > 0) {
-      setFocusedField(fieldNames[currentIndex - 1])
-    } else {
-      setFocusedField(fieldNames[fieldNames.length - 1])
-    }
-  }
-
-  const navigateToNext = () => {
-    const fieldNames = Object.keys(getValues())
-    const currentIndex = fieldNames.indexOf(id)
-    if (currentIndex < fieldNames.length - 1) {
-      setFocusedField(fieldNames[currentIndex + 1])
-    } else {
-      setFocusedField(fieldNames[0])
-    }
-  }
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(id)
 
   useKeyboard((evt) => {
     // Only handle keyboard events when this field is focused and form is in focus

package/src/components/form/with-left-border.tsx

@@ -30,7 +30,7 @@ export const WithLeftBorder = ({
           key={String(isFocused)}
           fg={isFocused ? Theme.accent : Theme.text}
         >
-          {isFocused ? chars.focused : chars.unfocused}
+          <b>{isFocused ? chars.focused : chars.unfocused}</b>
         </text>
         <box flexGrow={1} paddingLeft={paddingLeft}>
           {children}
@@ -42,6 +42,7 @@ export const WithLeftBorder = ({
     <box
       paddingLeft={paddingLeft}
       border={['left']}
+      borderStyle={isFocused ? 'heavy' : 'single'}
       borderColor={isFocused ? Theme.accent : undefined}
       flexDirection='row'
     >