@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/form.tsx

@@ -1,6 +1,6 @@
 import { Injectable } from '@furystack/inject'
 import type { ChildrenList, PartialElement } from '@furystack/shades'
-import { Shade, attachProps, createComponent } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
 import { ObservableValue } from '@furystack/utils'
 import type { InputValidationResult } from './inputs/input.js'
 
@@ -50,12 +50,17 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
   shadowDomName: 'shade-form',
   elementBase: HTMLFormElement,
   elementBaseName: 'form',
-  render: ({ props, children, useDisposable, element, injector }) => {
-    const formInjector = useDisposable('formInjector', () => injector.createChild({ owner: element }))
-    element.injector = formInjector
+  render: ({ props, children, useDisposable, injector, useHostProps }) => {
+    const formInjector = useDisposable('formInjector', () => injector.createChild())
     const formService = new FormService()
     formInjector.setExplicitInstance(formService)
 
+    // Propagate the scoped injector on the host element so child Shade components
+    // can discover it via getInjectorFromParent(). This works because useHostProps
+    // assigns object values as properties on the host element, which sets the
+    // `injector` setter defined on the Shade base class.
+    useHostProps({ injector: formInjector })
+
     const changeHandler = (ev: Event, shouldSubmit?: boolean) => {
       formService.inputs.forEach((i) => {
         const e = document.createEvent('FocusEvent')
@@ -82,9 +87,7 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
       }
     }
 
-    attachProps(element, {
-      injector: formInjector,
-      ...props,
+    useHostProps({
       oninvalid: (ev: Event) => {
         changeHandler(ev)
       },

package/src/components/grid.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { Grid, type GridProps, type HeaderCells, type RowCells } from './grid.js'
 
@@ -30,57 +30,78 @@ describe('Grid', () => {
       injector,
       grid,
       table: grid?.querySelector('table') as HTMLTableElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
   describe('rendering', () => {
     it('should render a grid element as custom element', async () => {
-      const { grid } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-      })
-      expect(grid).toBeTruthy()
-      expect(grid.tagName.toLowerCase()).toBe('shade-grid')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          expect(grid).toBeTruthy()
+          expect(grid.tagName.toLowerCase()).toBe('shade-grid')
+        },
+      )
     })
 
     it('should render a table inside the grid element', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-      })
-      expect(table).toBeTruthy()
-      expect(table.tagName.toLowerCase()).toBe('table')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          expect(table).toBeTruthy()
+          expect(table.tagName.toLowerCase()).toBe('table')
+        },
+      )
     })
 
     it('should render thead and tbody', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-      })
-      expect(table.querySelector('thead')).toBeTruthy()
-      expect(table.querySelector('tbody')).toBeTruthy()
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          expect(table.querySelector('thead')).toBeTruthy()
+          expect(table.querySelector('tbody')).toBeTruthy()
+        },
+      )
     })
   })
 
   describe('columns', () => {
     it('should render column headers', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name', 'value'],
-        entries: [],
-      })
-      const headers = table.querySelectorAll('th')
-      expect(headers.length).toBe(3)
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers.length).toBe(3)
+        },
+      )
     })
 
     it('should render column names as header text by default', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name', 'value'],
-        entries: [],
-      })
-      const headers = table.querySelectorAll('th')
-      expect(headers[0].textContent).toBe('id')
-      expect(headers[1].textContent).toBe('name')
-      expect(headers[2].textContent).toBe('value')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toBe('id')
+          expect(headers[1].textContent).toBe('name')
+          expect(headers[2].textContent).toBe('value')
+        },
+      )
     })
 
     it('should use custom header components when provided', async () => {
@@ -88,29 +109,37 @@ describe('Grid', () => {
         id: (name) => <span>ID Header: {name}</span>,
         name: (name) => <span>Name Header: {name}</span>,
       }
-      const { table } = await renderGrid({
-        columns: ['id', 'name', 'value'],
-        entries: [],
-        headerComponents,
-      })
-      const headers = table.querySelectorAll('th')
-      expect(headers[0].textContent).toContain('ID Header: id')
-      expect(headers[1].textContent).toContain('Name Header: name')
-      expect(headers[2].textContent).toBe('value')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+          headerComponents,
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toContain('ID Header: id')
+          expect(headers[1].textContent).toContain('Name Header: name')
+          expect(headers[2].textContent).toBe('value')
+        },
+      )
     })
 
     it('should use default header component for unspecified columns', async () => {
       const headerComponents: HeaderCells<TestColumns> = {
         default: (name) => <strong>{name.toUpperCase()}</strong>,
       }
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-        headerComponents,
-      })
-      const headers = table.querySelectorAll('th')
-      expect(headers[0].textContent).toBe('ID')
-      expect(headers[1].textContent).toBe('NAME')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+          headerComponents,
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toBe('ID')
+          expect(headers[1].textContent).toBe('NAME')
+        },
+      )
     })
 
     it('should prefer specific header component over default', async () => {
@@ -118,14 +147,18 @@ describe('Grid', () => {
         id: () => <span>Custom ID</span>,
         default: (name) => <span>Default: {name}</span>,
       }
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-        headerComponents,
-      })
-      const headers = table.querySelectorAll('th')
-      expect(headers[0].textContent).toBe('Custom ID')
-      expect(headers[1].textContent).toBe('Default: name')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+          headerComponents,
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toBe('Custom ID')
+          expect(headers[1].textContent).toBe('Default: name')
+        },
+      )
     })
   })
 
