Fix

packages/effect-fc/src/hooks/Hooks/useInput.ts

@@ -8,14 +8,14 @@ import { useRefState } from "./useRefState.js"
 export namespace useInput {
     export interface Options<A, R> {
         readonly schema: Schema.Schema<A, string, R>
+        readonly equivalence?: Equivalence.Equivalence<A>
         readonly ref: SubscriptionRef.SubscriptionRef<A>
         readonly debounce?: Duration.DurationInput
-        readonly equivalence?: Equivalence.Equivalence<A>
     }
 
     export interface Result {
         readonly value: string
-        readonly onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
         readonly error: Option.Option<ParseResult.ParseError>
     }
 }
@@ -56,10 +56,8 @@ export const useInput: {
                 Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
             ),
         ),
-    ], { concurrency: "unbounded" }), [options.ref, options.schema, options.debounce, options.equivalence, internalRef])
+    ], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])
 
     const [value, setValue] = yield* useRefState(internalRef)
-    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value), [setValue])
+    return { value, setValue, error }
-
-    return { value, onChange, error }
 })

packages/effect-fc/src/hooks/Hooks/useOptionalInput.ts

@@ -12,16 +12,16 @@ export namespace useOptionalInput {
     export interface Options<A, R> {
         readonly schema: Schema.Schema<A, string, R>
         readonly defaultValue?: A
+        readonly equivalence?: Equivalence.Equivalence<A>
         readonly ref: SubscriptionRef.SubscriptionRef<Option.Option<A>>
         readonly debounce?: Duration.DurationInput
-        readonly equivalence?: Equivalence.Equivalence<A>
     }
 
     export interface Result {
         readonly value: string
-        readonly onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
-        readonly disabled: boolean
+        readonly enabled: boolean
-        readonly setDisabled: React.Dispatch<React.SetStateAction<boolean>>
+        readonly setEnabled: React.Dispatch<React.SetStateAction<boolean>>
         readonly error: Option.Option<ParseResult.ParseError>
     }
 }
@@ -29,7 +29,7 @@ export namespace useOptionalInput {
 export const useOptionalInput: {
     <A, R>(options: useOptionalInput.Options<A, R>): Effect.Effect<useOptionalInput.Result, ParseResult.ParseError, R>
 } = Effect.fnUntraced(function* <A, R>(options: useOptionalInput.Options<A, R>) {
-    const [internalRef, disabledRef] = yield* useOnce(() => Effect.andThen(options.ref, upstreamValue =>
+    const [internalRef, enabledRef] = yield* useOnce(() => Effect.andThen(options.ref, upstreamValue =>
         Effect.all([
             Effect.andThen(
                 Option.match(upstreamValue, {
@@ -41,7 +41,7 @@ export const useOptionalInput: {
                 SubscriptionRef.make,
             ),
 
-            SubscriptionRef.make(Option.isNone(upstreamValue)),
+            SubscriptionRef.make(Option.isSome(upstreamValue)),
         ])
     ))
 
@@ -63,7 +63,7 @@ export const useOptionalInput: {
                 ),
             ),
 
-            onNone: () => Ref.set(disabledRef, true),
+            onNone: () => Ref.set(enabledRef, false),
         })),
 
         // Sync all changes to the internal state with upstream
@@ -76,28 +76,24 @@ export const useOptionalInput: {
                 Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
             ),
         ),
-    ], { concurrency: "unbounded" }), [options.ref, options.schema, options.debounce, options.equivalence, internalRef])
+    ], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])
 
-    const setDisabled = yield* useCallbackSync((setStateAction: React.SetStateAction<boolean>) =>
+    const setEnabled = yield* useCallbackSync(
-        Effect.andThen(
+        (setStateAction: React.SetStateAction<boolean>) => Effect.andThen(
-            Ref.updateAndGet(disabledRef, prevState =>
+            Ref.updateAndGet(enabledRef, prevState => SetStateAction.value(setStateAction, prevState)),
-                SetStateAction.value(setStateAction, prevState)
+            enabled => enabled
-            ),
+                ? internalRef.pipe(
-
-            disabled => disabled
-                ? Ref.set(options.ref, Option.none())
-                : internalRef.pipe(
                     Effect.andThen(Schema.decode(options.schema)),
                     Effect.andThen(v => Ref.set(options.ref, Option.some(v))),
                     Effect.andThen(() => setError(Option.none())),
                     Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
+                )
+                : Ref.set(options.ref, Option.none()),
         ),
-        ),
+        [options.schema, options.ref, internalRef, enabledRef],
-    [disabledRef, options.ref, internalRef, options.schema])
+    )
 
-    const [disabled] = yield* useSubscribeRefs(disabledRef)
+    const [enabled] = yield* useSubscribeRefs(enabledRef)
     const [value, setValue] = yield* useRefState(internalRef)
-    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value), [setValue])
+    return { value, setValue, enabled, setEnabled, error }
-
-    return { value, onChange, disabled, setDisabled, error }
 })

