feat(pagination): fix pagination select

vtex · Nov 24, 2023 · 5985424 · 5985424
1 parent a3dc543
commit 5985424
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/packages/components/src/pagination/pagination-select.tsx b/packages/components/src/pagination/pagination-select.tsx
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
 import { Action } from '../action'
@@ -23,8 +23,6 @@ export const PaginationSelect = forwardRef<
   } = props
 
   if (loading) {
-    console.log({ loading })
-
     return (
       <div data-sl-pagination-select data-loading={loading}>
         <Skeleton />
@@ -48,7 +46,7 @@ export const PaginationSelect = forwardRef<
           </Select>
           <Bleed>
             <SelectPopover data-sl-pagination-select-popover>
-              {children}
+              {options.map((option) => children(option))}
             </SelectPopover>
           </Bleed>
         </SelectProvider>
@@ -57,10 +55,11 @@ export const PaginationSelect = forwardRef<
   )
 })
 
-export interface PaginationSelectProps extends ComponentPropsWithoutRef<'div'> {
+export interface PaginationSelectProps {
   onValueChange?: (value: number) => void
   value: number
   options: number[]
+  children: (option: number) => ReactNode
   loading?: boolean
   label: ReactNode
   disabled?: boolean

diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx
@@ -8,7 +8,6 @@ import './pagination.css'
 import { SelectOption } from '../select'
 import { Skeleton } from '../skeleton'
 import { PaginationSelect } from './pagination-select'
-
 /**
  * Pagination triggers allow merchants to view the size of a list and navigate between pages.
  *
@@ -58,11 +57,11 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
               label={`Show ${size}`}
               disabled={loading}
             >
-              {sizeOptions.map((option) => (
+              {(option) => (
                 <SelectOption value={String(option)}>
                   Show {option}
                 </SelectOption>
-              ))}
+              )}
             </PaginationSelect>
           )}
 
@@ -91,9 +90,9 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
               loading={loading}
               label={`${page} of ${pageOptions.length}`}
             >
-              {pageOptions.map((option) => (
+              {(option) => (
                 <SelectOption value={String(option)}>{option}</SelectOption>
-              ))}
+              )}
             </PaginationSelect>
 
             <Action

diff --git a/packages/components/src/pagination/tests/pagination.vitest.test.tsx b/packages/components/src/pagination/tests/pagination.vitest.test.tsx
@@ -17,6 +17,9 @@ describe('pagination', () => {
     expect(
       container.querySelector('[data-sl-pagination-actions]')
     ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-sl-pagination-page-select]')
+    ).toBeInTheDocument()
     expect(
       container.querySelector('[data-sl-pagination-total-label]')
     ).toBeInTheDocument()