diff --git a/.changeset/popular-zebras-study.md b/.changeset/popular-zebras-study.md new file mode 100644 index 0000000000..724abd9795 --- /dev/null +++ b/.changeset/popular-zebras-study.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Fixed Pagination, PreviousLink and NextLink types diff --git a/packages/hydrogen/src/pagination/Pagination.ts b/packages/hydrogen/src/pagination/Pagination.ts index b3cf9d5ca6..2303374e85 100644 --- a/packages/hydrogen/src/pagination/Pagination.ts +++ b/packages/hydrogen/src/pagination/Pagination.ts @@ -4,8 +4,8 @@ import { useMemo, useRef, forwardRef, - type ReactNode, type Ref, + type FC, } from 'react'; import type { Maybe, @@ -49,13 +49,9 @@ interface PaginationInfo { /** The paginated array of nodes. You should map over and render this array. */ nodes: Array; /** The `` is a helper component that makes it easy to navigate to the next page of paginated data. Alternatively you can build your own `` component: `` */ - NextLink: ( - props: Omit & {ref?: Ref}, - ) => ReactNode; + NextLink: FC & {ref?: Ref}>; /** The `` is a helper component that makes it easy to navigate to the previous page of paginated data. Alternatively you can build your own `` component: `` */ - PreviousLink: ( - props: Omit & {ref?: Ref}, - ) => ReactNode; + PreviousLink: FC & {ref?: Ref}>; /** The URL to the previous page of paginated data. Use this prop to build your own `` component. */ previousPageUrl: string; /** The URL to the next page of paginated data. Use this prop to build your own `` component. */ @@ -84,9 +80,7 @@ type PaginationProps = { children: PaginationRenderProp; }; -type PaginationRenderProp = ( - props: PaginationInfo, -) => ReactNode; +type PaginationRenderProp = FC>; /** * @@ -102,7 +96,7 @@ export function Pagination({ console.warn(' requires children to work properly'); return null; }, -}: PaginationProps) { +}: PaginationProps): ReturnType { const transition = useNavigation(); const isLoading = transition.state === 'loading'; const {