From a0f9e1875f7fc589027970589d22af368d391dec Mon Sep 17 00:00:00 2001 From: acd02 Date: Wed, 18 Sep 2024 16:28:19 +0200 Subject: [PATCH] feat(pagination): update types --- .../pagination/src/PaginationContext.tsx | 17 +++++++---- .../src/PaginationFirstPageTrigger.tsx | 30 +++++++++---------- .../pagination/src/PaginationItem.tsx | 20 +++++-------- .../src/PaginationLastPageTrigger.tsx | 30 +++++++++---------- .../pagination/src/PaginationNextTrigger.tsx | 30 +++++++++---------- .../pagination/src/PaginationPrevTrigger.tsx | 30 +++++++++---------- 6 files changed, 79 insertions(+), 78 deletions(-) diff --git a/packages/components/pagination/src/PaginationContext.tsx b/packages/components/pagination/src/PaginationContext.tsx index c0c660578..a6b7f4093 100644 --- 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 - getLastPageTriggerProps: () => Partial +export interface PaginationContextState { + pagination: pagination.Api & { + getFirstPageTriggerProps: () => ReturnType['getPrevTriggerProps']> & { + 'data-part': string + onClick: () => void + } + getLastPageTriggerProps: () => ReturnType['getNextTriggerProps']> & { + 'data-part': string + onClick: () => void + } } } diff --git a/packages/components/pagination/src/PaginationFirstPageTrigger.tsx b/packages/components/pagination/src/PaginationFirstPageTrigger.tsx index 8d3a2d2fc..95223ae93 100644 --- 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 & { + 'aria-label': string +} export const FirstPageTrigger = forwardRef( ({ 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 & { 'aria-label': string } + + const mergedProps = mergeProps( + apiProps, + localProps as unknown as typeof apiProps + ) as WithAriaLabel const content = children || ( diff --git a/packages/components/pagination/src/PaginationItem.tsx b/packages/components/pagination/src/PaginationItem.tsx index ec9054ce1..081941eaf 100644 --- 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 & { + 'aria-label': string + value: number +} export const Item = forwardRef( ({ children, value, className, href, ...props }, ref) => { diff --git a/packages/components/pagination/src/PaginationLastPageTrigger.tsx b/packages/components/pagination/src/PaginationLastPageTrigger.tsx index 018f945d5..ccfd1cc14 100644 --- 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 & { + 'aria-label': string +} export const LastPageTrigger = forwardRef( ({ 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 & { 'aria-label': string } + + const mergedProps = mergeProps( + apiProps, + localProps as unknown as typeof apiProps + ) as WithAriaLabel const content = children || ( diff --git a/packages/components/pagination/src/PaginationNextTrigger.tsx b/packages/components/pagination/src/PaginationNextTrigger.tsx index df5b4fc8b..ac7eb5af5 100644 --- 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 & { + 'aria-label': string +} export const NextTrigger = forwardRef( ({ 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( className, } - const mergedProps = mergeProps(apiProps, localProps) + // We know 'aria-label' is included in props + type WithAriaLabel = Omit & { 'aria-label': string } + + const mergedProps = mergeProps( + apiProps, + localProps as unknown as typeof apiProps + ) as WithAriaLabel const content = children || ( diff --git a/packages/components/pagination/src/PaginationPrevTrigger.tsx b/packages/components/pagination/src/PaginationPrevTrigger.tsx index 746573945..1b9c0f898 100644 --- 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 & { + 'aria-label': string +} export const PrevTrigger = forwardRef( ({ 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( className, } - const mergedProps = mergeProps(apiProps, localProps) + // We know 'aria-label' is included in props + type WithAriaLabel = Omit & { 'aria-label': string } + + const mergedProps = mergeProps( + apiProps, + localProps as unknown as typeof apiProps + ) as WithAriaLabel const content = children || (