@@ -137,28 +170,36 @@ describe('Grid', () => {
     ]
 
     it('should render rows for each entry', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: testEntries,
-        rowComponents: {
-          default: (entry, column) => <span>{String(entry[column])}</span>,
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+        }),
+        async ({ table }) => {
+          const rows = table.querySelectorAll('tbody tr')
+          expect(rows.length).toBe(3)
         },
-      })
-      const rows = table.querySelectorAll('tbody tr')
-      expect(rows.length).toBe(3)
+      )
     })
 
     it('should render cells for each column in each row', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name', 'value'],
-        entries: testEntries,
-        rowComponents: {
-          default: (entry, column) => <span>{String(entry[column])}</span>,
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+        }),
+        async ({ table }) => {
+          const firstRow = table.querySelector('tbody tr')!
+          const cells = firstRow.querySelectorAll('td')
+          expect(cells.length).toBe(3)
         },
-      })
-      const firstRow = table.querySelector('tbody tr')!
-      const cells = firstRow.querySelectorAll('td')
-      expect(cells.length).toBe(3)
+      )
     })
 
     it('should use custom row components when provided', async () => {
@@ -166,29 +207,37 @@ describe('Grid', () => {
         id: (entry) => <span>ID: {entry.id}</span>,
         name: (entry) => <strong>{entry.name}</strong>,
       }
-      const { table } = await renderGrid({
-        columns: ['id', 'name', 'value'],
-        entries: [testEntries[0]],
-        rowComponents,
-      })
-      const cells = table.querySelectorAll('tbody td')
-      expect(cells[0].textContent).toBe('ID: 1')
-      expect(cells[1].textContent).toBe('Item 1')
-      expect(cells[2].textContent).toBe('')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [testEntries[0]],
+          rowComponents,
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('ID: 1')
+          expect(cells[1].textContent).toBe('Item 1')
+          expect(cells[2].textContent).toBe('')
+        },
+      )
     })
 
     it('should use default row component for unspecified columns', async () => {
       const rowComponents: RowCells<TestEntry, TestColumns> = {
         default: (entry, column) => <span>{String(entry[column])}</span>,
       }
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [testEntries[0]],
-        rowComponents,
-      })
-      const cells = table.querySelectorAll('tbody td')
-      expect(cells[0].textContent).toBe('1')
-      expect(cells[1].textContent).toBe('Item 1')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [testEntries[0]],
+          rowComponents,
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('1')
+          expect(cells[1].textContent).toBe('Item 1')
+        },
+      )
     })
 
     it('should prefer specific row component over default', async () => {
@@ -196,44 +245,60 @@ describe('Grid', () => {
         id: (entry) => <span>Custom: {entry.id}</span>,
         default: (entry, column) => <span>Default: {String(entry[column])}</span>,
       }
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [testEntries[0]],
-        rowComponents,
-      })
-      const cells = table.querySelectorAll('tbody td')
-      expect(cells[0].textContent).toBe('Custom: 1')
-      expect(cells[1].textContent).toBe('Default: Item 1')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [testEntries[0]],
+          rowComponents,
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('Custom: 1')
+          expect(cells[1].textContent).toBe('Default: Item 1')
+        },
+      )
     })
 
     it('should render empty cells when no row component is provided', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [testEntries[0]],
-      })
-      const cells = table.querySelectorAll('tbody td')
-      expect(cells[0].textContent).toBe('')
-      expect(cells[1].textContent).toBe('')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [testEntries[0]],
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('')
+          expect(cells[1].textContent).toBe('')
+        },
+      )
     })
   })
 
   describe('empty state', () => {
     it('should render empty tbody when no entries', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-      })
-      const rows = table.querySelectorAll('tbody tr')
-      expect(rows.length).toBe(0)
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const rows = table.querySelectorAll('tbody tr')
+          expect(rows.length).toBe(0)
+        },
+      )
     })
 
     it('should still render headers when no entries', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name', 'value'],
-        entries: [],
-      })
-      const headers = table.querySelectorAll('th')
-      expect(headers.length).toBe(3)
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers.length).toBe(3)
+        },
+      )
     })
   })
 
