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, onChange, error }
+    return { value, setValue, 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 disabled: boolean
-        readonly setDisabled: React.Dispatch<React.SetStateAction<boolean>>
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
+        readonly enabled: 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>) =>
-        Effect.andThen(
-            Ref.updateAndGet(disabledRef, prevState =>
-                SetStateAction.value(setStateAction, prevState)
-            ),
-
-            disabled => disabled
-                ? Ref.set(options.ref, Option.none())
-                : internalRef.pipe(
+    const setEnabled = yield* useCallbackSync(
+        (setStateAction: React.SetStateAction<boolean>) => Effect.andThen(
+            Ref.updateAndGet(enabledRef, prevState => SetStateAction.value(setStateAction, prevState)),
+            enabled => enabled
+                ? 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()),
         ),
-    [disabledRef, options.ref, internalRef, options.schema])
+        [options.schema, options.ref, internalRef, enabledRef],
+    )
 
-    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, onChange, disabled, setDisabled, error }
+    return { value, setValue, enabled, setEnabled, error }
 })