@furystack/shades-common-components 12.5.0 → 12.6.0

package/src/components/data-grid/footer.spec.tsx

@@ -64,9 +64,9 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = footer?.querySelectorAll('select')
+      const rowsPerPageSelect = footer?.querySelector('.pager-section select')
 
-      expect(selects?.length).toBeGreaterThan(0)
+      expect(rowsPerPageSelect).not.toBeNull()
     })
   })
 
@@ -97,7 +97,7 @@ describe('DataGridFooter', () => {
     })
   })
 
-  it('should show page selector when pagination is enabled', async () => {
+  it('should show Pagination component when pagination is enabled', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -112,12 +112,12 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const pager = footer?.querySelector('.pager')
-      expect(pager?.textContent).toContain('Page')
+      const pagination = footer?.querySelector('shade-pagination')
+      expect(pagination).not.toBeNull()
     })
   })
 
-  it('should hide page selector when showing all items (Infinity)', async () => {
+  it('should hide Pagination when showing all items (Infinity)', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 50)
@@ -132,14 +132,12 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const pager = footer?.querySelector('.pager')
-      const sections = Array.from(pager?.querySelectorAll('.pager-section') ?? [])
-      const pageSection = sections.find((s) => s.textContent?.includes('Page'))
-      expect(pageSection).toBeUndefined()
+      const pagination = footer?.querySelector('shade-pagination')
+      expect(pagination).toBeNull()
     })
   })
 
-  it('should render correct number of page options based on data count and items per page', async () => {
+  it('should render page buttons in Pagination based on data count and items per page', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -154,19 +152,17 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      const pageSelect = selects.find((s) => {
-        const parent = s.closest('.pager-section')
-        return parent?.textContent?.includes('Page')
-      })
+      const pagination = footer?.querySelector('shade-pagination')
+      expect(pagination).not.toBeNull()
 
-      expect(pageSelect).toBeDefined()
-      const options = pageSelect?.querySelectorAll('option')
-      expect(options?.length).toBe(4)
+      const pageButtons = Array.from(pagination?.querySelectorAll('.pagination-item') ?? []).filter((btn) =>
+        btn.getAttribute('aria-label')?.startsWith('Go to page'),
+      )
+      expect(pageButtons.length).toBe(4)
     })
   })
 
-  it('should update findOptions when page is changed', async () => {
+  it('should update findOptions when page is changed via Pagination', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -181,21 +177,16 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      const pageSelect = selects.find((s) => {
-        const parent = s.closest('.pager-section')
-        return parent?.textContent?.includes('Page')
-      })
-
-      expect(pageSelect).toBeDefined()
+      const pagination = footer?.querySelector('shade-pagination')
+      const nextButton = pagination?.querySelector('[aria-label="Go to next page"]') as HTMLButtonElement | null
 
-      pageSelect!.value = '2'
-      pageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+      expect(nextButton).not.toBeNull()
+      nextButton!.click()
 
       await flushUpdates()
 
       const updatedOptions = findOptions.getValue()
-      expect(updatedOptions.skip).toBe(20)
+      expect(updatedOptions.skip).toBe(10)
     })
   })
 
@@ -266,7 +257,7 @@ describe('DataGridFooter', () => {
     })
   })
 
-  it('should select the correct current page in the page selector', async () => {
+  it('should highlight the correct current page in Pagination', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -281,14 +272,11 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      const pageSelect = selects.find((s) => {
-        const parent = s.closest('.pager-section')
-        return parent?.textContent?.includes('Page')
-      })
+      const pagination = footer?.querySelector('shade-pagination')
+      const selectedButton = pagination?.querySelector('.pagination-item[data-selected]')
 
-      expect(pageSelect).toBeDefined()
-      expect(pageSelect?.value).toBe('3')
+      expect(selectedButton).not.toBeNull()
+      expect(selectedButton?.textContent?.trim()).toBe('4')
     })
   })
 
