fix(usecontrollablestate): allow use of simple dispatch function in useControllableState

Author: stuarthendren

src/useControllableState/useControllableState.stories.tsx

@@ -1,14 +1,17 @@
 import { Checkbox } from '@committed/components'
 import { action } from '@storybook/addon-actions'
 import { Meta, Story } from '@storybook/react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useControllableState } from '.'
 
 export interface UseControllableStateDocsProps<T> {
   /** The controlled value (of type T) or undefined for an uncontrolled value */
   value: T | undefined
   /** The dispatch handler for state changes or undefined for when an uncontrolled value, ignored if uncontrolled*/
-  setValue: React.Dispatch<React.SetStateAction<T>> | undefined
+  setValue:
+    | React.Dispatch<React.SetStateAction<T>>
+    | React.Dispatch<T>
+    | undefined
   /** The initial state value, or state initializer for when uncontrolled, ignored if controlled  */
   initialState?: T | (() => T | undefined) | undefined
 }
@@ -60,3 +63,44 @@ Controlled.parameters = {
     },
   },
 }
+
+export const SetState = Template.bind({})
+SetState.args = {
+  value: true,
+  setValue: (value: boolean | ((current: boolean) => void)) =>
+    action('setState')(value),
+}
+SetState.parameters = {
+  docs: {
+    description: {
+      story:
+        'This is a controlled example, where both set and function set are supported',
+    },
+  },
+}
+
+export const SetValue = Template.bind({})
+SetValue.args = {
+  value: true,
+  setValue: (value: boolean) => action('setValue')(value),
+}
+SetValue.parameters = {
+  docs: {
+    description: {
+      story:
+        'This is a controlled example, where only direct value is supported - this is allow but may lead to errors if clients attempt to use the function style set.',
+    },
+  },
+}
+
+export const WrappedExample = () => {
+  const [state, setState] = useState(false)
+
+  return <Template value={state} setValue={setState} />
+}
+
+export const WrappedExampleNoFunction = () => {
+  const [state, setState] = useState(false)
+
+  return <Template value={state} setValue={(value) => setState(value)} />
+}

src/useControllableState/useControllableState.ts

@@ -22,7 +22,10 @@ function noop() {}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useControllableState<T = any>(
   value: T | undefined,
-  setValue: React.Dispatch<React.SetStateAction<T>> | undefined,
+  setValue:
+    | React.Dispatch<React.SetStateAction<T>>
+    | React.Dispatch<T>
+    | undefined,
   initialState?: T | (() => T | undefined) | undefined
 ): [T, React.Dispatch<React.SetStateAction<T>>] {
   const { current: wasControlled } = useRef(value !== undefined)