@furystack/shades-common-components 12.3.0 → 12.5.0

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

@@ -1,7 +1,7 @@
 import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { CollectionService } from '../../services/collection-service.js'
 import { DataGrid } from './data-grid.js'
@@ -70,7 +70,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         expect(grid).not.toBeNull()
@@ -99,7 +99,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const table = grid?.querySelector('table')
@@ -133,7 +133,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const customHeader = grid?.querySelector('[data-testid="custom-header-id"]')
@@ -163,7 +163,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const defaultHeaderId = grid?.querySelector('[data-testid="default-header-id"]')
@@ -193,13 +193,91 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const defaultHeaders = grid?.querySelectorAll('data-grid-header')
         expect(defaultHeaders?.length).toBe(2)
       })
     })
+
+    it('should render filter buttons when columnFilters are provided', async () => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              styles={{}}
+              columnFilters={{ name: { type: 'string' } }}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const grid = document.querySelector('shade-data-grid')
+        const filterButtons = grid?.querySelectorAll('data-grid-filter-button')
+        expect(filterButtons?.length).toBe(1)
+      })
+    })
+
+    it('should not render filter buttons when columnFilters is not provided', async () => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              styles={{}}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const grid = document.querySelector('shade-data-grid')
+        const filterButtons = grid?.querySelectorAll('data-grid-filter-button')
+        expect(filterButtons?.length).toBe(0)
+      })
+    })
+
+    it('should render without headerComponents and rowComponents', async () => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              styles={{}}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const grid = document.querySelector('shade-data-grid')
+        expect(grid).not.toBeNull()
+
+        const headers = grid?.querySelectorAll('data-grid-header')
+        expect(headers?.length).toBe(2)
+      })
+    })
   })
 
   describe('focus management', () => {
@@ -224,7 +302,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const wrapper = grid?.querySelector('.shade-grid-wrapper') as HTMLElement
@@ -257,7 +335,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const wrapper = grid?.querySelector('.shade-grid-wrapper') as HTMLElement
@@ -296,7 +374,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -327,7 +405,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -358,7 +436,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -389,7 +467,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -419,7 +497,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -452,7 +530,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -485,7 +563,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -518,7 +596,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: '+', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -550,7 +628,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: '-', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -582,7 +660,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: '*', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -616,7 +694,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -648,7 +726,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const keydownEvent = new KeyboardEvent('keydown', { key: 'Insert', bubbles: true })
         window.dispatchEvent(keydownEvent)
@@ -681,7 +759,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid') as HTMLElement
         expect(grid?.style.backgroundColor).toBe('red')
@@ -709,7 +787,7 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid')
         const headers = grid?.querySelectorAll('th') as NodeListOf<HTMLElement>
@@ -740,7 +818,7 @@ describe('DataGrid', () => {
             ),
           })
 
-          await sleepAsync(50)
+          await flushUpdates()
 
           const grid = document.querySelector('shade-data-grid')
           const emptyState = grid?.querySelector('[data-testid="empty-state"]')
@@ -779,7 +857,7 @@ describe('DataGrid', () => {
             ),
           })
 
-          await sleepAsync(50)
+          await flushUpdates()
 
           const grid = document.querySelector('shade-data-grid')
           const cell = grid?.querySelector('td') as HTMLTableCellElement
@@ -817,7 +895,7 @@ describe('DataGrid', () => {
             ),
           })
 
-          await sleepAsync(50)
+          await flushUpdates()
 
           const grid = document.querySelector('shade-data-grid')
           const cell = grid?.querySelector('td') as HTMLTableCellElement
@@ -854,12 +932,12 @@ describe('DataGrid', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const grid = document.querySelector('shade-data-grid') as HTMLElement
         grid.remove()
 
-        await sleepAsync(10)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })

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

@@ -10,6 +10,35 @@ import { DataGridBody } from './body.js'
 import { DataGridFooter } from './footer.js'
 import { DataGridHeader } from './header.js'
 
+export type StringFilterConfig = { type: 'string' }
+export type NumberFilterConfig = { type: 'number' }
+export type BooleanFilterConfig = { type: 'boolean' }
+export type EnumFilterConfig = {
+  type: 'enum'
+  values: Array<{ label: string; value: string }>
+}
+export type DateFilterConfig = { type: 'date' }
+
+export type ColumnFilterConfig =
+  | StringFilterConfig
+  | NumberFilterConfig
+  | BooleanFilterConfig
+  | EnumFilterConfig
+  | DateFilterConfig
+
+/**
+ * Loosely typed find options used internally by filter components.
+ * Avoids generic entity types while supporting dynamic field access
+ * with explicit casts at each use site.
+ */
+export type FilterableFindOptions = {
+  top?: number
+  skip?: number
+  order?: Record<string, 'ASC' | 'DESC'>
+  filter?: Record<string, unknown>
+  select?: string[]
+}
+
 export type DataHeaderCells<Column extends string> = {
   [TKey in Column | 'default']?: (name: Column) => JSX.Element
 }
