@furystack/shades-common-components 13.5.0 → 14.0.0

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

@@ -1,12 +1,41 @@
-import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
-import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { createComponent, flushUpdates, initializeShadeRoot, Shade } from '@furystack/shades'
 import { ObservableValue, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { FilterableFindOptions } from './data-grid.js'
 import { DataGridHeader, OrderButton } from './header.js'
 
-type TestItem = { id: number; name: string; email: string }
+const OrderButtonWrapper = Shade<{ obs: ObservableValue<FilterableFindOptions>; field: string }>({
+  customElementName: 'test-order-button-wrapper',
+  render: ({ props, useObservable }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.obs)
+    return <OrderButton field={props.field} findOptions={findOptions} onFindOptionsChange={setFindOptions} />
+  },
+})
+
+const HeaderWrapper = Shade<{
+  obs: ObservableValue<FilterableFindOptions>
+  field: string
+  filterConfig?:
+    | { type: 'string' }
+    | { type: 'number' }
+    | { type: 'boolean' }
+    | { type: 'date' }
+    | { type: 'enum'; values: Array<{ label: string; value: string }> }
+}>({
+  customElementName: 'test-header-wrapper',
+  render: ({ props, useObservable }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.obs)
+    return (
+      <DataGridHeader
+        field={props.field}
+        findOptions={findOptions}
+        onFindOptionsChange={setFindOptions}
+        filterConfig={props.filterConfig}
+      />
+    )
+  },
+})
 
 describe('DataGridHeader', () => {
   let originalAnimate: typeof Element.prototype.animate
@@ -41,28 +70,16 @@ describe('DataGridHeader', () => {
     Element.prototype.animate = originalAnimate
   })
 
-  const createFindOptions = (
-    options: Partial<FindOptions<TestItem, Array<keyof TestItem>>> = {},
-  ): ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>> => {
-    return new ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>>(options)
-  }
-
-  const createFilterableFindOptions = (
-    options: Partial<FilterableFindOptions> = {},
-  ): ObservableValue<FilterableFindOptions> => {
-    return new ObservableValue<FilterableFindOptions>(options)
-  }
-
   describe('rendering', () => {
     it('should render with custom element', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={{}} onFindOptionsChange={onFindOptionsChange} />,
         })
 
         await flushUpdates()
@@ -75,12 +92,12 @@ describe('DataGridHeader', () => {
     it('should render field name', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={{}} onFindOptionsChange={onFindOptionsChange} />,
         })
 
         await flushUpdates()
@@ -94,12 +111,12 @@ describe('DataGridHeader', () => {
     it('should render order button', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={{}} onFindOptionsChange={onFindOptionsChange} />,
         })
 
         await flushUpdates()
@@ -112,12 +129,12 @@ describe('DataGridHeader', () => {
     it('should not render filter button when no filterConfig is provided', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={{}} onFindOptionsChange={onFindOptionsChange} />,
         })
 
         await flushUpdates()
@@ -130,12 +147,19 @@ describe('DataGridHeader', () => {
     it('should render filter button when filterConfig is provided', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'string' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -150,12 +174,12 @@ describe('DataGridHeader', () => {
     it('should show neutral icon when no order is set', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFilterableFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+          jsxElement: <OrderButton field="name" findOptions={{}} onFindOptionsChange={onFindOptionsChange} />,
         })
 
         await flushUpdates()
@@ -165,15 +189,15 @@ describe('DataGridHeader', () => {
       })
     })
 
-    it('should toggle order to ASC when clicking on unsorted field', async () => {
+    it('should call onFindOptionsChange with ASC when clicking on unsorted field', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFilterableFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+          jsxElement: <OrderButton field="name" findOptions={{}} onFindOptionsChange={onFindOptionsChange} />,
         })
 
         await flushUpdates()
@@ -183,20 +207,25 @@ describe('DataGridHeader', () => {
 
         await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.order).toEqual({ name: 'ASC' })
+        expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ order: { name: 'ASC' } }))
       })
     })
 
-    it('should toggle order from ASC to DESC when clicking', async () => {
+    it('should call onFindOptionsChange with DESC when clicking on ASC-sorted field', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFilterableFindOptions({ order: { name: 'ASC' } })
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+          jsxElement: (
+            <OrderButton
+              field="name"
+              findOptions={{ order: { name: 'ASC' } }}
+              onFindOptionsChange={onFindOptionsChange}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -206,20 +235,25 @@ describe('DataGridHeader', () => {
 
         await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.order).toEqual({ name: 'DESC' })
+        expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ order: { name: 'DESC' } }))
       })
     })
 
-    it('should toggle order from DESC to ASC when clicking', async () => {
+    it('should call onFindOptionsChange with ASC when clicking on DESC-sorted field', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFilterableFindOptions({ order: { name: 'DESC' } })
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+          jsxElement: (
+            <OrderButton
+              field="name"
+              findOptions={{ order: { name: 'DESC' } }}
+              onFindOptionsChange={onFindOptionsChange}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -229,20 +263,19 @@ describe('DataGridHeader', () => {
 
         await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.order).toEqual({ name: 'ASC' })
+        expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ order: { name: 'ASC' } }))
       })
     })
 
     it('should react to external findOptions changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFilterableFindOptions()
+        const obs = new ObservableValue<FilterableFindOptions>({})
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+          jsxElement: <OrderButtonWrapper obs={obs} field="name" />,
         })
 
         await flushUpdates()
