fix(filter): setValue prop type

packages/shoreline/src/components/filter/filter-provider.tsx

@@ -1,10 +1,9 @@
-import type React from 'react'
+import type { Dispatch, ReactNode } from 'react'
 import { useEffect } from 'react'
-import type { ReactNode } from 'react'
 import { ComboboxProvider } from '../combobox'
 
-import { SelectProvider, useSelectStore } from '../select'
 import { PopoverProvider, usePopoverStore } from '../popover'
+import { SelectProvider, useSelectStore } from '../select'
 import { FilterContext } from './filter-context'
 
 /**
@@ -15,7 +14,9 @@ import { FilterContext } from './filter-context'
  *   <FilterPopover>...</FilterPopover>
  * </FilterProvider>
  */
-export function FilterProvider(props: FilterProviderProps) {
+export function FilterProvider<Value extends string | string[] = string>(
+  props: FilterProviderProps<Value>
+) {
   const {
     children,
     open,
@@ -37,7 +38,7 @@ export function FilterProvider(props: FilterProviderProps) {
 
   const filterStore = useSelectStore({
     value,
-    setValue: setValue as any,
+    setValue,
     defaultValue,
   })
 
@@ -77,7 +78,9 @@ export function FilterProvider(props: FilterProviderProps) {
   )
 }
 
-export interface FilterProviderOptions {
+export interface FilterProviderOptions<
+  Value extends string | string[] = string,
+> {
   /**
    * Children of FilterProvider
    */
@@ -109,17 +112,16 @@ export interface FilterProviderOptions {
   /**
    * Filter value
    */
-  value?: string | string[]
+  value?: Value
   /**
    * Callback to set the filter value
    */
-  setValue?:
-    | React.Dispatch<React.SetStateAction<string>>
-    | React.Dispatch<React.SetStateAction<string[]>>
+  setValue?: Dispatch<Value>
   /**
    * Filter default value
    */
-  defaultValue?: string | string[]
+  defaultValue?: Value
 }
 
-export type FilterProviderProps = FilterProviderOptions
+export type FilterProviderProps<Value extends string | string[] = string> =
+  FilterProviderOptions<Value>

packages/shoreline/src/components/filter/filter.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentPropsWithoutRef, ForwardedRef } from 'react'
 import { forwardRef } from 'react'
 import { FilterList } from './filter-list'
 import type { FilterPopoverProps } from './filter-popover'
@@ -7,6 +7,43 @@ import type { FilterProviderProps } from './filter-provider'
 import { FilterProvider } from './filter-provider'
 import { FilterTrigger, type FilterTriggerProps } from './filter-trigger'
 
+const FilterComp = <Value extends string | string[] = string>(
+  props: FilterProps<Value>,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
+  const {
+    children,
+    label,
+    value,
+    setValue,
+    defaultValue,
+    searchValue,
+    setSearchValue,
+    defaultSearchValue,
+    messages,
+    disabled,
+    ...otherProps
+  } = props
+
+  return (
+    <div data-sl-filter ref={ref} {...otherProps}>
+      <FilterProvider
+        value={value}
+        setValue={setValue}
+        defaultValue={defaultValue}
+        searchValue={searchValue}
+        setSearchValue={setSearchValue}
+        defaultSearchValue={defaultSearchValue}
+      >
+        <FilterTrigger disabled={disabled}>{label}</FilterTrigger>
+        <FilterPopover messages={messages}>
+          <FilterList>{children}</FilterList>
+        </FilterPopover>
+      </FilterProvider>
+    </div>
+  )
+}
+
 /**
  * Filters represent criteria that users can choose to narrow down a Collection. They can include single or multiple selection.
  * @status stable
@@ -15,44 +52,15 @@ import { FilterTrigger, type FilterTriggerProps } from './filter-trigger'
  *  <FilterItem value="option">Option</FilterItem>
  * </Filter>
  */
-export const Filter = forwardRef<HTMLDivElement, FilterProps>(
-  function Filter(props, ref) {
-    const {
-      children,
-      label,
-      value,
-      setValue,
-      defaultValue,
-      searchValue,
-      setSearchValue,
-      defaultSearchValue,
-      messages,
-      disabled,
-      ...otherProps
-    } = props
-
-    return (
-      <div data-sl-filter ref={ref} {...otherProps}>
-        <FilterProvider
-          value={value}
-          setValue={setValue}
-          defaultValue={defaultValue}
-          searchValue={searchValue}
-          setSearchValue={setSearchValue}
-          defaultSearchValue={defaultSearchValue}
-        >
-          <FilterTrigger disabled={disabled}>{label}</FilterTrigger>
-          <FilterPopover messages={messages}>
-            <FilterList>{children}</FilterList>
-          </FilterPopover>
-        </FilterProvider>
-      </div>
-    )
-  }
-)
+export const Filter = forwardRef(FilterComp) as <
+  Value extends string | string[] = string,
+>(
+  props: FilterProps<Value>,
+  ref: ForwardedRef<HTMLDivElement>
+) => JSX.Element
 
-type InheritedOptions = Pick<
-  FilterProviderProps,
+type InheritedOptions<Value extends string | string[] = string> = Pick<
+  FilterProviderProps<Value>,
   | 'value'
   | 'setValue'
   | 'defaultValue'
@@ -63,11 +71,13 @@ type InheritedOptions = Pick<
   Pick<FilterPopoverProps, 'messages'> &
   Pick<FilterTriggerProps, 'disabled'>
 
-export interface FilterOptions extends InheritedOptions {
+export interface FilterOptions<Value extends string | string[] = string>
+  extends InheritedOptions<Value> {
   /**
    * Filter label
    */
   label: string
 }
 
-export type FilterProps = FilterOptions & ComponentPropsWithoutRef<'div'>
+export type FilterProps<Value extends string | string[] = string> =
+  FilterOptions<Value> & ComponentPropsWithoutRef<'div'>