Fix generics inference of useFilter

src/components/filter/index.ts

@@ -0,0 +1 @@
+export * from './useFilter'

src/components/filter/useFilter.ts

@@ -0,0 +1,61 @@
+import { useDebounce } from '@aboutbits/react-toolbox'
+import { ChangeEventHandler, useEffect, useMemo, useRef, useState } from 'react'
+
+export type FilterOptions = {
+  /** Whether to debounce and the debounce interval in milliseconds.
+   * If `true`, the debounce interval defaults to 200 ms.
+   * If a positive `number`, the given debounce interval is used.
+   * If otherwise, the debounce interval defaults to 0 ms.
+   */
+  debounce?: true | number
+}
+
+export function useFilter<TElement extends HTMLElement & { value: unknown }>() {
+  return function useCurryingFilter<TValue extends TElement['value']>(
+    value: TValue,
+    setValue: (v: TValue) => void,
+    options?: FilterOptions,
+  ) {
+    const debounceInterval = useMemo(() => {
+      if (options?.debounce === true) {
+        return 200
+      }
+      if (options?.debounce !== undefined && options.debounce > 0) {
+        return options.debounce
+      }
+      return 0
+    }, [options?.debounce])
+    const elementRef = useRef<TElement>(null)
+
+    const settingNewValueRef = useRef(false)
+
+    const [internalValue, setInternalValue] = useState(value)
+    const debouncedInternalValue = useDebounce(internalValue, debounceInterval)
+    const oldDebouncedInternalValueRef = useRef<TValue>()
+
+    useEffect(() => {
+      // Check that the debounced value is new, because `setValue` might not be reference stable and trigger this effect even though the debounced value did not change
+      if (debouncedInternalValue !== oldDebouncedInternalValueRef.current) {
+        oldDebouncedInternalValueRef.current = debouncedInternalValue
+        setValue(debouncedInternalValue)
+        settingNewValueRef.current = false
+      }
+    }, [debouncedInternalValue, setValue])
+
+    useEffect(() => {
+      if (elementRef.current && !settingNewValueRef.current) {
+        elementRef.current.value = value
+      }
+    }, [value])
+
+    const onChange: ChangeEventHandler<TElement> = (e) => {
+      settingNewValueRef.current = true
+      setInternalValue(e.target.value as TValue)
+    }
+
+    return {
+      ref: elementRef,
+      onChange,
+    }
+  }
+}

src/components/index.ts

@@ -14,4 +14,5 @@ export * from './react-hook-form'
 export * from './section'
 export * from './tabs'
 export * from './types'
+export * from './filter'
 export * from './util'

src/components/util/index.ts

@@ -7,4 +7,3 @@ export * from './useHandleRequest'
 export * from './useId'
 export * from './useScrollToElementOnFristRender'
 export * from './useBackNavigation'
-export * from './useFilter'

src/examples/List.stories.tsx

@@ -27,9 +27,9 @@ import {
   SelectField,
   Tone,
   Option,
+  useFilter,
+  SearchField,
 } from '../components'
-import { SearchField } from '../components/form/SearchField'
-import { useFilter } from '../components/util/useFilter'
 
 const meta = {
   component: SectionContentList,
@@ -116,7 +116,7 @@ export const ListWithFilter: Story = () => {
       (filter.role === '' || item.role === filter.role) &&
       (filter.department === '' || item.department === filter.department),
   )
-  const searchFilterProps = useFilter<HTMLInputElement>(
+  const searchFilterProps = useFilter<HTMLInputElement>()(
     filter.search,
     (v) => {
       setFilter((prevFilter) => ({ ...prevFilter, search: v }))
@@ -125,10 +125,10 @@ export const ListWithFilter: Story = () => {
       debounce: true,
     },
   )
-  const roleFilterProps = useFilter<HTMLSelectElement>(filter.role, (v) => {
+  const roleFilterProps = useFilter<HTMLSelectElement>()(filter.role, (v) => {
     setFilter((prevFilter) => ({ ...prevFilter, role: v }))
   })
-  const departmentFilterProps = useFilter<HTMLSelectElement>(
+  const departmentFilterProps = useFilter<HTMLSelectElement>()(
     filter.department,
     (v) => {
       setFilter((prevFilter) => ({ ...prevFilter, department: v }))