@furystack/shades-common-components 13.5.0 → 15.0.0

package/src/components/data-grid/filters/enum-filter.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, usingAsync } from '@furystack/utils'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { FilterableFindOptions } from '../data-grid.js'
 import { EnumFilter } from './enum-filter.js'
@@ -20,25 +20,34 @@ describe('EnumFilter', () => {
     document.body.innerHTML = ''
   })
 
-  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
-    return new ObservableValue<FilterableFindOptions>(options)
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): FilterableFindOptions => {
+    return options as FilterableFindOptions
   }
 
   const renderEnumFilter = async (
-    findOptions: ObservableValue<FilterableFindOptions>,
+    findOptions: FilterableFindOptions,
     field = 'role',
     values = enumValues,
     onClose = vi.fn(),
+    onFindOptionsChange = vi.fn(),
   ) => {
     const injector = new Injector()
     const rootElement = document.getElementById('root')!
     initializeShadeRoot({
       injector,
       rootElement,
-      jsxElement: <EnumFilter field={field} values={values} findOptions={findOptions} onClose={onClose} />,
+      jsxElement: (
+        <EnumFilter
+          field={field}
+          values={values}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      ),
     })
     await flushUpdates()
-    return { injector, onClose }
+    return { injector, onClose, onFindOptionsChange }
   }
 
   it('should render mode control and checkboxes for each value', async () => {
@@ -54,7 +63,7 @@ describe('EnumFilter', () => {
 
   it('should apply $in filter when values are selected and Apply is clicked', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderEnumFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderEnumFilter(findOptions)
     await usingAsync(injector, async () => {
       const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
       const adminCheckbox = checkboxes[0] as HTMLInputElement
@@ -65,14 +74,16 @@ describe('EnumFilter', () => {
       applyButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ role: { $in: ['admin'] } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(
+        expect.objectContaining({ filter: { role: { $in: ['admin'] } } }),
+      )
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should apply $nin filter when exclude mode is selected', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderEnumFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderEnumFilter(findOptions)
     await usingAsync(injector, async () => {
       const excludeButton = document.querySelector(
         'shade-segmented-control button[data-value="exclude"]',
@@ -89,14 +100,16 @@ describe('EnumFilter', () => {
       applyButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ role: { $nin: ['guest'] } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(
+        expect.objectContaining({ filter: { role: { $nin: ['guest'] } } }),
+      )
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should remove filter when no values are selected', async () => {
     const findOptions = createFindOptions({ filter: { role: { $in: ['admin'] } } })
-    const { injector, onClose } = await renderEnumFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderEnumFilter(findOptions)
     await usingAsync(injector, async () => {
       const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
       const adminCheckbox = checkboxes[0] as HTMLInputElement
@@ -107,41 +120,43 @@ describe('EnumFilter', () => {
       applyButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.role).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.role).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should clear filter when Clear button is clicked', async () => {
     const findOptions = createFindOptions({ filter: { role: { $in: ['admin', 'user'] } } })
-    const { injector, onClose } = await renderEnumFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderEnumFilter(findOptions)
     await usingAsync(injector, async () => {
       const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
       clearButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.role).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.role).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should preserve filters on other fields', async () => {
     const findOptions = createFindOptions({ filter: { role: { $in: ['admin'] }, name: { $regex: 'keep' } } })
-    const { injector } = await renderEnumFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderEnumFilter(findOptions)
     await usingAsync(injector, async () => {
       const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
       clearButton?.click()
       await flushUpdates()
 
-      const updatedFilter = findOptions.getValue().filter
-      expect(updatedFilter?.role).toBeUndefined()
-      expect(updatedFilter?.name).toEqual({ $regex: 'keep' })
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.role).toBeUndefined()
+      expect(updatedOptions.filter?.name).toEqual({ $regex: 'keep' })
     })
   })
 
   it('should reset skip to 0 when applying filter', async () => {
     const findOptions = createFindOptions({ skip: 20 })
-    const { injector } = await renderEnumFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderEnumFilter(findOptions)
     await usingAsync(injector, async () => {
       const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
       const checkbox = checkboxes[0] as HTMLInputElement
@@ -152,7 +167,7 @@ describe('EnumFilter', () => {
       applyButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().skip).toBe(0)
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ skip: 0 }))
     })
   })
 

package/src/components/data-grid/filters/enum-filter.tsx

@@ -1,5 +1,4 @@
 import { createComponent, Shade } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { SegmentedControl } from '../../button-group.js'
 import { Button } from '../../button.js'
 import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
@@ -14,10 +13,11 @@ type EnumMode = 'include' | 'exclude'
 export const EnumFilter = Shade<{
   field: string
   values: Array<{ label: string; value: string }>
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
   onClose: () => void
 }>({
-  shadowDomName: 'data-grid-enum-filter',
+  customElementName: 'data-grid-enum-filter',
   css: {
     ...filterBaseCss,
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -36,8 +36,8 @@ export const EnumFilter = Shade<{
       marginBottom: '0',
     },
   },
-  render: ({ props, useObservable, useState }) => {
-    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+  render: ({ props, useState }) => {
+    const { findOptions } = props
 
     const currentFilter = findOptions.filter?.[props.field] as { $in?: string[]; $nin?: string[] } | undefined
     const isExcludeMode = !!currentFilter?.$nin
@@ -54,14 +54,14 @@ export const EnumFilter = Shade<{
         const operator = mode === 'include' ? '$in' : '$nin'
         filter[props.field] = { [operator]: Array.from(selected) }
       }
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }
 
     const clearFilter = () => {
       const filter = { ...findOptions.filter }
       delete filter[props.field]
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }
 

package/src/components/data-grid/filters/filter-dropdown.tsx

@@ -8,7 +8,7 @@ export type FilterDropdownProps = {
 }
 
 export const FilterDropdown: (props: FilterDropdownProps, children: ChildrenList) => JSX.Element = Shade({
-  shadowDomName: 'data-grid-filter-dropdown',
+  customElementName: 'data-grid-filter-dropdown',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     display: 'block',

package/src/components/data-grid/filters/number-filter.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, usingAsync } from '@furystack/utils'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { FilterableFindOptions } from '../data-grid.js'
 import { NumberFilter } from './number-filter.js'
@@ -14,24 +14,32 @@ describe('NumberFilter', () => {
     document.body.innerHTML = ''
   })
 
-  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
-    return new ObservableValue<FilterableFindOptions>(options)
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): FilterableFindOptions => {
+    return options as FilterableFindOptions
   }
 
   const renderNumberFilter = async (
-    findOptions: ObservableValue<FilterableFindOptions>,
+    findOptions: FilterableFindOptions,
     field = 'level',
     onClose = vi.fn(),
+    onFindOptionsChange = vi.fn(),
   ) => {
     const injector = new Injector()
     const rootElement = document.getElementById('root')!
     initializeShadeRoot({
       injector,
       rootElement,
-      jsxElement: <NumberFilter field={field} findOptions={findOptions} onClose={onClose} />,
+      jsxElement: (
+        <NumberFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      ),
     })
     await flushUpdates()
-    return { injector, onClose }
+    return { injector, onClose, onFindOptionsChange }
   }
 
   it('should render operator segmented control and input', async () => {
@@ -47,7 +55,7 @@ describe('NumberFilter', () => {
 
   it('should apply $eq filter on submit', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderNumberFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
       input.value = '42'
@@ -57,14 +65,14 @@ describe('NumberFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ level: { $eq: 42 } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ filter: { level: { $eq: 42 } } }))
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should apply $gt operator when selected', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderNumberFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const gtButton = document.querySelector('shade-segmented-control button[data-value="$gt"]') as HTMLButtonElement
       gtButton?.click()
@@ -78,14 +86,14 @@ describe('NumberFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ level: { $gt: 10 } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ filter: { level: { $gt: 10 } } }))
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should apply $lte operator when selected', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderNumberFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const lteButton = document.querySelector('shade-segmented-control button[data-value="$lte"]') as HTMLButtonElement
       lteButton?.click()
@@ -99,27 +107,28 @@ describe('NumberFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ level: { $lte: 99.5 } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ filter: { level: { $lte: 99.5 } } }))
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should clear filter when Clear button is clicked', async () => {
     const findOptions = createFindOptions({ filter: { level: { $eq: 5 } } })
-    const { injector, onClose } = await renderNumberFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
       clearButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.level).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.level).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should remove filter when submitting NaN value', async () => {
     const findOptions = createFindOptions({ filter: { level: { $eq: 5 } } })
-    const { injector, onClose } = await renderNumberFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
       input.value = ''
@@ -129,28 +138,29 @@ describe('NumberFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.level).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.level).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should preserve filters on other fields', async () => {
     const findOptions = createFindOptions({ filter: { level: { $gt: 10 }, name: { $regex: 'keep' } } })
-    const { injector } = await renderNumberFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
       clearButton?.click()
       await flushUpdates()
 
-      const updatedFilter = findOptions.getValue().filter
-      expect(updatedFilter?.level).toBeUndefined()
-      expect(updatedFilter?.name).toEqual({ $regex: 'keep' })
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.level).toBeUndefined()
+      expect(updatedOptions.filter?.name).toEqual({ $regex: 'keep' })
     })
   })
 
   it('should reset skip to 0 when applying filter', async () => {
     const findOptions = createFindOptions({ skip: 20 })
-    const { injector } = await renderNumberFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderNumberFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="number-filter-value"]') as HTMLInputElement
       input.value = '5'
@@ -160,7 +170,7 @@ describe('NumberFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().skip).toBe(0)
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ skip: 0 }))
     })
   })
 

package/src/components/data-grid/filters/number-filter.tsx

@@ -1,5 +1,4 @@
 import { createComponent, Shade } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { Button } from '../../button.js'
 import { SegmentedControl } from '../../button-group.js'
 import { Icon } from '../../icons/icon.js'
@@ -20,17 +19,18 @@ const operatorLabels: Record<NumberOperator, string> = {
 
 export const NumberFilter = Shade<{
   field: string
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
   onClose: () => void
 }>({
-  shadowDomName: 'data-grid-number-filter',
+  customElementName: 'data-grid-number-filter',
   css: {
     ...filterBaseCss,
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& input': filterInputCss,
   },
-  render: ({ props, useObservable, useState }) => {
-    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+  render: ({ props, useState }) => {
+    const { findOptions } = props
 
     const currentFilter = findOptions.filter?.[props.field] as Record<string, number> | undefined
     const currentOperator: NumberOperator = currentFilter
@@ -46,14 +46,14 @@ export const NumberFilter = Shade<{
       } else {
         filter[props.field] = { [operator]: num }
       }
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }
 
     const clearFilter = () => {
       const filter = { ...findOptions.filter }
       delete filter[props.field]
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }
 

package/src/components/data-grid/filters/string-filter.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, usingAsync } from '@furystack/utils'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { FilterableFindOptions } from '../data-grid.js'
 import { StringFilter } from './string-filter.js'
@@ -14,24 +14,32 @@ describe('StringFilter', () => {
     document.body.innerHTML = ''
   })
 
-  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
-    return new ObservableValue<FilterableFindOptions>(options)
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): FilterableFindOptions => {
+    return options as FilterableFindOptions
   }
 
   const renderStringFilter = async (
-    findOptions: ObservableValue<FilterableFindOptions>,
+    findOptions: FilterableFindOptions,
     field = 'name',
     onClose = vi.fn(),
+    onFindOptionsChange = vi.fn(),
   ) => {
     const injector = new Injector()
     const rootElement = document.getElementById('root')!
     initializeShadeRoot({
       injector,
       rootElement,
-      jsxElement: <StringFilter field={field} findOptions={findOptions} onClose={onClose} />,
+      jsxElement: (
+        <StringFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      ),
     })
     await flushUpdates()
-    return { injector, onClose }
+    return { injector, onClose, onFindOptionsChange }
   }
 
   it('should render operator segmented control and input', async () => {
@@ -47,7 +55,7 @@ describe('StringFilter', () => {
 
   it('should apply $regex filter on submit', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderStringFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderStringFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
       input.value = 'test-value'
@@ -57,27 +65,30 @@ describe('StringFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ name: { $regex: 'test-value' } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(
+        expect.objectContaining({ filter: { name: { $regex: 'test-value' } } }),
+      )
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should clear filter when Clear button is clicked', async () => {
     const findOptions = createFindOptions({ filter: { name: { $regex: 'existing' } } })
-    const { injector, onClose } = await renderStringFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderStringFilter(findOptions)
     await usingAsync(injector, async () => {
       const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
       clearButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.name).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.name).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should remove filter when submitting empty value', async () => {
     const findOptions = createFindOptions({ filter: { name: { $regex: 'existing' } } })
-    const { injector, onClose } = await renderStringFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderStringFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
       input.value = ''
@@ -87,14 +98,15 @@ describe('StringFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.name).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.name).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should preserve filters on other fields', async () => {
     const findOptions = createFindOptions({ filter: { name: { $regex: 'old' }, email: { $regex: 'keep' } } })
-    const { injector } = await renderStringFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderStringFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
       input.value = 'new-value'
@@ -104,15 +116,15 @@ describe('StringFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      const updatedFilter = findOptions.getValue().filter
-      expect(updatedFilter?.name).toEqual({ $regex: 'new-value' })
-      expect(updatedFilter?.email).toEqual({ $regex: 'keep' })
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.name).toEqual({ $regex: 'new-value' })
+      expect(updatedOptions.filter?.email).toEqual({ $regex: 'keep' })
     })
   })
 
   it('should apply selected operator', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderStringFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderStringFilter(findOptions)
     await usingAsync(injector, async () => {
       const eqButton = document.querySelector('shade-segmented-control button[data-value="$eq"]') as HTMLButtonElement
       eqButton?.click()
@@ -126,14 +138,14 @@ describe('StringFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ name: { $eq: 'exact' } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ filter: { name: { $eq: 'exact' } } }))
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should reset skip to 0 when applying filter', async () => {
     const findOptions = createFindOptions({ skip: 20 })
-    const { injector } = await renderStringFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderStringFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="string-filter-value"]') as HTMLInputElement
       input.value = 'test'
@@ -143,7 +155,7 @@ describe('StringFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().skip).toBe(0)
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ skip: 0 }))
     })
   })
 

package/src/components/data-grid/filters/string-filter.tsx

@@ -1,5 +1,4 @@
 import { createComponent, Shade } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { Button } from '../../button.js'
 import { SegmentedControl } from '../../button-group.js'
 import { Icon } from '../../icons/icon.js'
@@ -19,17 +18,18 @@ const operatorLabels: Record<StringOperator, string> = {
 
 export const StringFilter = Shade<{
   field: string
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
   onClose: () => void
 }>({
-  shadowDomName: 'data-grid-string-filter',
+  customElementName: 'data-grid-string-filter',
   css: {
     ...filterBaseCss,
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& input': filterInputCss,
   },
-  render: ({ props, useObservable, useState }) => {
-    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+  render: ({ props, useState }) => {
+    const { findOptions } = props
 
     const currentFilter = findOptions.filter?.[props.field] as Record<string, string> | undefined
     const currentOperator: StringOperator = currentFilter
@@ -44,14 +44,14 @@ export const StringFilter = Shade<{
       } else {
         filter[props.field] = { [operator]: value }
       }
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }
 
     const clearFilter = () => {
       const filter = { ...findOptions.filter }
       delete filter[props.field]
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }