@furystack/shades-common-components 11.0.0 → 12.0.0

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

@@ -1,6 +1,6 @@
 import type { FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
-import { attachStyles, createComponent, Shade } from '@furystack/shades'
+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'
@@ -94,45 +94,49 @@ export const DataGrid: <T, Column extends string>(
     },
     '& th': {
       backdropFilter: 'blur(12px) saturate(180%)',
-      background: 'rgba(128,128,128,0.3)',
+      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)',
+      boxShadow: cssVariableTheme.shadows.sm,
+      borderBottom: `2px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
     },
   },
-  constructed: ({ props }) => {
-    const listener = (ev: KeyboardEvent) => props.collectionService.handleKeyDown(ev)
-    window.addEventListener('keydown', listener)
-    return () => window.removeEventListener('keydown', listener)
-  },
-  render: ({ props, useDisposable, element }) => {
+  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(element, () => {
+        new ClickAwayService(wrapperRef, () => {
           props.collectionService.hasFocus.setValue(false)
         }),
     )
 
     if (props.styles?.wrapper) {
-      attachStyles(element, { style: props.styles.wrapper })
+      useHostProps({ style: props.styles.wrapper as Record<string, string> })
     }
 
     return (
       <div
+        ref={wrapperRef}
         className="shade-grid-wrapper"
         onclick={() => {
           props.collectionService.hasFocus.setValue(true)

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

@@ -1,7 +1,7 @@
 import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, sleepAsync } from '@furystack/utils'
+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'
@@ -31,311 +31,323 @@ describe('DataGridFooter', () => {
   }
 
   it('should render with custom element', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const service = createService()
-    const findOptions = createFindOptions()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
-    })
+    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)
+      await sleepAsync(50)
 
-    const footer = document.querySelector('shade-data-grid-footer')
-    expect(footer).not.toBeNull()
+      const footer = document.querySelector('shade-data-grid-footer')
+      expect(footer).not.toBeNull()
+    })
   })
 
   it('should render items per page select', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const service = createService()
-    const findOptions = createFindOptions()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService()
+      const findOptions = createFindOptions()
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
 
-    const footer = document.querySelector('shade-data-grid-footer')
-    const selects = footer?.querySelectorAll('select')
+      await sleepAsync(50)
 
-    expect(selects?.length).toBeGreaterThan(0)
-  })
+      const footer = document.querySelector('shade-data-grid-footer')
+      const selects = footer?.querySelectorAll('select')
 
-  it('should render all items per page options', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const service = createService()
-    const findOptions = createFindOptions()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      expect(selects?.length).toBeGreaterThan(0)
     })
+  })
 
-    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')
+  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)
     })
-
-    expect(itemsPerPageSelect).toBeDefined()
-    const options = itemsPerPageSelect?.querySelectorAll('option')
-    expect(options?.length).toBe(dataGridItemsPerPage.length)
   })
 
   it('should show page selector when pagination is enabled', async () => {
-    const injector = new 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 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')
     })
-
-    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 () => {
-    const injector = new 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 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')
     })
-
-    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 () => {
-    const injector = new 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')
+    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)
     })
-
-    expect(pageSelect).toBeDefined()
-    const options = pageSelect?.querySelectorAll('option')
-    expect(options?.length).toBe(4)
   })
 
   it('should update findOptions when page is changed', async () => {
-    const injector = new 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 usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 0)
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
 
-    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')
-    })
+      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).toBeDefined()
 
-    pageSelect!.value = '2'
-    pageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+      pageSelect!.value = '2'
+      pageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const updatedOptions = findOptions.getValue()
-    expect(updatedOptions.skip).toBe(20)
+      const updatedOptions = findOptions.getValue()
+      expect(updatedOptions.skip).toBe(20)
+    })
   })
 
   it('should update findOptions when items per page is changed', async () => {
-    const injector = new 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 usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 0)
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
 
-    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')
-    })
+      await sleepAsync(50)
 
-    expect(itemsPerPageSelect).toBeDefined()
+      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')
+      })
 
-    itemsPerPageSelect!.value = '25'
-    itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+      expect(itemsPerPageSelect).toBeDefined()
 
-    await sleepAsync(50)
+      itemsPerPageSelect!.value = '25'
+      itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
 
-    const updatedOptions = findOptions.getValue()
-    expect(updatedOptions.top).toBe(25)
+      await sleepAsync(50)
+
+      const updatedOptions = findOptions.getValue()
+      expect(updatedOptions.top).toBe(25)
+    })
   })
 
   it('should preserve current page position when changing items per page', async () => {
-    const injector = new 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 usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 100)
+      const findOptions = createFindOptions(10, 20)
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
 
-    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')
-    })
+      await sleepAsync(50)
 
-    expect(itemsPerPageSelect).toBeDefined()
+      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')
+      })
 
-    itemsPerPageSelect!.value = '25'
-    itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
+      expect(itemsPerPageSelect).toBeDefined()
 
-    await sleepAsync(50)
+      itemsPerPageSelect!.value = '25'
+      itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
 
-    const updatedOptions = findOptions.getValue()
-    expect(updatedOptions.top).toBe(25)
-    expect(updatedOptions.skip).toBe(50)
-  })
+      await sleepAsync(50)
 
-  it('should select the correct current page in the page selector', async () => {
-    const injector = new 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} />,
+      const updatedOptions = findOptions.getValue()
+      expect(updatedOptions.top).toBe(25)
+      expect(updatedOptions.skip).toBe(50)
     })
+  })
 
-    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')
+  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')
     })
-
-    expect(pageSelect).toBeDefined()
-    expect(pageSelect?.value).toBe('3')
   })
 
   it('should select the correct items per page option', async () => {
-    const injector = new 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')
+    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')
     })
-
-    expect(itemsPerPageSelect).toBeDefined()
-    expect(itemsPerPageSelect?.value).toBe('25')
   })
 
   it('should react to data count changes', async () => {
-    const injector = new 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 usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 50)
+      const findOptions = createFindOptions(10, 0)
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
 
-    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')
+      await sleepAsync(50)
 
-    expect(pageOptions?.length).toBe(5)
+      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')
 
-    service.data.setValue({ entries: [], count: 100 })
+      expect(pageOptions?.length).toBe(5)
 
-    await sleepAsync(50)
+      service.data.setValue({ entries: [], count: 100 })
 
-    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')
+      await sleepAsync(50)
 
-    expect(pageOptions?.length).toBe(10)
+      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', () => {