@furystack/shades-common-components 12.4.0 → 12.6.0

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

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ListService } from '../../services/list-service.js'
 import { List } from './list.js'
@@ -40,7 +40,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         expect(list).not.toBeNull()
@@ -62,7 +62,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const items = list?.querySelectorAll('shade-list-item')
@@ -85,7 +85,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listbox = list?.querySelector('[role="listbox"]')
@@ -109,7 +109,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const options = list?.querySelectorAll('[role="option"]')
@@ -137,7 +137,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const icons = list?.querySelectorAll('[data-testid="icon"]')
@@ -165,7 +165,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const actions = list?.querySelectorAll('[data-testid="action"]')
@@ -193,7 +193,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list') as HTMLElement
         expect(list?.getAttribute('data-variant')).toBe('contained')
@@ -215,7 +215,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(service.items.getValue()).toEqual(testItems)
 
@@ -240,7 +240,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const wrapper = list?.querySelector('.shade-list-wrapper') as HTMLElement
@@ -268,7 +268,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const wrapper = list?.querySelector('.shade-list-wrapper') as HTMLElement
@@ -298,7 +298,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -323,10 +323,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.focusedItem.setValue(testItems[1])
-        await sleepAsync(10)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -352,10 +352,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.selection.setValue([testItems[0], testItems[2]])
-        await sleepAsync(10)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -380,10 +380,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.selection.setValue([testItems[0]])
-        await sleepAsync(10)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -413,10 +413,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.selection.setValue([testItems[0]])
-        await sleepAsync(10)
+        await flushUpdates()
 
         expect(onSelectionChange).toHaveBeenCalledWith([testItems[0]])
 
@@ -442,7 +442,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
 
@@ -468,7 +468,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
 
@@ -494,7 +494,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
 
@@ -520,7 +520,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
 
@@ -546,7 +546,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
         expect(service.selection.getValue()).toContain(testItems[0])
@@ -573,7 +573,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: '+', bubbles: true }))
 
@@ -599,7 +599,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: '-', bubbles: true }))
 
@@ -625,7 +625,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: '*', bubbles: true }))
 
@@ -655,7 +655,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
 
@@ -681,7 +681,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
 
@@ -707,7 +707,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
 
@@ -741,7 +741,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
 
@@ -770,7 +770,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -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) => {
@@ -800,12 +973,12 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list') as HTMLElement
         list.remove()
 
-        await sleepAsync(10)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         expect(service.focusedItem.getValue()).toEqual(testItems[0])

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>
+        )}
+      </>
     )
   },
 })

package/src/components/markdown/markdown-display.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { MarkdownDisplay } from './markdown-display.js'
 
@@ -24,7 +24,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="Hello" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const el = document.querySelector('shade-markdown-display')
       expect(el).not.toBeNull()
@@ -41,7 +41,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="# Hello World" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const typography = document.querySelector('shade-markdown-display shade-typography')
       expect(typography).not.toBeNull()
@@ -60,7 +60,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="Just a paragraph." />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const typography = document.querySelector('shade-markdown-display shade-typography[data-variant="body1"]')
       expect(typography).not.toBeNull()
@@ -78,7 +78,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content={'```js\nconsole.log("hi")\n```'} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const codeBlock = document.querySelector('shade-markdown-display .md-code-block')
       expect(codeBlock).not.toBeNull()
@@ -96,7 +96,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content={'- Item A\n- Item B'} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const list = document.querySelector('shade-markdown-display ul')
       expect(list).not.toBeNull()
@@ -115,7 +115,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="- [ ] Task" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const checkbox = document.querySelector('shade-markdown-display shade-checkbox')
       expect(checkbox).not.toBeNull()
@@ -134,7 +134,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="- [ ] Task" readOnly={false} onChange={onChange} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const checkbox = document.querySelector('shade-markdown-display shade-checkbox')
       expect(checkbox).not.toBeNull()
@@ -144,7 +144,7 @@ describe('MarkdownDisplay', () => {
       expect(input).not.toBeNull()
       input.click()
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(onChange).toHaveBeenCalledOnce()
       expect(onChange).toHaveBeenCalledWith('- [x] Task')
@@ -161,7 +161,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="> Quote text" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const bq = document.querySelector('shade-markdown-display .md-blockquote')
       expect(bq).not.toBeNull()
@@ -179,7 +179,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="---" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const hr = document.querySelector('shade-markdown-display .md-hr')
       expect(hr).not.toBeNull()
@@ -196,7 +196,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="[Click here](https://example.com)" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const link = document.querySelector('shade-markdown-display .md-link') as HTMLAnchorElement
       expect(link).not.toBeNull()
@@ -215,7 +215,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="![alt text](image.png)" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const img = document.querySelector('shade-markdown-display .md-image') as HTMLImageElement
       expect(img).not.toBeNull()
@@ -233,7 +233,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const root = document.querySelector('shade-markdown-display .md-root')
       expect(root).not.toBeNull()