@@ -250,7 +283,7 @@ describe('DataGridHeader', () => {
         let button = document.querySelector('data-grid-order-button')
         expect(button?.querySelector('shade-icon')).not.toBeNull()
 
-        findOptions.setValue({ order: { name: 'ASC' } })
+        obs.setValue({ order: { name: 'ASC' } })
         await flushUpdates()
 
         button = document.querySelector('data-grid-order-button')
@@ -263,12 +296,19 @@ describe('DataGridHeader', () => {
     it('should show inactive state when no filter is set', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'string' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -281,12 +321,19 @@ describe('DataGridHeader', () => {
     it('should show active state when filter is set for field', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ filter: { name: { $regex: 'test' } } })
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{ filter: { name: { $regex: 'test' } } }}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'string' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -299,21 +346,22 @@ describe('DataGridHeader', () => {
     it('should transition from active to inactive when filter is externally cleared', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ filter: { name: { $regex: 'test' } } })
+        const obs = new ObservableValue<FilterableFindOptions>({
+          filter: { name: { $regex: 'test' } },
+        })
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: <HeaderWrapper obs={obs} field="name" filterConfig={{ type: 'string' }} />,
         })
 
-        // Parent renders, then child FilterButton renders
         await flushUpdates()
 
         const filterButton = document.querySelector('data-grid-filter-button button')
         expect(filterButton?.hasAttribute('data-selected')).toBe(true)
 
-        findOptions.setValue({ filter: {} })
+        obs.setValue({ filter: {} })
         await flushUpdates()
 
         const updatedButton = document.querySelector('data-grid-filter-button button')
@@ -324,12 +372,19 @@ describe('DataGridHeader', () => {
     it('should open filter dropdown when clicked', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'string' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -349,12 +404,19 @@ describe('DataGridHeader', () => {
     it('should render StringFilter for string filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'string' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -372,12 +434,19 @@ describe('DataGridHeader', () => {
     it('should render NumberFilter for number filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="id" findOptions={findOptions} filterConfig={{ type: 'number' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="id"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'number' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -395,12 +464,19 @@ describe('DataGridHeader', () => {
     it('should render BooleanFilter for boolean filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'boolean' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'boolean' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -418,7 +494,7 @@ describe('DataGridHeader', () => {
     it('should render EnumFilter for enum filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
@@ -426,7 +502,8 @@ describe('DataGridHeader', () => {
           jsxElement: (
             <DataGridHeader
               field="name"
-              findOptions={findOptions}
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
               filterConfig={{ type: 'enum', values: [{ label: 'A', value: 'a' }] }}
             />
           ),
@@ -447,12 +524,19 @@ describe('DataGridHeader', () => {
     it('should render DateFilter for date filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const onFindOptionsChange = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'date' }} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={{}}
+              onFindOptionsChange={onFindOptionsChange}
+              filterConfig={{ type: 'date' }}
+            />
+          ),
         })
 
         await flushUpdates()
@@ -472,12 +556,12 @@ describe('DataGridHeader', () => {
     it('should support both sorting and filtering simultaneously', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const obs = new ObservableValue<FilterableFindOptions>({})
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
+          jsxElement: <HeaderWrapper obs={obs} field="name" filterConfig={{ type: 'string' }} />,
         })
 
         await flushUpdates()
@@ -487,7 +571,7 @@ describe('DataGridHeader', () => {
 
         await flushUpdates()
 
-        expect(findOptions.getValue().order).toEqual({ name: 'ASC' })
+        expect(obs.getValue().order).toEqual({ name: 'ASC' })
 
         const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
         filterButton?.click()

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

@@ -1,7 +1,5 @@
-import type { FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { ToggleButton } from '../button-group.js'
 import { arrowDown, arrowUp, arrowUpDown, filter as filterIcon } from '../icons/icon-definitions.js'
 import { Icon } from '../icons/icon.js'
@@ -14,22 +12,24 @@ import { FilterDropdown } from './filters/filter-dropdown.js'
 import { NumberFilter } from './filters/number-filter.js'
 import { StringFilter } from './filters/string-filter.js'
 
-export type DataGridHeaderProps<T, Column extends string> = {
+export type DataGridHeaderProps<Column extends string> = {
   field: Column
-  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
   filterConfig?: ColumnFilterConfig
 }
 
 export const OrderButton = Shade<{
   field: string
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
 }>({
-  shadowDomName: 'data-grid-order-button',
+  customElementName: 'data-grid-order-button',
   css: {
     display: 'inline-block',
   },
-  render: ({ props, useObservable }) => {
-    const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {})
+  render: ({ props }) => {
+    const { findOptions } = props
 
     const currentOrder = Object.keys(findOptions.order || {})[0]
     const currentOrderDirection = Object.values(findOptions.order || {})[0]
@@ -48,7 +48,7 @@ export const OrderButton = Shade<{
             newDirection = currentOrderDirection === 'ASC' ? 'DESC' : 'ASC'
           }
           newOrder[props.field] = newDirection
-          onFindOptionsChange({
+          props.onFindOptionsChange({
             ...findOptions,
             order: newOrder,
           })
@@ -67,17 +67,15 @@ export const OrderButton = Shade<{
 
 const FilterButton = Shade<{
   field: string
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
   onclick: () => void
 }>({
-  shadowDomName: 'data-grid-filter-button',
+  customElementName: 'data-grid-filter-button',
   css: {
     display: 'inline-block',
   },
-  render: ({ props, useObservable }) => {
-    const [findOptions] = useObservable('currentValue', props.findOptions)
-
-    const hasActiveFilter = !!findOptions.filter?.[props.field]
+  render: ({ props }) => {
+    const hasActiveFilter = !!props.findOptions.filter?.[props.field]
 
     return (
       <ToggleButton
@@ -100,20 +98,57 @@ const FilterButton = Shade<{
 const renderFilterComponent = (
   filterConfig: ColumnFilterConfig,
   field: string,
-  findOptions: ObservableValue<FilterableFindOptions>,
+  findOptions: FilterableFindOptions,
+  onFindOptionsChange: (options: FilterableFindOptions) => void,
   onClose: () => void,
 ): JSX.Element => {
   switch (filterConfig.type) {
     case 'number':
-      return <NumberFilter field={field} findOptions={findOptions} onClose={onClose} />
+      return (
+        <NumberFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      )
     case 'boolean':
-      return <BooleanFilter field={field} findOptions={findOptions} onClose={onClose} />
+      return (
+        <BooleanFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      )
     case 'enum':
-      return <EnumFilter field={field} values={filterConfig.values} findOptions={findOptions} onClose={onClose} />
+      return (
+        <EnumFilter
+          field={field}
+          values={filterConfig.values}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      )
     case 'date':
-      return <DateFilter field={field} findOptions={findOptions} onClose={onClose} />
+      return (
+        <DateFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      )
     case 'string':
-      return <StringFilter field={field} findOptions={findOptions} onClose={onClose} />
+      return (
+        <StringFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      )
     default: {
       const _exhaustive: never = filterConfig
       throw new Error(`Unknown filter type: ${(_exhaustive as ColumnFilterConfig).type}`)
@@ -121,11 +156,11 @@ const renderFilterComponent = (
   }
 }
 
-export const DataGridHeader: <T, Column extends string>(
-  props: DataGridHeaderProps<T, Column>,
+export const DataGridHeader: <Column extends string>(
+  props: DataGridHeaderProps<Column>,
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
-  shadowDomName: 'data-grid-header',
+  customElementName: 'data-grid-header',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -164,13 +199,14 @@ export const DataGridHeader: <T, Column extends string>(
             {props.filterConfig && (
               <FilterButton
                 onclick={() => setIsFilterOpen(!isFilterOpen)}
-                findOptions={props.findOptions as ObservableValue<FilterableFindOptions>}
+                findOptions={props.findOptions}
                 field={props.field}
               />
             )}
             <OrderButton
               field={props.field}
-              findOptions={props.findOptions as ObservableValue<FilterableFindOptions>}
+              findOptions={props.findOptions}
+              onFindOptionsChange={props.onFindOptionsChange}
             />
           </div>
         </div>
@@ -179,7 +215,8 @@ export const DataGridHeader: <T, Column extends string>(
             {renderFilterComponent(
               props.filterConfig,
               props.field,
-              props.findOptions as ObservableValue<FilterableFindOptions>,
+              props.findOptions,
+              props.onFindOptionsChange,
               closeFilter,
             )}
           </FilterDropdown>

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

@@ -3,7 +3,7 @@ import type { CollectionService } from '../../services/collection-service.js'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 
 export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
-  shadowDomName: 'shades-data-grid-selection-cell',
+  customElementName: 'shades-data-grid-selection-cell',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,