@@ -241,94 +306,122 @@ describe('Grid', () => {
     const testEntries: TestEntry[] = [{ id: 1, name: 'Item 1', value: 'Value 1' }]
 
     it('should apply wrapper styles to the grid element', async () => {
-      const { grid } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: testEntries,
-        rowComponents: {
-          default: (entry, column) => <span>{String(entry[column])}</span>,
-        },
-        styles: {
-          wrapper: { backgroundColor: 'rgb(255, 0, 0)' },
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+          styles: {
+            wrapper: { backgroundColor: 'rgb(255, 0, 0)' },
+          },
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.backgroundColor).toBe('rgb(255, 0, 0)')
         },
-      })
-      const computedStyle = window.getComputedStyle(grid)
-      expect(computedStyle.backgroundColor).toBe('rgb(255, 0, 0)')
+      )
     })
 
     it('should apply header styles to th elements', async () => {
-      const { table } = await renderGrid({
-        columns: ['id', 'name'],
-        entries: [],
-        styles: {
-          header: { color: 'rgb(0, 255, 0)' },
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+          styles: {
+            header: { color: 'rgb(0, 255, 0)' },
+          },
+        }),
+        async ({ table }) => {
+          const header = table.querySelector('th')!
+          expect(header.style.color).toBe('rgb(0, 255, 0)')
         },
-      })
-      const header = table.querySelector('th')!
-      expect(header.style.color).toBe('rgb(0, 255, 0)')
+      )
     })
 
     it('should apply cell styles to td elements', async () => {
-      const { table } = await renderGrid({
-        columns: ['id'],
-        entries: testEntries,
-        rowComponents: {
-          default: (entry, column) => <span>{String(entry[column])}</span>,
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+          styles: {
+            cell: { color: 'rgb(0, 0, 255)' },
+          },
+        }),
+        async ({ table }) => {
+          const cell = table.querySelector('td')!
+          expect(cell.style.color).toBe('rgb(0, 0, 255)')
         },
-        styles: {
-          cell: { color: 'rgb(0, 0, 255)' },
-        },
-      })
-      const cell = table.querySelector('td')!
-      expect(cell.style.color).toBe('rgb(0, 0, 255)')
+      )
     })
 
     it('should apply multiple style properties', async () => {
-      const { grid, table } = await renderGrid({
-        columns: ['id'],
-        entries: testEntries,
-        rowComponents: {
-          default: (entry, column) => <span>{String(entry[column])}</span>,
-        },
-        styles: {
-          wrapper: { margin: '10px', padding: '20px' },
-          header: { fontWeight: 'bold' },
-          cell: { textAlign: 'center' },
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+          styles: {
+            wrapper: { margin: '10px', padding: '20px' },
+            header: { fontWeight: 'bold' },
+            cell: { textAlign: 'center' },
+          },
+        }),
+        async ({ grid, table }) => {
+          expect(window.getComputedStyle(grid).margin).toBe('10px')
+          expect(window.getComputedStyle(grid).padding).toBe('20px')
+          expect(table.querySelector('th')!.style.fontWeight).toBe('bold')
+          expect(table.querySelector('td')!.style.textAlign).toBe('center')
         },
-      })
-      expect(window.getComputedStyle(grid).margin).toBe('10px')
-      expect(window.getComputedStyle(grid).padding).toBe('20px')
-      expect(table.querySelector('th')!.style.fontWeight).toBe('bold')
-      expect(table.querySelector('td')!.style.textAlign).toBe('center')
+      )
     })
   })
 
   describe('default styles', () => {
     it('should have full width and height by default', async () => {
-      const { grid } = await renderGrid({
-        columns: ['id'],
-        entries: [],
-      })
-      const computedStyle = window.getComputedStyle(grid)
-      expect(computedStyle.width).toBe('100%')
-      expect(computedStyle.height).toBe('100%')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.width).toBe('100%')
+          expect(computedStyle.height).toBe('100%')
+        },
+      )
     })
 
     it('should have overflow auto', async () => {
-      const { grid } = await renderGrid({
-        columns: ['id'],
-        entries: [],
-      })
-      const computedStyle = window.getComputedStyle(grid)
-      expect(computedStyle.overflow).toBe('auto')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.overflow).toBe('auto')
+        },
+      )
     })
 
     it('should have display block', async () => {
-      const { grid } = await renderGrid({
-        columns: ['id'],
-        entries: [],
-      })
-      const computedStyle = window.getComputedStyle(grid)
-      expect(computedStyle.display).toBe('block')
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.display).toBe('block')
+        },
+      )
     })
   })
 })