@furystack/shades-common-components 13.5.0 → 15.0.0

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

@@ -1,8 +1,6 @@
 import type { FindOptions } from '@furystack/core'
 import type { ChildrenList } 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'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { GridProps } from '../grid.js'
@@ -10,6 +8,8 @@ import { DataGridBody } from './body.js'
 import { DataGridFooter } from './footer.js'
 import { DataGridHeader } from './header.js'
 
+let nextDataGridId = 0
+
 export type StringFilterConfig = { type: 'string' }
 export type NumberFilterConfig = { type: 'number' }
 export type BooleanFilterConfig = { type: 'boolean' }
@@ -62,7 +62,12 @@ export interface DataGridProps<T, Column extends string> {
   /**
    * The query settings to use for the data source
    */
-  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
+  findOptions: FindOptions<T, Array<keyof T>>
+
+  /**
+   * Callback invoked when find options change (e.g. pagination, sorting, filtering)
+   */
+  onFindOptionsChange: (options: FindOptions<T, Array<keyof T>>) => void
 
   /**
    * A list of custom header components to use
@@ -115,13 +120,21 @@ export interface DataGridProps<T, Column extends string> {
    * @default dataGridItemsPerPage ([10, 20, 25, 50, 100, Infinity])
    */
   paginationOptions?: number[]
+
+  /**
+   * Section name for spatial navigation scoping.
+   * Sets `data-nav-section` on the grid wrapper so that SpatialNavigationService
+   * constrains arrow-key navigation within the grid.
+   * Auto-generated per instance when not provided.
+   */
+  navSection?: string
 }
 
 export const DataGrid: <T, Column extends string>(
   props: DataGridProps<T, Column>,
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-data-grid',
+  customElementName: 'shade-data-grid',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -153,22 +166,43 @@ export const DataGrid: <T, Column extends string>(
       borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
     },
   },
-  render: ({ props, useDisposable, useRef, useHostProps }) => {
+  render: ({ props, useDisposable, useRef, useHostProps, useState }) => {
     const wrapperRef = useRef<HTMLDivElement>('gridWrapper')
+    const [navSectionId] = useState('navSectionId', String(nextDataGridId++))
+
+    const headerFindOptions = props.findOptions as FilterableFindOptions
+    const handleHeaderChange = props.onFindOptionsChange as (options: FilterableFindOptions) => void
 
     useDisposable('keydown-handler', () => {
       const listener = (ev: KeyboardEvent) => props.collectionService.handleKeyDown(ev)
-      window.addEventListener('keydown', listener)
-      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
+      window.addEventListener('keydown', listener, true)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener, true) }
     })
 
