feat(pagination): update types

adevinta · Sep 25, 2024 · a0f9e18 · a0f9e18
1 parent 3517f82
commit a0f9e18
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 78 deletions.
diff --git a/packages/components/pagination/src/PaginationContext.tsx b/packages/components/pagination/src/PaginationContext.tsx
@@ -1,14 +1,19 @@
-import { type IconButtonProps } from '@spark-ui/icon-button'
 import * as pagination from '@zag-js/pagination'
-import { normalizeProps, useMachine } from '@zag-js/react'
+import { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'
 import { createContext, type ReactNode, useContext, useId } from 'react'
 
 import { sliceArrayWithIndex } from './utils'
 
-export interface PaginationContextState {
-  pagination: pagination.Api & {
-    getFirstPageTriggerProps: () => Partial<IconButtonProps>
-    getLastPageTriggerProps: () => Partial<IconButtonProps>
+export interface PaginationContextState<T extends PropTypes = PropTypes> {
+  pagination: pagination.Api<T> & {
+    getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {
+      'data-part': string
+      onClick: () => void
+    }
+    getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {
+      'data-part': string
+      onClick: () => void
+    }
   }
 }
 

diff --git a/packages/components/pagination/src/PaginationFirstPageTrigger.tsx b/packages/components/pagination/src/PaginationFirstPageTrigger.tsx
@@ -1,34 +1,28 @@
 import { Icon } from '@spark-ui/icon'
-import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
+import { IconButton } from '@spark-ui/icon-button'
 import { ArrowDoubleLeft } from '@spark-ui/icons/dist/icons/ArrowDoubleLeft'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import { usePagination } from './PaginationContext'
 
-interface FirstPageTriggerCommonProps {
-  children?: ReactNode
-  className?: string
-  'aria-label': string
-}
-
-interface FirstPageTriggerLinkProps extends ComponentPropsWithoutRef<'a'> {
+interface AnchorProps extends ComponentPropsWithoutRef<'a'> {
   href: string
 }
 
-interface FirstPageTriggerButtonProps extends IconButtonProps {
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   href?: undefined
 }
-
-export type FirstPageTriggerProps = FirstPageTriggerCommonProps &
-  (FirstPageTriggerLinkProps | FirstPageTriggerButtonProps)
+export type FirstPageTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
+  'aria-label': string
+}
 
 export const FirstPageTrigger = forwardRef<HTMLButtonElement, FirstPageTriggerProps>(
   ({ children, className, href, ...props }, ref) => {
     const { pagination } = usePagination()
 
     // ZagJS props
-    const apiProps: any = pagination.getFirstPageTriggerProps()
+    const apiProps = pagination.getFirstPageTriggerProps()
 
     // Locally managed props
     const localProps = {
@@ -39,7 +33,13 @@ export const FirstPageTrigger = forwardRef<HTMLButtonElement, FirstPageTriggerPr
       className,
     }
 
-    const mergedProps = mergeProps(apiProps, localProps)
+    // We know 'aria-label' is included in props
+    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+
+    const mergedProps = mergeProps(
+      apiProps,
+      localProps as unknown as typeof apiProps
+    ) as WithAriaLabel
 
     const content = children || (
       <Icon>

diff --git a/packages/components/pagination/src/PaginationItem.tsx b/packages/components/pagination/src/PaginationItem.tsx
@@ -1,24 +1,20 @@
-import { Button, type ButtonProps } from '@spark-ui/button'
+import { Button } from '@spark-ui/button'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import { usePagination } from './PaginationContext'
 
-interface ItemCommonProps {
-  children?: ReactNode
-  value: number
-  'aria-label': string
-}
-
-interface ItemLinkProps extends ComponentPropsWithoutRef<'a'> {
+interface AnchorProps extends ComponentPropsWithoutRef<'a'> {
   href: string
 }
 
-interface ItemButtonProps extends ButtonProps {
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   href?: undefined
 }
-
-export type ItemProps = ItemCommonProps & (ItemLinkProps | ItemButtonProps)
+export type ItemProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
+  'aria-label': string
+  value: number
+}
 
 export const Item = forwardRef<HTMLButtonElement, ItemProps>(
   ({ children, value, className, href, ...props }, ref) => {

diff --git a/packages/components/pagination/src/PaginationLastPageTrigger.tsx b/packages/components/pagination/src/PaginationLastPageTrigger.tsx
@@ -1,34 +1,28 @@
 import { Icon } from '@spark-ui/icon'
-import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
+import { IconButton } from '@spark-ui/icon-button'
 import { ArrowDoubleRight } from '@spark-ui/icons/dist/icons/ArrowDoubleRight'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import { usePagination } from './PaginationContext'
 
-interface LastPageTriggerCommonProps extends ComponentPropsWithoutRef<'button'> {
-  children?: ReactNode
-  className?: string
-  'aria-label': string
-}
-
-interface LastPageTriggerLinkProps extends ComponentPropsWithoutRef<'a'> {
+interface AnchorProps extends ComponentPropsWithoutRef<'a'> {
   href: string
 }
 
-interface LastPageTriggerButtonProps extends IconButtonProps {
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   href?: undefined
 }
-
-export type LastPageTriggerProps = LastPageTriggerCommonProps &
-  (LastPageTriggerLinkProps | LastPageTriggerButtonProps)
+export type LastPageTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
+  'aria-label': string
+}
 
 export const LastPageTrigger = forwardRef<HTMLButtonElement, LastPageTriggerProps>(
   ({ children, className, href, ...props }, ref) => {
     const { pagination } = usePagination()
 
     // ZagJS props
-    const apiProps: any = pagination.getLastPageTriggerProps()
+    const apiProps = pagination.getLastPageTriggerProps()
 
     // Locally managed props
     const localProps = {
@@ -39,7 +33,13 @@ export const LastPageTrigger = forwardRef<HTMLButtonElement, LastPageTriggerProp
       className,
     }
 
-    const mergedProps = mergeProps(apiProps, localProps)
+    // We know 'aria-label' is included in props
+    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+
+    const mergedProps = mergeProps(
+      apiProps,
+      localProps as unknown as typeof apiProps
+    ) as WithAriaLabel
 
     const content = children || (
       <Icon>

diff --git a/packages/components/pagination/src/PaginationNextTrigger.tsx b/packages/components/pagination/src/PaginationNextTrigger.tsx
@@ -1,34 +1,28 @@
 import { Icon } from '@spark-ui/icon'
-import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
+import { IconButton } from '@spark-ui/icon-button'
 import { ArrowVerticalRight } from '@spark-ui/icons/dist/icons/ArrowVerticalRight'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import { usePagination } from './PaginationContext'
 
-interface NextTriggerCommonProps {
-  children?: ReactNode
-  className?: string
-  'aria-label': string
-}
-
-interface NextTriggerLinkProps extends ComponentPropsWithoutRef<'a'> {
+interface AnchorProps extends ComponentPropsWithoutRef<'a'> {
   href: string
 }
 
-interface NextTriggerButtonProps extends IconButtonProps {
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   href?: undefined
 }
-
-export type NextTriggerProps = NextTriggerCommonProps &
-  (NextTriggerLinkProps | NextTriggerButtonProps)
+export type NextTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
+  'aria-label': string
+}
 
 export const NextTrigger = forwardRef<HTMLButtonElement, NextTriggerProps>(
   ({ children, className, href, ...props }, ref) => {
     const { pagination } = usePagination()
 
     // ZagJS props
-    const apiProps: any = pagination.getNextTriggerProps()
+    const apiProps = pagination.getNextTriggerProps()
 
     // Locally managed props
     const localProps = {
@@ -39,7 +33,13 @@ export const NextTrigger = forwardRef<HTMLButtonElement, NextTriggerProps>(
       className,
     }
 
-    const mergedProps = mergeProps(apiProps, localProps)
+    // We know 'aria-label' is included in props
+    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+
+    const mergedProps = mergeProps(
+      apiProps,
+      localProps as unknown as typeof apiProps
+    ) as WithAriaLabel
 
     const content = children || (
       <Icon>

diff --git a/packages/components/pagination/src/PaginationPrevTrigger.tsx b/packages/components/pagination/src/PaginationPrevTrigger.tsx
@@ -1,34 +1,28 @@
 import { Icon } from '@spark-ui/icon'
-import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
+import { IconButton } from '@spark-ui/icon-button'
 import { ArrowVerticalLeft } from '@spark-ui/icons/dist/icons/ArrowVerticalLeft'
 import { mergeProps } from '@zag-js/react'
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import { usePagination } from './PaginationContext'
 
-interface PrevTriggerCommonProps {
-  children?: ReactNode
-  className?: string
-  'aria-label': string
-}
-
-interface PrevTriggerLinkProps extends ComponentPropsWithoutRef<'a'> {
+interface AnchorProps extends ComponentPropsWithoutRef<'a'> {
   href: string
 }
 
-interface PrevTriggerButtonProps extends IconButtonProps {
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   href?: undefined
 }
-
-export type PrevTriggerProps = PrevTriggerCommonProps &
-  (PrevTriggerLinkProps | PrevTriggerButtonProps)
+export type PrevTriggerProps = Omit<AnchorProps | ButtonProps, 'aria-label'> & {
+  'aria-label': string
+}
 
 export const PrevTrigger = forwardRef<HTMLButtonElement, PrevTriggerProps>(
   ({ children, className, href, ...props }, ref) => {
     const { pagination } = usePagination()
 
     // ZagJS props
-    const apiProps: any = pagination.getPrevTriggerProps()
+    const apiProps = pagination.getPrevTriggerProps()
 
     // Locally managed props
     const localProps = {
@@ -39,7 +33,13 @@ export const PrevTrigger = forwardRef<HTMLButtonElement, PrevTriggerProps>(
       className,
     }
 
-    const mergedProps = mergeProps(apiProps, localProps)
+    // We know 'aria-label' is included in props
+    type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }
+
+    const mergedProps = mergeProps(
+      apiProps,
+      localProps as unknown as typeof apiProps
+    ) as WithAriaLabel
 
     const content = children || (
       <Icon>