packages/example/src/lib/TextAreaInput.tsx

@@ -1,45 +1,40 @@
 import { Callout, Flex, TextArea, TextAreaProps } from "@radix-ui/themes"
-import { Option, ParseResult, Schema, Struct } from "effect"
+import { Array, Equivalence, Option, ParseResult, Schema, Struct } from "effect"
 import { Component } from "effect-fc"
 import { useInput } from "effect-fc/hooks"
 import * as React from "react"
 
 
-export interface TextAreaInputProps<A, R>
+export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">
-extends
-    Omit<useInput.Options<A, R>, "schema">,
-    Omit<TextAreaProps, "ref">
-{}
 
-export const TextAreaInput = <A, R>(
+export const TextAreaInput = <A, R>(options: {
-    schema: Schema.Schema<A, string, R>
+    readonly schema: Schema.Schema<A, string, R>
-): Component.Component<
+    readonly equivalence?: Equivalence.Equivalence<A>
+}): Component.Component<
     TextAreaInputProps<A, R>,
     React.JSX.Element,
     ParseResult.ParseError,
     R
 > => Component.makeUntraced(function* TextFieldInput(props) {
-    const input = yield* useInput({ schema, ...props })
+    const input = yield* useInput({ ...options, ...props })
-    const issues = React.useMemo(() => Option.map(
+    const issue = React.useMemo(() => input.error.pipe(
-        input.error,
+        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        ParseResult.ArrayFormatter.formatErrorSync,
+        Option.flatMap(Array.head),
     ), [input.error])
 
     return (
         <Flex direction="column" gap="1">
-            {Option.isSome(issues) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>
-                        <ul>{issues.value.map((issue, i) => <li key={i}>{issue.message}</li>)}</ul>
-                    </Callout.Text>
-                </Callout.Root>
-            }
-
             <TextArea
                 value={input.value}
-                onChange={input.onChange}
+                onChange={e => input.setValue(e.target.value)}
                 {...Struct.omit(props, "ref")}
             />
+
+            {Option.isSome(issue) &&
+                <Callout.Root color="red" role="alert">
+                    <Callout.Text>{issue.value.message}</Callout.Text>
+                </Callout.Root>
+            }
         </Flex>
     )
 })

packages/example/src/lib/TextFieldInput.tsx

@@ -24,8 +24,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             optional: true,
             // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useOptionalInput({
-                schema: options.schema,
+                ...options,
-                equivalence: options.equivalence,
                 ...props as TextFieldOptionalInputProps<A, R>,
             }),
         }
@@ -33,8 +32,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             optional: false,
             // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useInput({
-                schema: options.schema,
+                ...options,
-                equivalence: options.equivalence,
                 ...props as TextFieldInputProps<A, R>,
             })
         }
@@ -49,21 +47,20 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             <Flex direction="row" align="center" gap="1">
                 {input.optional &&
                     <Checkbox
-                        checked={!input.disabled}
+                        checked={input.enabled}
-                        onCheckedChange={checked => input.setDisabled(!checked)}
+                        onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
                     />
                 }
 
                 <TextField.Root
-                    {...input.optional
+                    value={input.value}
-                        ? Struct.pick(input, "value", "onChange", "disabled")
+                    onChange={e => input.setValue(e.target.value)}
-                        : Struct.pick(input, "value", "onChange")
+                    disabled={input.optional ? !input.enabled : undefined}
-                    }
                     {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref")}
                 />
             </Flex>
 
-            {(!(input.optional && input.disabled) && Option.isSome(issue)) &&
+            {(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
                 <Callout.Root color="red" role="alert">
                     <Callout.Text>{issue.value.message}</Callout.Text>
                 </Callout.Root>

packages/example/src/todo/Todo.tsx

@@ -12,7 +12,7 @@ import { FaDeleteLeft } from "react-icons/fa6"
 import { TodosState } from "./TodosState.service"
 
 
-const StringTextAreaInput = TextAreaInput(Schema.String)
+const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
 const OptionalDateInput = TextFieldInput({ optional: true, schema: Schema.DateTimeUtc })
 
 const makeTodo = makeUuid4.pipe(