From 3ac411807f9e60340a51c267c2e97f9235cba68e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= Date: Sat, 24 Aug 2024 00:16:32 -0300 Subject: [PATCH 1/3] fix(filter-provider): to value related props use generic type Change component to generic typed Value, defaulting to string. Infers type from value, setValue, defaultValue. --- .../src/components/filter/filter-provider.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/shoreline/src/components/filter/filter-provider.tsx b/packages/shoreline/src/components/filter/filter-provider.tsx index 53c896a015..790a1660f6 100644 --- a/packages/shoreline/src/components/filter/filter-provider.tsx +++ b/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' * ... * */ -export function FilterProvider(props: FilterProviderProps) { +export function FilterProvider( + props: FilterProviderProps +) { const { children, open, @@ -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.Dispatch> + setValue?: Dispatch /** * Filter default value */ - defaultValue?: string | string[] + defaultValue?: Value } -export type FilterProviderProps = FilterProviderOptions +export type FilterProviderProps = + FilterProviderOptions From 64f4020b51e46956d0fccc2d0865842815a63e76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= Date: Sat, 24 Aug 2024 00:17:26 -0300 Subject: [PATCH 2/3] fix(filter-provider): remove unecessary cast --- packages/shoreline/src/components/filter/filter-provider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shoreline/src/components/filter/filter-provider.tsx b/packages/shoreline/src/components/filter/filter-provider.tsx index 790a1660f6..4304a7b5b9 100644 --- a/packages/shoreline/src/components/filter/filter-provider.tsx +++ b/packages/shoreline/src/components/filter/filter-provider.tsx @@ -38,7 +38,7 @@ export function FilterProvider( const filterStore = useSelectStore({ value, - setValue: setValue as any, + setValue, defaultValue, }) From f9cc5eabe561f1c9b0ab6ae394dedb53ce1784ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= Date: Sat, 24 Aug 2024 00:23:14 -0300 Subject: [PATCH 3/3] fix(filter): value related props use generic type We need to use the same behavior from filter provider here because of most part of props came from it. --- .../src/components/filter/filter.tsx | 90 ++++++++++--------- 1 file changed, 50 insertions(+), 40 deletions(-) diff --git a/packages/shoreline/src/components/filter/filter.tsx b/packages/shoreline/src/components/filter/filter.tsx index 41c940a583..d943e6f445 100644 --- a/packages/shoreline/src/components/filter/filter.tsx +++ b/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 = ( + props: FilterProps, + ref: ForwardedRef +) => { + const { + children, + label, + value, + setValue, + defaultValue, + searchValue, + setSearchValue, + defaultSearchValue, + messages, + disabled, + ...otherProps + } = props + + return ( +
+ + {label} + + {children} + + +
+ ) +} + /** * 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' * Option * */ -export const Filter = forwardRef( - function Filter(props, ref) { - const { - children, - label, - value, - setValue, - defaultValue, - searchValue, - setSearchValue, - defaultSearchValue, - messages, - disabled, - ...otherProps - } = props - - return ( -
- - {label} - - {children} - - -
- ) - } -) +export const Filter = forwardRef(FilterComp) as < + Value extends string | string[] = string, +>( + props: FilterProps, + ref: ForwardedRef +) => JSX.Element -type InheritedOptions = Pick< - FilterProviderProps, +type InheritedOptions = Pick< + FilterProviderProps, | 'value' | 'setValue' | 'defaultValue' @@ -63,11 +71,13 @@ type InheritedOptions = Pick< Pick & Pick -export interface FilterOptions extends InheritedOptions { +export interface FilterOptions + extends InheritedOptions { /** * Filter label */ label: string } -export type FilterProps = FilterOptions & ComponentPropsWithoutRef<'div'> +export type FilterProps = + FilterOptions & ComponentPropsWithoutRef<'div'>