@@ -321,7 +309,7 @@ describe('DataGridFooter', () => {
   it('should react to data count changes', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
-      const service = createService([], 50)
+      const service = createService([], 30)
       const findOptions = createFindOptions(10, 0)
 
       initializeShadeRoot({
@@ -333,26 +321,92 @@ describe('DataGridFooter', () => {
       await flushUpdates()
 
       let footer = document.querySelector('shade-data-grid-footer')
-      let selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      let pageSelect = selects.find((s) => s.closest('.pager-section')?.textContent?.includes('Page'))
-      let pageOptions = pageSelect?.querySelectorAll('option')
+      let pagination = footer?.querySelector('shade-pagination')
+      let pageButtons = Array.from(pagination?.querySelectorAll('.pagination-item') ?? []).filter((btn) =>
+        btn.getAttribute('aria-label')?.startsWith('Go to page'),
+      )
+      expect(pageButtons.length).toBe(3)
 
-      expect(pageOptions?.length).toBe(5)
-
-      service.data.setValue({ entries: [], count: 100 })
+      service.data.setValue({ entries: [], count: 50 })
 
       await flushUpdates()
 
       footer = document.querySelector('shade-data-grid-footer')
-      selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      pageSelect = selects.find((s) => s.closest('.pager-section')?.textContent?.includes('Page'))
-      pageOptions = pageSelect?.querySelectorAll('option')
-
-      expect(pageOptions?.length).toBe(10)
+      pagination = footer?.querySelector('shade-pagination')
+      pageButtons = Array.from(pagination?.querySelectorAll('.pagination-item') ?? []).filter((btn) =>
+        btn.getAttribute('aria-label')?.startsWith('Go to page'),
+      )
+      expect(pageButtons.length).toBe(5)
     })
   })
 
   it('should export dataGridItemsPerPage constant', () => {
     expect(dataGridItemsPerPage).toEqual([10, 20, 25, 50, 100, Infinity])
   })
+
+  it('should render custom paginationOptions', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService()
+      const findOptions = createFindOptions()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} paginationOptions={[5, 15, 30]} />,
+      })
+
+      await flushUpdates()
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const itemsPerPageSelect = footer?.querySelector('.pager-section select')
+
+      expect(itemsPerPageSelect).not.toBeNull()
+      const options = itemsPerPageSelect?.querySelectorAll('option')
+      expect(options?.length).toBe(3)
+      expect(options?.[0]?.textContent).toBe('5')
+      expect(options?.[1]?.textContent).toBe('15')
+      expect(options?.[2]?.textContent).toBe('30')
+    })
+  })
+
+  it('should hide the rows-per-page selector when only one paginationOption is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 50)
+      const findOptions = createFindOptions(10, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} paginationOptions={[10]} />,
+      })
+
+      await flushUpdates()
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const pagerSection = footer?.querySelector('.pager-section')
+      expect(pagerSection).toBeNull()
+    })
+  })
+
+  it('should use default dataGridItemsPerPage when paginationOptions is not provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService()
+      const findOptions = createFindOptions()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await flushUpdates()
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const options = footer?.querySelectorAll('.pager-section select option')
+      expect(options?.length).toBe(dataGridItemsPerPage.length)
+    })
+  })
 })

package/src/components/data-grid/footer.tsx