@@ -38,11 +67,17 @@ export interface DataGridProps<T, Column extends string> {
   /**
    * A list of custom header components to use
    */
-  headerComponents: DataHeaderCells<Column>
+  headerComponents?: DataHeaderCells<Column>
   /**
    * A list of custom row components to use
    */
-  rowComponents: DataRowCells<T, Column>
+  rowComponents?: DataRowCells<T, Column>
+
+  /**
+   * Filter configuration per column. Only columns with a config will show a filter button.
+   */
+  columnFilters?: { [K in Column]?: ColumnFilterConfig }
+
   /**
    * Optional autoFocus property to set the grid as focused
    */
@@ -96,20 +131,17 @@ export const DataGrid: <T, Column extends string>(
       backdropFilter: 'blur(12px) saturate(180%)',
       background: cssVariableTheme.action.activeBackground,
       color: cssVariableTheme.text.secondary,
-      height: '48px',
-      padding: '0 1.2em',
+      height: '36px',
+      padding: '0 0.6em',
       alignItems: 'center',
-      borderRadius: cssVariableTheme.shape.borderRadius.xs,
-      top: '2px',
+      top: '0',
       position: 'sticky',
-      fontVariant: 'all-petite-caps',
-      fontSize: '0.875rem',
+      fontSize: '0.75rem',
       fontWeight: cssVariableTheme.typography.fontWeight.semibold,
-      letterSpacing: '0.05em',
+      letterSpacing: '0.03em',
       textAlign: 'left',
       zIndex: '1',
-      boxShadow: cssVariableTheme.shadows.sm,
-      borderBottom: `2px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderBottom: `1px solid ${cssVariableTheme.action.subtleBorder}`,
       borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
     },
   },
@@ -156,6 +188,7 @@ export const DataGrid: <T, Column extends string>(
                       >
                         field={column}
                         findOptions={props.findOptions}
+                        filterConfig={props.columnFilters?.[column]}
                       />
                     )}
                   </th>

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

@@ -0,0 +1,142 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } 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 { BooleanFilter } from './boolean-filter.js'
+
+describe('BooleanFilter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
+    return new ObservableValue<FilterableFindOptions>(options)
+  }
+
+  const renderBooleanFilter = async (
+    findOptions: ObservableValue<FilterableFindOptions>,
+    field = 'isActive',
+    onClose = vi.fn(),
+  ) => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <BooleanFilter field={field} findOptions={findOptions} onClose={onClose} />,
+    })
+    await flushUpdates()
+    return { injector, onClose }
+  }
+
+  it('should render three options: True, False, Any', async () => {
+    const findOptions = createFindOptions()
+    await usingAsync((await renderBooleanFilter(findOptions)).injector, async () => {
+      const buttons = document.querySelectorAll('shade-segmented-control button[data-value]')
+      expect(buttons.length).toBe(3)
+      const values = Array.from(buttons).map((b) => b.getAttribute('data-value'))
+      expect(values).toEqual(['true', 'false', 'any'])
+    })
+  })
+
+  it('should select "any" when no filter is set', async () => {
+    const findOptions = createFindOptions()
+    await usingAsync((await renderBooleanFilter(findOptions)).injector, async () => {
+      const selected = document.querySelector('shade-segmented-control button[data-selected]')
+      expect(selected?.getAttribute('data-value')).toBe('any')
+    })
+  })
+
+  it('should select "true" when filter is $eq: true', async () => {
+    const findOptions = createFindOptions({ filter: { isActive: { $eq: true } } })
+    await usingAsync((await renderBooleanFilter(findOptions)).injector, async () => {
+      const selected = document.querySelector('shade-segmented-control button[data-selected]')
+      expect(selected?.getAttribute('data-value')).toBe('true')
+    })
+  })
+
+  it('should select "false" when filter is $eq: false', async () => {
+    const findOptions = createFindOptions({ filter: { isActive: { $eq: false } } })
+    await usingAsync((await renderBooleanFilter(findOptions)).injector, async () => {
+      const selected = document.querySelector('shade-segmented-control button[data-selected]')
+      expect(selected?.getAttribute('data-value')).toBe('false')
+    })
+  })
+
+  it('should set filter to $eq: true when "True" is clicked', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderBooleanFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const trueButton = document.querySelector(
+        'shade-segmented-control button[data-value="true"]',
+      ) as HTMLButtonElement
+      trueButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ 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)
+    await usingAsync(injector, async () => {
+      const falseButton = document.querySelector(
+        'shade-segmented-control button[data-value="false"]',
+      ) as HTMLButtonElement
+      falseButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ 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)
+    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()
+      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)
+    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' })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should reset skip to 0 when applying filter', async () => {
+    const findOptions = createFindOptions({ skip: 20 })
+    const { injector } = await renderBooleanFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const trueButton = document.querySelector(
+        'shade-segmented-control button[data-value="true"]',
+      ) as HTMLButtonElement
+      trueButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().skip).toBe(0)
+    })
+  })
+})

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

@@ -0,0 +1,45 @@
+import { createComponent, Shade } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { SegmentedControl } from '../../button-group.js'
+import type { FilterableFindOptions } from '../data-grid.js'
+
+type BooleanFilterValue = 'true' | 'false' | 'any'
+
+export const BooleanFilter = Shade<{
+  field: string
+  findOptions: ObservableValue<FilterableFindOptions>
+  onClose: () => void
+}>({
+  shadowDomName: 'data-grid-boolean-filter',
+  render: ({ props, useObservable }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+
+    const currentFilter = findOptions.filter?.[props.field] as { $eq?: boolean } | undefined
+    const currentValue: BooleanFilterValue =
+      currentFilter?.$eq === true ? 'true' : currentFilter?.$eq === false ? 'false' : 'any'
+
+    const applyFilter = (value: BooleanFilterValue) => {
+      const filter = { ...findOptions.filter }
+      if (value === 'any') {
+        delete filter[props.field]
+      } else {
+        filter[props.field] = { $eq: value === 'true' }
+      }
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    return (
+      <SegmentedControl
+        size="small"
+        value={currentValue}
+        onValueChange={(v) => applyFilter(v as BooleanFilterValue)}
+        options={[
+          { value: 'true', label: 'True' },
+          { value: 'false', label: 'False' },
+          { value: 'any', label: 'Any' },
+        ]}
+      />
+    )
+  },
+})