-    useDisposable(
-      'clickAway',
-      () =>
-        new ClickAwayService(wrapperRef, () => {
+    useDisposable('focus-coordination', () => {
+      const handleFocusOut = (ev: FocusEvent) => {
+        const wrapper = wrapperRef.current
+        if (wrapper && (!ev.relatedTarget || !wrapper.contains(ev.relatedTarget as Node))) {
           props.collectionService.hasFocus.setValue(false)
-        }),
-    )
+        }
+      }
+
+      queueMicrotask(() => {
+        const wrapper = wrapperRef.current
+        if (wrapper) {
+          wrapper.addEventListener('focusout', handleFocusOut)
+        }
+      })
+
+      return {
+        [Symbol.dispose]: () => {
+          const wrapper = wrapperRef.current
+          if (wrapper) {
+            wrapper.removeEventListener('focusout', handleFocusOut)
+          }
+        },
+      }
+    })
 
     if (props.styles?.wrapper) {
       useHostProps({ style: props.styles.wrapper as Record<string, string> })
@@ -178,9 +212,7 @@ export const DataGrid: <T, Column extends string>(
       <div
         ref={wrapperRef}
         className="shade-grid-wrapper"
-        onclick={() => {
-          props.collectionService.hasFocus.setValue(true)
-        }}
+        data-nav-section={props.navSection ?? `data-grid-${navSectionId}`}
         ariaMultiSelectable="true"
       >
         <table>
@@ -190,12 +222,10 @@ export const DataGrid: <T, Column extends string>(
                 return (
                   <th style={props.styles?.header}>
                     {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
-                      <DataGridHeader<
-                        ReturnType<typeof props.collectionService.data.getValue>['entries'][number],
-                        typeof column
-                      >
+                      <DataGridHeader<typeof column>
                         field={column}
-                        findOptions={props.findOptions}
+                        findOptions={headerFindOptions}
+                        onFindOptionsChange={handleHeaderChange}
                         filterConfig={props.columnFilters?.[column]}
                       />
                     )}
@@ -222,6 +252,7 @@ export const DataGrid: <T, Column extends string>(
         <DataGridFooter
           service={props.collectionService}
           findOptions={props.findOptions}
+          onFindOptionsChange={props.onFindOptionsChange}
           paginationOptions={props.paginationOptions}
         />
       </div>

package/src/components/data-grid/filters/boolean-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 { BooleanFilter } from './boolean-filter.js'
@@ -14,24 +14,32 @@ describe('BooleanFilter', () => {
     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 renderBooleanFilter = async (
-    findOptions: ObservableValue<FilterableFindOptions>,
+    findOptions: FilterableFindOptions,
     field = 'isActive',
     onClose = vi.fn(),
+    onFindOptionsChange = vi.fn(),
   ) => {
     const injector = new Injector()
     const rootElement = document.getElementById('root')!
     initializeShadeRoot({
       injector,
       rootElement,
-      jsxElement: <BooleanFilter field={field} findOptions={findOptions} onClose={onClose} />,
+      jsxElement: (
+        <BooleanFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      ),
     })
     await flushUpdates()
-    return { injector, onClose }
+    return { injector, onClose, onFindOptionsChange }
   }
 
   it('should render three options: True, False, Any', async () => {
@@ -70,7 +78,7 @@ describe('BooleanFilter', () => {
 
   it('should set filter to $eq: true when "True" is clicked', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderBooleanFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderBooleanFilter(findOptions)
     await usingAsync(injector, async () => {
       const trueButton = document.querySelector(
         'shade-segmented-control button[data-value="true"]',
@@ -78,14 +86,14 @@ describe('BooleanFilter', () => {
       trueButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ isActive: { $eq: true } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ filter: { isActive: { $eq: true } } }))
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should set filter to $eq: false when "False" is clicked', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderBooleanFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderBooleanFilter(findOptions)
     await usingAsync(injector, async () => {
       const falseButton = document.querySelector(
         'shade-segmented-control button[data-value="false"]',
@@ -93,42 +101,45 @@ describe('BooleanFilter', () => {
       falseButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter).toEqual({ isActive: { $eq: false } })
+      expect(onFindOptionsChange).toHaveBeenCalledWith(
+        expect.objectContaining({ filter: { isActive: { $eq: false } } }),
+      )
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should remove filter when "Any" is clicked', async () => {
     const findOptions = createFindOptions({ filter: { isActive: { $eq: true } } })
-    const { injector, onClose } = await renderBooleanFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderBooleanFilter(findOptions)
     await usingAsync(injector, async () => {
       const anyButton = document.querySelector('shade-segmented-control button[data-value="any"]') as HTMLButtonElement
       anyButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.isActive).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.isActive).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should preserve filters on other fields', async () => {
     const findOptions = createFindOptions({ filter: { isActive: { $eq: true }, name: { $regex: 'test' } } })
-    const { injector, onClose } = await renderBooleanFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderBooleanFilter(findOptions)
     await usingAsync(injector, async () => {
       const anyButton = document.querySelector('shade-segmented-control button[data-value="any"]') as HTMLButtonElement
       anyButton?.click()
       await flushUpdates()
 
-      const updatedFilter = findOptions.getValue().filter
-      expect(updatedFilter?.isActive).toBeUndefined()
-      expect(updatedFilter?.name).toEqual({ $regex: 'test' })
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.isActive).toBeUndefined()
+      expect(updatedOptions.filter?.name).toEqual({ $regex: 'test' })
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should reset skip to 0 when applying filter', async () => {
     const findOptions = createFindOptions({ skip: 20 })
-    const { injector } = await renderBooleanFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderBooleanFilter(findOptions)
     await usingAsync(injector, async () => {
       const trueButton = document.querySelector(
         'shade-segmented-control button[data-value="true"]',
@@ -136,7 +147,7 @@ describe('BooleanFilter', () => {
       trueButton?.click()
       await flushUpdates()
 
-      expect(findOptions.getValue().skip).toBe(0)
+      expect(onFindOptionsChange).toHaveBeenCalledWith(expect.objectContaining({ skip: 0 }))
     })
   })
 })

package/src/components/data-grid/filters/boolean-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 { cssVariableTheme } from '../../../services/css-variable-theme.js'
 import type { FilterableFindOptions } from '../data-grid.js'
@@ -8,13 +7,14 @@ type BooleanFilterValue = 'true' | 'false' | 'any'
 
 export const BooleanFilter = Shade<{
   field: string
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
   onClose: () => void
 }>({
-  shadowDomName: 'data-grid-boolean-filter',
+  customElementName: 'data-grid-boolean-filter',
   css: { fontFamily: cssVariableTheme.typography.fontFamily },
-  render: ({ props, useObservable }) => {
-    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+  render: ({ props }) => {
+    const { findOptions } = props
 
     const currentFilter = findOptions.filter?.[props.field] as { $eq?: boolean } | undefined
     const currentValue: BooleanFilterValue =
@@ -27,7 +27,7 @@ export const BooleanFilter = Shade<{
       } else {
         filter[props.field] = { $eq: value === 'true' }
       }
-      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
       props.onClose()
     }
 

package/src/components/data-grid/filters/date-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 { DateFilter } from './date-filter.js'
@@ -14,24 +14,32 @@ describe('DateFilter', () => {
     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 renderDateFilter = async (
-    findOptions: ObservableValue<FilterableFindOptions>,
+    findOptions: FilterableFindOptions,
     field = 'createdAt',
     onClose = vi.fn(),
+    onFindOptionsChange = vi.fn(),
   ) => {
     const injector = new Injector()
     const rootElement = document.getElementById('root')!
     initializeShadeRoot({
       injector,
       rootElement,
-      jsxElement: <DateFilter field={field} findOptions={findOptions} onClose={onClose} />,
+      jsxElement: (
+        <DateFilter
+          field={field}
+          findOptions={findOptions}
+          onFindOptionsChange={onFindOptionsChange}
+          onClose={onClose}
+        />
+      ),
     })
     await flushUpdates()
-    return { injector, onClose }
+    return { injector, onClose, onFindOptionsChange }
   }
 
   it('should render mode segmented control and date input', async () => {
@@ -47,7 +55,7 @@ describe('DateFilter', () => {
 
   it('should apply "before" filter on submit', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderDateFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderDateFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
       input.value = '2025-06-15T10:30'
@@ -57,7 +65,8 @@ describe('DateFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      const filter = findOptions.getValue().filter?.createdAt as Record<string, Date>
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      const filter = updatedOptions.filter?.createdAt as Record<string, Date>
       expect(filter.$lt).toBeInstanceOf(Date)
       expect(filter.$lt.toISOString()).toBe(new Date('2025-06-15T10:30').toISOString())
       expect(onClose).toHaveBeenCalled()
@@ -66,7 +75,7 @@ describe('DateFilter', () => {
 
   it('should apply "after" filter when mode is changed', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderDateFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderDateFilter(findOptions)
     await usingAsync(injector, async () => {
       const afterButton = document.querySelector(
         'shade-segmented-control button[data-value="after"]',
@@ -82,7 +91,8 @@ describe('DateFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      const filter = findOptions.getValue().filter?.createdAt as Record<string, Date>
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      const filter = updatedOptions.filter?.createdAt as Record<string, Date>
       expect(filter.$gt).toBeInstanceOf(Date)
       expect(onClose).toHaveBeenCalled()
     })
@@ -90,7 +100,7 @@ describe('DateFilter', () => {
 
   it('should apply "between" filter with both dates', async () => {
     const findOptions = createFindOptions()
-    const { injector, onClose } = await renderDateFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderDateFilter(findOptions)
     await usingAsync(injector, async () => {
       const betweenButton = document.querySelector(
         'shade-segmented-control button[data-value="between"]',
@@ -110,7 +120,8 @@ describe('DateFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      const filter = findOptions.getValue().filter?.createdAt as Record<string, Date>
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      const filter = updatedOptions.filter?.createdAt as Record<string, Date>
       expect(filter.$gte).toBeInstanceOf(Date)
       expect(filter.$lte).toBeInstanceOf(Date)
       expect(onClose).toHaveBeenCalled()
@@ -119,20 +130,21 @@ describe('DateFilter', () => {
 
   it('should clear filter when Clear button is clicked', async () => {
     const findOptions = createFindOptions({ filter: { createdAt: { $lt: new Date() } } })
-    const { injector, onClose } = await renderDateFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderDateFilter(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?.createdAt).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.createdAt).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
 
   it('should remove filter when submitting empty date', async () => {
     const findOptions = createFindOptions({ filter: { createdAt: { $lt: new Date() } } })
-    const { injector, onClose } = await renderDateFilter(findOptions)
+    const { injector, onClose, onFindOptionsChange } = await renderDateFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
       input.value = ''
@@ -142,7 +154,8 @@ describe('DateFilter', () => {
       form.dispatchEvent(new Event('submit', { bubbles: true }))
       await flushUpdates()
 
-      expect(findOptions.getValue().filter?.createdAt).toBeUndefined()
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.createdAt).toBeUndefined()
       expect(onClose).toHaveBeenCalled()
     })
   })
@@ -151,21 +164,21 @@ describe('DateFilter', () => {
     const findOptions = createFindOptions({
       filter: { createdAt: { $lt: new Date() }, name: { $regex: 'keep' } },
     })
-    const { injector } = await renderDateFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderDateFilter(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?.createdAt).toBeUndefined()
-      expect(updatedFilter?.name).toEqual({ $regex: 'keep' })
+      const updatedOptions = onFindOptionsChange.mock.lastCall?.[0] as FilterableFindOptions
+      expect(updatedOptions.filter?.createdAt).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 renderDateFilter(findOptions)
+    const { injector, onFindOptionsChange } = await renderDateFilter(findOptions)
     await usingAsync(injector, async () => {
       const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
       input.value = '2025-06-15T10:30'
@@ -175,7 +188,7 @@ describe('DateFilter', () => {
       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/date-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'
@@ -12,17 +11,18 @@ type DateMode = 'before' | 'after' | 'between'
 
 export const DateFilter = Shade<{
   field: string
-  findOptions: ObservableValue<FilterableFindOptions>
+  findOptions: FilterableFindOptions
+  onFindOptionsChange: (options: FilterableFindOptions) => void
   onClose: () => void
 }>({
-  shadowDomName: 'data-grid-date-filter',
+  customElementName: 'data-grid-date-filter',
   css: {
     ...filterBaseCss,
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& input[type="datetime-local"]': 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
       | { $lt?: Date; $gt?: Date; $gte?: Date; $lte?: Date }
@@ -63,7 +63,7 @@ export const DateFilter = Shade<{
       const filter = { ...findOptions.filter }
       if (!dateValue) {
         delete filter[props.field]
-        setFindOptions({ ...findOptions, filter, skip: 0 })
+        props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
         props.onClose()
         return
       }
@@ -87,14 +87,14 @@ export const DateFilter = Shade<{
       }
 
       filter[props.field] = filterValue
-      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()
     }