@@ -3,12 +3,14 @@ import { Shade, createComponent } from '@furystack/shades'
 import type { ObservableValue } from '@furystack/utils'
 import type { CollectionService } from '../../services/collection-service.js'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { Pagination } from '../pagination.js'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
 export const DataGridFooter: <T>(props: {
   service: CollectionService<T>
   findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
+  paginationOptions?: number[]
 }) => JSX.Element = Shade({
   shadowDomName: 'shade-data-grid-footer',
   css: {
@@ -41,7 +43,7 @@ export const DataGridFooter: <T>(props: {
     },
   },
   render: ({ props, useObservable }) => {
-    const { service, findOptions } = props
+    const { service, findOptions, paginationOptions = dataGridItemsPerPage } = props
     const [currentData] = useObservable('dataUpdater', service.data)
     const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
       filter: (newValue, oldValue) => {
@@ -54,49 +56,41 @@ export const DataGridFooter: <T>(props: {
     const currentPage = Math.ceil(skip) / (top || 1)
     const currentEntriesPerPage = top
 
-    const pages = new Array(Math.ceil(currentData.count / (currentOptions.top || Infinity)))
-      .fill(0)
-      .map((_, index) => index)
+    const pageCount = Math.ceil(currentData.count / (currentOptions.top || Infinity))
 
     return (
       <div className="pager">
-        {currentEntriesPerPage !== Infinity && (
+        {currentEntriesPerPage !== Infinity && pageCount > 1 && (
+          <Pagination
+            count={pageCount}
+            page={currentPage + 1}
+            size="small"
+            onPageChange={(newPage) => {
+              setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * (newPage - 1) })
+            }}
+          />
+        )}
+        {paginationOptions.length > 1 && (
           <div className="pager-section">
-            <span>Page</span>
+            <span>Rows per page</span>
             <select
               onchange={(ev) => {
-                const value = parseInt((ev.target as HTMLInputElement).value, 10)
-                setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value })
+                const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
+                setCurrentOptions({
+                  ...currentOptions,
+                  top: value,
+                  skip: currentPage * value,
+                })
               }}
             >
-              {pages.map((index) => (
-                <option value={index.toString()} selected={currentPage === index}>
-                  {(index + 1).toString()}
+              {paginationOptions.map((no) => (
+                <option value={no.toString()} selected={no === currentEntriesPerPage}>
+                  {no === Infinity ? 'All' : no.toString()}
                 </option>
               ))}
             </select>
-            <span>of {pages.length}</span>
           </div>
         )}
-        <div className="pager-section">
-          <span>Rows per page</span>
-          <select
-            onchange={(ev) => {
-              const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
-              setCurrentOptions({
-                ...currentOptions,
-                top: value,
-                skip: currentPage * value,
-              })
-            }}
-          >
-            {dataGridItemsPerPage.map((no) => (
-              <option value={no.toString()} selected={no === currentEntriesPerPage}>
-                {no === Infinity ? 'All' : no.toString()}
-              </option>
-            ))}
-          </select>
-        </div>
       </div>
     )
   },

package/src/components/grid.tsx

@@ -23,6 +23,9 @@ export type RowCells<T, Columns extends string> = {
   [TKey in Columns | 'default']?: (element: T, column: Columns) => JSX.Element
 }
 
+/**
+ * @deprecated Use `DataGrid` instead. This component will be removed in a future version.
+ */
 export const Grid: <T, Column extends string>(props: GridProps<T, Column>, children: ChildrenList) => JSX.Element<any> =
   Shade({
     shadowDomName: 'shade-grid',

package/src/components/inputs/autocomplete.tsx

@@ -2,6 +2,9 @@ import { Shade, createComponent } from '@furystack/shades'
 import type { TextInputProps } from './input.js'
 import { Input } from './input.js'
 
+/**
+ * @deprecated Use `Suggest` with the `suggestions` prop instead. This component will be removed in a future version.
+ */
 export const Autocomplete = Shade<{
   inputProps?: TextInputProps
   suggestions: string[]

package/src/components/list/list.spec.tsx

@@ -783,6 +783,179 @@ describe('List', () => {
     })
   })
 
+  describe('pagination', () => {
+    const manyItems: TestItem[] = Array.from({ length: 25 }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` }))
+
+    it('should render only current page items when pagination is provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const service = createTestService()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <List<TestItem>
+              items={manyItems}
+              listService={service}
+              renderItem={(item) => <span>{item.name}</span>}
+              pagination={{ itemsPerPage: 10, page: 1, onPageChange: () => {} }}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const list = document.querySelector('shade-list')
+        const listItems = list?.querySelectorAll('shade-list-item')
+        expect(listItems?.length).toBe(10)
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should render the Pagination component', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const service = createTestService()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <List<TestItem>
+              items={manyItems}
+              listService={service}
+              renderItem={(item) => <span>{item.name}</span>}
+              pagination={{ itemsPerPage: 10, page: 1, onPageChange: () => {} }}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const pagination = document.querySelector('shade-list shade-pagination')
+        expect(pagination).not.toBeNull()
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should show last page items correctly', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const service = createTestService()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <List<TestItem>
+              items={manyItems}
+              listService={service}
+              renderItem={(item) => <span>{item.name}</span>}
+              pagination={{ itemsPerPage: 10, page: 3, onPageChange: () => {} }}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const list = document.querySelector('shade-list')
+        const listItems = list?.querySelectorAll('shade-list-item')
+        expect(listItems?.length).toBe(5)
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should not render Pagination when all items fit on one page', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const service = createTestService()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <List<TestItem>
+              items={testItems}
+              listService={service}
+              renderItem={(item) => <span>{item.name}</span>}
+              pagination={{ itemsPerPage: 10, page: 1, onPageChange: () => {} }}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const pagination = document.querySelector('shade-list shade-pagination')
+        expect(pagination).toBeNull()
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should call onPageChange when a pagination button is clicked', async () => {
+      const onPageChange = vi.fn()
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const service = createTestService()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <List<TestItem>
+              items={manyItems}
+              listService={service}
+              renderItem={(item) => <span>{item.name}</span>}
+              pagination={{ itemsPerPage: 10, page: 1, onPageChange }}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const nextButton = document.querySelector(
+          'shade-list shade-pagination [aria-label="Go to next page"]',
+        ) as HTMLButtonElement
+        expect(nextButton).not.toBeNull()
+        nextButton.click()
+
+        expect(onPageChange).toHaveBeenCalledWith(2)
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should render all items when pagination is not provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const service = createTestService()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <List<TestItem> items={manyItems} listService={service} renderItem={(item) => <span>{item.name}</span>} />
+          ),
+        })
+
+        await flushUpdates()
+
+        const list = document.querySelector('shade-list')
+        const listItems = list?.querySelectorAll('shade-list-item')
+        expect(listItems?.length).toBe(25)
+
+        const pagination = document.querySelector('shade-list shade-pagination')
+        expect(pagination).toBeNull()
+
+        service[Symbol.dispose]()
+      })
+    })
+  })
+
   describe('keyboard listener cleanup', () => {
     it('should remove keyboard listener when component is disconnected', async () => {
       await usingAsync(new Injector(), async (injector) => {

package/src/components/list/list.tsx

@@ -2,6 +2,7 @@ import type { ChildrenList, PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
 import { ClickAwayService } from '../../services/click-away-service.js'
 import type { ListService } from '../../services/list-service.js'
+import { Pagination } from '../pagination.js'
 import { ListItem } from './list-item.js'
 
 export type ListItemState = {
@@ -9,6 +10,15 @@ export type ListItemState = {
   isSelected: boolean
 }
 
+export type ListPaginationProps = {
+  /** Number of items to display per page */
+  itemsPerPage: number
+  /** Current page (1-indexed) */
+  page: number
+  /** Callback fired when the page changes */
+  onPageChange: (page: number) => void
+}
+
 export type ListProps<T> = {
   items: T[]
   listService: ListService<T>
@@ -18,6 +28,8 @@ export type ListProps<T> = {
   variant?: 'contained' | 'outlined'
   onItemActivate?: (item: T) => void
   onSelectionChange?: (selected: T[]) => void
+  /** Optional pagination configuration. When provided, items are sliced and a Pagination control is rendered. */
+  pagination?: ListPaginationProps
 } & PartialElement<HTMLDivElement>
 
 export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
@@ -26,6 +38,11 @@ export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Eleme
     display: 'block',
     width: '100%',
     overflow: 'auto',
+    '& .shade-list-pagination': {
+      display: 'flex',
+      justifyContent: 'center',
+      padding: '8px 0',
+    },
   },
   render: ({ props, useDisposable, useHostProps, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('listWrapper')
@@ -45,7 +62,20 @@ export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Eleme
       return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
     })
 
-    props.listService.items.setValue(props.items)
+    const { pagination } = props
+    let visibleItems: typeof props.items
+    let pageCount = 1
+
+    if (pagination) {
+      const { itemsPerPage, page } = pagination
+      pageCount = Math.ceil(props.items.length / itemsPerPage)
+      const startIndex = (page - 1) * itemsPerPage
+      visibleItems = props.items.slice(startIndex, startIndex + itemsPerPage)
+    } else {
+      visibleItems = props.items
+    }
+
+    props.listService.items.setValue(visibleItems)
 
     useDisposable(
       'clickAway',
@@ -69,24 +99,31 @@ export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Eleme
     })
 
     return (
-      <div
-        ref={wrapperRef}
-        role="listbox"
-        ariaMultiSelectable="true"
-        className="shade-list-wrapper"
-        onclick={() => props.listService.hasFocus.setValue(true)}
-      >
-        {props.items.map((item) => (
-          <ListItem
-            item={item}
-            listService={props.listService}
-            renderItem={props.renderItem}
-            renderIcon={props.renderIcon}
-            renderSecondaryActions={props.renderSecondaryActions}
-            onActivate={props.onItemActivate}
-          />
-        ))}
-      </div>
+      <>
+        <div
+          ref={wrapperRef}
+          role="listbox"
+          ariaMultiSelectable="true"
+          className="shade-list-wrapper"
+          onclick={() => props.listService.hasFocus.setValue(true)}
+        >
+          {visibleItems.map((item) => (
+            <ListItem
+              item={item}
+              listService={props.listService}
+              renderItem={props.renderItem}
+              renderIcon={props.renderIcon}
+              renderSecondaryActions={props.renderSecondaryActions}
+              onActivate={props.onItemActivate}
+            />
+          ))}
+        </div>
+        {pagination && pageCount > 1 && (
+          <div className="shade-list-pagination">
+            <Pagination count={pageCount} page={pagination.page} onPageChange={pagination.onPageChange} size="small" />
+          </div>
+        )}
+      </>
     )
   },
 })