@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -4,7 +4,7 @@ import { createComponent, Shade } from '@furystack/shades'
 import type { ObservableValue } from '@furystack/utils'
 import { ClickAwayService } from '../../services/click-away-service.js'
 import type { CollectionService } from '../../services/collection-service.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { GridProps } from '../grid.js'
 import { DataGridBody } from './body.js'
 import { DataGridFooter } from './footer.js'
@@ -80,68 +80,75 @@ export const DataGrid: <T, Column extends string>(
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'shade-data-grid',
-  constructed: ({ props }) => {
-    const listener = (ev: KeyboardEvent) => props.collectionService.handleKeyDown(ev)
-    window.addEventListener('keydown', listener)
-    return () => window.removeEventListener('keydown', listener)
-  },
-  render: ({ props, injector, useDisposable, element }) => {
-    const tp = injector.getInstance(ThemeProviderService)
-    const { theme } = tp
-
-    useDisposable(
-      'clickAway',
-      () =>
-        new ClickAwayService(element, () => {
-          props.collectionService.hasFocus.setValue(false)
-        }),
-    )
-
-    const headerStyle: Partial<CSSStyleDeclaration> = {
+  css: {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    overflow: 'auto',
+    zIndex: '1',
+    '& table': {
+      width: '100%',
+      maxHeight: 'calc(100% - 4em)',
+      position: 'relative',
+      borderCollapse: 'collapse',
+    },
+    '& th': {
       backdropFilter: 'blur(12px) saturate(180%)',
-      background: 'rgba(128,128,128,0.3)',
-      color: theme.text.secondary,
+      background: cssVariableTheme.action.activeBackground,
+      color: cssVariableTheme.text.secondary,
       height: '48px',
       padding: '0 1.2em',
       alignItems: 'center',
-      borderRadius: '2px',
+      borderRadius: cssVariableTheme.shape.borderRadius.xs,
       top: '2px',
       position: 'sticky',
       fontVariant: 'all-petite-caps',
       fontSize: '0.875rem',
-      fontWeight: '600',
+      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
       letterSpacing: '0.05em',
       textAlign: 'left',
       zIndex: '1',
-      boxShadow: 'rgba(0, 0, 0, 0.2) 1px 1px 1px 2px',
-      borderBottom: `2px solid rgba(128, 128, 128, 0.2)`,
-      borderRight: `1px solid rgba(128, 128, 128, 0.2)`,
-      ...props.styles?.header,
+      boxShadow: cssVariableTheme.shadows.sm,
+      borderBottom: `2px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    },
+  },
+  render: ({ props, useDisposable, useRef, useHostProps }) => {
+    const wrapperRef = useRef<HTMLDivElement>('gridWrapper')
+
+    useDisposable('keydown-handler', () => {
+      const listener = (ev: KeyboardEvent) => props.collectionService.handleKeyDown(ev)
+      window.addEventListener('keydown', listener)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
+    })
+
+    useDisposable(
+      'clickAway',
+      () =>
+        new ClickAwayService(wrapperRef, () => {
+          props.collectionService.hasFocus.setValue(false)
+        }),
+    )
+
+    if (props.styles?.wrapper) {
+      useHostProps({ style: props.styles.wrapper as Record<string, string> })
     }
 
     return (
       <div
+        ref={wrapperRef}
         className="shade-grid-wrapper"
-        style={{
-          ...props.styles?.wrapper,
-          width: '100%',
-          height: '100%',
-          overflow: 'auto',
-          zIndex: '1',
-        }}
         onclick={() => {
           props.collectionService.hasFocus.setValue(true)
         }}
         ariaMultiSelectable="true"
       >
-        <table
-          style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative', borderCollapse: 'collapse' }}
-        >
+        <table>
           <thead>
             <tr>
               {props.columns.map((column) => {
                 return (
-                  <th style={headerStyle}>
+                  <th style={props.styles?.header}>
                     {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
                       <DataGridHeader<
                         ReturnType<typeof props.collectionService.data.getValue>['entries'][number],

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

@@ -0,0 +1,356 @@
+import type { FindOptions } from '@furystack/core'
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { CollectionService } from '../../services/collection-service.js'
+import { DataGridFooter, dataGridItemsPerPage } from './footer.js'
+
+type TestItem = { id: number; name: string }
+
+describe('DataGridFooter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createService = (entries: TestItem[] = [], count?: number) => {
+    const service = new CollectionService<TestItem>()
+    service.data.setValue({ entries, count: count ?? entries.length })
+    return service
+  }
+
+  const createFindOptions = (
+    top: number = 10,
+    skip: number = 0,
+  ): ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>> => {
+    return new ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>>({ top, skip })
+  }
+
+  it('should render with custom element', 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 sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      expect(footer).not.toBeNull()
+    })
+  })
+
+  it('should render items per page select', 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 sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = footer?.querySelectorAll('select')
+
+      expect(selects?.length).toBeGreaterThan(0)
+    })
+  })
+
+  it('should render all items per page options', 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 sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const itemsPerPageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('items per page')
+      })
+
+      expect(itemsPerPageSelect).toBeDefined()
+      const options = itemsPerPageSelect?.querySelectorAll('option')
+      expect(options?.length).toBe(dataGridItemsPerPage.length)
+    })
+  })
+
+  it('should show page selector when pagination is enabled', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const pager = footer?.querySelector('.pager')
+      expect(pager?.textContent).toContain('Goto page')
+    })
+  })
+
+  it('should hide page selector when showing all items (Infinity)', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 50)
+      const findOptions = createFindOptions(Infinity, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const pager = footer?.querySelector('.pager')
+      expect(pager?.textContent).not.toContain('Goto page')
+    })
+  })
+
+  it('should render correct number of page options 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)
+      const findOptions = createFindOptions(25, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const pageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('Goto page')
+      })
+
+      expect(pageSelect).toBeDefined()
+      const options = pageSelect?.querySelectorAll('option')
+      expect(options?.length).toBe(4)
+    })
+  })
+
+  it('should update findOptions when page is changed', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const pageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('Goto page')
+      })
+
+      expect(pageSelect).toBeDefined()
+
+      pageSelect!.value = '2'
+      pageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+
+      await sleepAsync(50)
+
+      const updatedOptions = findOptions.getValue()
+      expect(updatedOptions.skip).toBe(20)
+    })
+  })
+
+  it('should update findOptions when items per page is changed', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const itemsPerPageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('items per page')
+      })
+
+      expect(itemsPerPageSelect).toBeDefined()
+
+      itemsPerPageSelect!.value = '25'
+      itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+
+      await sleepAsync(50)
+
+      const updatedOptions = findOptions.getValue()
+      expect(updatedOptions.top).toBe(25)
+    })
+  })
+
+  it('should preserve current page position when changing items per page', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 20)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const itemsPerPageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('items per page')
+      })
+
+      expect(itemsPerPageSelect).toBeDefined()
+
+      itemsPerPageSelect!.value = '25'
+      itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+
+      await sleepAsync(50)
+
+      const updatedOptions = findOptions.getValue()
+      expect(updatedOptions.top).toBe(25)
+      expect(updatedOptions.skip).toBe(50)
+    })
+  })
+
+  it('should select the correct current page in the page selector', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 30)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const pageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('Goto page')
+      })
+
+      expect(pageSelect).toBeDefined()
+      expect(pageSelect?.value).toBe('3')
+    })
+  })
+
+  it('should select the correct items per page option', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(25, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      const itemsPerPageSelect = selects.find((s) => {
+        const parent = s.parentElement
+        return parent?.textContent?.includes('items per page')
+      })
+
+      expect(itemsPerPageSelect).toBeDefined()
+      expect(itemsPerPageSelect?.value).toBe('25')
+    })
+  })
+
+  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 findOptions = createFindOptions(10, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await sleepAsync(50)
+
+      let footer = document.querySelector('shade-data-grid-footer')
+      let selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      let pageSelect = selects.find((s) => s.parentElement?.textContent?.includes('Goto page'))
+      let pageOptions = pageSelect?.querySelectorAll('option')
+
+      expect(pageOptions?.length).toBe(5)
+
+      service.data.setValue({ entries: [], count: 100 })
+
+      await sleepAsync(50)
+
+      footer = document.querySelector('shade-data-grid-footer')
+      selects = Array.from(footer?.querySelectorAll('select') ?? [])
+      pageSelect = selects.find((s) => s.parentElement?.textContent?.includes('Goto page'))
+      pageOptions = pageSelect?.querySelectorAll('option')
+
+      expect(pageOptions?.length).toBe(10)
+    })
+  })
+
+  it('should export dataGridItemsPerPage constant', () => {
+    expect(dataGridItemsPerPage).toEqual([10, 20, 25, 50, 100, Infinity])
+  })
+})

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

@@ -2,7 +2,7 @@ import type { FindOptions } from '@furystack/core'
 import { Shade, createComponent } from '@furystack/shades'
 import type { ObservableValue } from '@furystack/utils'
 import type { CollectionService } from '../../services/collection-service.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
@@ -11,9 +11,23 @@ export const DataGridFooter: <T>(props: {
   findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
 }) => JSX.Element = Shade({
   shadowDomName: 'shade-data-grid-footer',
-  render: ({ props, injector, useObservable }) => {
-    const { theme } = injector.getInstance(ThemeProviderService)
-
+  css: {
+    display: 'block',
+    '& .pager': {
+      backdropFilter: 'blur(10px)',
+      color: cssVariableTheme.text.secondary,
+      position: 'sticky',
+      bottom: '0',
+      display: 'flex',
+      justifyContent: 'flex-end',
+      padding: '1em',
+      alignItems: 'center',
+    },
+    '& select': {
+      margin: '0 1em',
+    },
+  },
+  render: ({ props, useObservable }) => {
     const { service, findOptions } = props
     const [currentData] = useObservable('dataUpdater', service.data)
     const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
@@ -32,24 +46,11 @@ export const DataGridFooter: <T>(props: {
       .map((_, index) => index)
 
     return (
-      <div
-        className="pager"
-        style={{
-          backdropFilter: 'blur(10px)',
-          color: theme.text.secondary,
-          position: 'sticky',
-          bottom: '0',
-          display: 'flex',
-          justifyContent: 'flex-end',
-          padding: '1em',
-          alignItems: 'center',
-        }}
-      >
+      <div className="pager">
         {currentEntriesPerPage !== Infinity && (
           <div>
             Goto page
             <select
-              style={{ margin: '0 1em' }}
               onchange={(ev) => {
                 const value = parseInt((ev.target as HTMLInputElement).value, 10)
                 setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value })
@@ -66,7 +67,6 @@ export const DataGridFooter: <T>(props: {
         <div>
           Show
           <select
-            style={{ margin: '0 1em' }}
             onchange={(ev) => {
               const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
               setCurrentOptions({