@furystack/shades-common-components 12.3.0 → 12.5.0

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

@@ -1,29 +1,27 @@
-import type { FilterType, FindOptions } from '@furystack/core'
+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 { sleepAsync } from '@furystack/utils'
-import { collapse, expand } from '../animations.js'
-import { Button } from '../button.js'
-import { Form } from '../form.js'
+import { ToggleButton } from '../button-group.js'
+import { arrowDown, arrowUp, arrowUpDown, filter as filterIcon } from '../icons/icon-definitions.js'
 import { Icon } from '../icons/icon.js'
-import { arrowDown, arrowUp, arrowUpDown, close as closeIcon, search as searchIcon } from '../icons/icon-definitions.js'
-import { Input } from '../inputs/input.js'
-
-export interface DataGridHeaderProps<T, Column extends string> {
+import type { ColumnFilterConfig, FilterableFindOptions } from './data-grid.js'
+import { BooleanFilter } from './filters/boolean-filter.js'
+import { DateFilter } from './filters/date-filter.js'
+import { EnumFilter } from './filters/enum-filter.js'
+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> = {
   field: Column
   findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
-}
-
-export interface DataGridHeaderState<T, K extends keyof T> {
-  findOptions: FindOptions<T, K[]>
-  isSearchOpened: boolean
-  updateSearchValue: (value: string) => void
+  filterConfig?: ColumnFilterConfig
 }
 
 export const OrderButton = Shade<{
   field: string
-  findOptions: ObservableValue<FindOptions<any, any[]>>
+  findOptions: ObservableValue<FilterableFindOptions>
 }>({
   shadowDomName: 'data-grid-order-button',
   css: {
@@ -35,14 +33,15 @@ export const OrderButton = Shade<{
     const currentOrder = Object.keys(findOptions.order || {})[0]
     const currentOrderDirection = Object.values(findOptions.order || {})[0]
     return (
-      <Button
+      <ToggleButton
         title="Change order"
-        variant="outlined"
-        color={currentOrder === props.field ? 'info' : undefined}
+        pressed={currentOrder === props.field}
+        size="small"
+        value={props.field}
         onclick={(ev) => {
           ev.stopPropagation()
           let newDirection: 'ASC' | 'DESC' = 'ASC'
-          const newOrder: { [K in keyof any]: 'ASC' | 'DESC' } = {}
+          const newOrder: Record<string, 'ASC' | 'DESC'> = {}
 
           if (currentOrder === props.field) {
             newDirection = currentOrderDirection === 'ASC' ? 'DESC' : 'ASC'
@@ -56,220 +55,133 @@ export const OrderButton = Shade<{
       >
         {(currentOrder === props.field &&
           (currentOrderDirection === 'ASC' ? (
-            <Icon icon={arrowDown} size={16} />
+            <Icon icon={arrowDown} size={14} />
           ) : (
-            <Icon icon={arrowUp} size={16} />
-          ))) || <Icon icon={arrowUpDown} size={16} />}
-      </Button>
+            <Icon icon={arrowUp} size={14} />
+          ))) || <Icon icon={arrowUpDown} size={14} />}
+      </ToggleButton>
     )
   },
 })
 
-const SearchButton = Shade<{
-  fieldName: string
+const FilterButton = Shade<{
+  field: string
+  findOptions: ObservableValue<FilterableFindOptions>
   onclick: () => void
-  findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
-  shadowDomName: 'data-grid-search-button',
+  shadowDomName: 'data-grid-filter-button',
   css: {
     display: 'inline-block',
   },
   render: ({ props, useObservable }) => {
-    const [findOptions] = useObservable('currentValue', props.findOptions, {
-      filter: (newValue) => {
-        return !!newValue.filter?.[props.fieldName]
-      },
-    })
+    const [findOptions] = useObservable('currentValue', props.findOptions)
 
-    const filterValue =
-      (findOptions.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>)?.$regex || ''
+    const hasActiveFilter = !!findOptions.filter?.[props.field]
 
     return (
-      <Button
+      <ToggleButton
         type="button"
         title="Filter"
-        variant="outlined"
-        color={filterValue ? 'info' : undefined}
-        onclick={props.onclick}
-      >
-        <Icon icon={searchIcon} size={16} />
-      </Button>
-    )
-  },
-})
-
-const SearchForm = Shade<{
-  onSubmit: (newValue: string) => void
-  onClear: () => void
-  fieldName: string
-  findOptions: ObservableValue<FindOptions<any, any[]>>
-}>({
-  shadowDomName: 'data-grid-search-form',
-  css: {
-    display: 'block',
-    '& .search-form': {
-      display: 'flex',
-      width: '100%',
-      overflow: 'hidden',
-      height: '0px',
-      justifyContent: 'space-around',
-      opacity: '0',
-    },
-    '& .search-form-actions': {
-      display: 'flex',
-      width: '64px',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '8px',
-    },
-  },
-  render: ({ props, useObservable }) => {
-    type SearchSubmitType = { searchValue: string }
-
-    const [findOptions] = useObservable('currentValue', props.findOptions, {
-      filter: (newValue, lastValue) => {
-        const newFilter = newValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
-        const lastFilter = lastValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
-        return newFilter?.$regex !== lastFilter?.$regex
-      },
-    })
-
-    const currentValue = (findOptions.filter?.[props.fieldName] as FilterType<Record<string, string>>)?.$regex || ''
-
-    return (
-      <Form<SearchSubmitType>
-        className="search-form"
-        validate={(data): data is SearchSubmitType =>
-          typeof (data as SearchSubmitType).searchValue?.length === 'number'
-        }
-        onSubmit={({ searchValue }) => {
-          props.onSubmit(searchValue)
+        size="small"
+        value={props.field}
+        pressed={hasActiveFilter}
+        onclick={(ev) => {
+          ev.stopPropagation()
+          props.onclick()
         }}
       >
-        <Input
-          placeholder={props.fieldName}
-          autofocus
-          labelTitle={`${props.fieldName}`}
-          name="searchValue"
-          value={typeof currentValue === 'string' ? currentValue : ''}
-          labelProps={{
-            style: { padding: '0px 2em' },
-          }}
-        />
-        <div className="search-form-actions">
-          <Button
-            type="reset"
-            variant="outlined"
-            onclick={(ev) => {
-              ev.preventDefault()
-              ev.stopPropagation()
-              props.onClear()
-            }}
-          >
-            <Icon icon={closeIcon} size={16} />
-          </Button>
-          <Button variant="outlined" type="submit">
-            <Icon icon={searchIcon} size={16} />
-          </Button>
-        </div>
-      </Form>
+        <Icon icon={filterIcon} size={14} />
+      </ToggleButton>
     )
   },
 })
 
+const renderFilterComponent = (
+  filterConfig: ColumnFilterConfig,
+  field: string,
+  findOptions: ObservableValue<FilterableFindOptions>,
+  onClose: () => void,
+): JSX.Element => {
+  switch (filterConfig.type) {
+    case 'number':
+      return <NumberFilter field={field} findOptions={findOptions} onClose={onClose} />
+    case 'boolean':
+      return <BooleanFilter field={field} findOptions={findOptions} onClose={onClose} />
+    case 'enum':
+      return <EnumFilter field={field} values={filterConfig.values} findOptions={findOptions} onClose={onClose} />
+    case 'date':
+      return <DateFilter field={field} findOptions={findOptions} onClose={onClose} />
+    case 'string':
+      return <StringFilter field={field} findOptions={findOptions} onClose={onClose} />
+    default: {
+      const _exhaustive: never = filterConfig
+      throw new Error(`Unknown filter type: ${(_exhaustive as ColumnFilterConfig).type}`)
+    }
+  }
+}
+
 export const DataGridHeader: <T, Column extends string>(
   props: DataGridHeaderProps<T, Column>,
   children: ChildrenList,
-  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>,
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'data-grid-header',
   css: {
     display: 'block',
+    position: 'relative',
     '& .header-content': {
       display: 'flex',
       width: '100%',
-      height: '48px',
+      height: '36px',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: '12px',
+      gap: '8px',
       overflow: 'hidden',
     },
     '& .header-field-name': {
-      fontWeight: '600',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
     },
     '& .header-controls': {
       display: 'flex',
-      justifyContent: 'center',
       alignItems: 'center',
-      gap: '4px',
+      gap: '2px',
+      flexShrink: '0',
     },
   },
-  render: ({ props, useObservable, useState, useRef }) => {
-    const searchFormRef = useRef<HTMLElement>('searchForm')
-    const headerContentRef = useRef<HTMLDivElement>('headerContent')
-
-    const [, setIsSearchOpened] = useState('isSearchOpened', false)
-
-    const openSearch = () => {
-      setIsSearchOpened(true)
-      const searchForm = searchFormRef.current?.querySelector('.search-form') as HTMLElement | null
-      const headerContent = headerContentRef.current
-      if (!searchForm || !headerContent) return
-      searchForm.style.display = 'flex'
-      void expand(searchForm).then(async () => {
-        await sleepAsync(100)
-        searchForm.querySelector('input')?.focus()
-      })
-      void collapse(headerContent)
-    }
-
-    const closeSearch = () => {
-      setIsSearchOpened(false)
-      const searchForm = searchFormRef.current?.querySelector('.search-form') as HTMLElement | null
-      const headerContent = headerContentRef.current
-      if (!searchForm || !headerContent) return
-      void collapse(searchForm)
-      void expand(headerContent)
-    }
+  render: ({ props, useState }) => {
+    const [isFilterOpen, setIsFilterOpen] = useState('isFilterOpen', false)
 
-    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
-
-    const updateSearchValue = (value?: string) => {
-      if (value) {
-        const newSettings = {
-          ...findOptions,
-          filter: {
-            ...findOptions.filter,
-            [props.field]: { $regex: value },
-          },
-        } as typeof findOptions
-        setFindOptions(newSettings)
-      } else {
-        const { [props.field]: _, ...newFilter } = findOptions.filter || {}
-        setFindOptions({ ...findOptions, filter: newFilter })
-      }
-
-      closeSearch()
-    }
+    const closeFilter = () => setIsFilterOpen(false)
 
     return (
       <>
-        <div ref={searchFormRef} style={{ display: 'contents' }}>
-          <SearchForm
-            onSubmit={updateSearchValue}
-            onClear={updateSearchValue}
-            fieldName={props.field}
-            findOptions={props.findOptions}
-          />
-        </div>
-        <div ref={headerContentRef} className="header-content">
+        <div className="header-content">
           <div className="header-field-name">{props.field}</div>
           <div className="header-controls">
-            <SearchButton onclick={openSearch} findOptions={props.findOptions} fieldName={props.field} />
-
-            <OrderButton field={props.field} findOptions={props.findOptions} />
+            {props.filterConfig && (
+              <FilterButton
+                onclick={() => setIsFilterOpen(!isFilterOpen)}
+                findOptions={props.findOptions as ObservableValue<FilterableFindOptions>}
+                field={props.field}
+              />
+            )}
+            <OrderButton
+              field={props.field}
+              findOptions={props.findOptions as ObservableValue<FilterableFindOptions>}
+            />
           </div>
         </div>
+        {isFilterOpen && props.filterConfig && (
+          <FilterDropdown onClose={closeFilter}>
+            {renderFilterComponent(
+              props.filterConfig,
+              props.field,
+              props.findOptions as ObservableValue<FilterableFindOptions>,
+              closeFilter,
+            )}
+          </FilterDropdown>
+        )}
       </>
     )
   },

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

@@ -1,2 +1,3 @@
 export * from './data-grid.js'
 export * from './selection-cell.js'
+export * from './filters/index.js'

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

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { CollectionService } from '../../services/collection-service.js'
 import { SelectionCell } from './selection-cell.js'
@@ -24,7 +24,7 @@ describe('SelectionCell', () => {
       rootElement: root,
       jsxElement: <SelectionCell entry={entry} service={service} />,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       cell: root.querySelector('shades-data-grid-selection-cell') as HTMLElement,
@@ -76,12 +76,12 @@ describe('SelectionCell', () => {
           expect(getCheckbox()?.checked).toBe(false)
 
           service.selection.setValue([entry])
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(getCheckbox()?.checked).toBe(true)
 
           service.selection.setValue([])
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(getCheckbox()?.checked).toBe(false)
         })
@@ -109,7 +109,7 @@ describe('SelectionCell', () => {
 
           const checkbox = getCheckbox()
           checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(service.selection.getValue()).toContain(entry)
         })
@@ -125,7 +125,7 @@ describe('SelectionCell', () => {
 
           const checkbox = getCheckbox()
           checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(service.selection.getValue()).not.toContain(entry)
         })
@@ -140,7 +140,7 @@ describe('SelectionCell', () => {
         await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
           const checkbox = getCheckbox()
           checkbox?.dispatchEvent(new Event('change', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(service.selection.getValue()).toContain(entry)
           expect(service.selection.getValue()).toContain(otherEntry)

package/src/components/drawer/drawer-toggle-button.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { LayoutService } from '../../services/layout-service.js'
 import { DrawerToggleButton } from './drawer-toggle-button.js'
@@ -37,7 +37,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('shade-drawer-toggle-button')
         expect(element).not.toBeNull()
         expect(element?.tagName.toLowerCase()).toBe('shade-drawer-toggle-button')
@@ -56,7 +56,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('button')
         expect(button).not.toBeNull()
       })
@@ -74,7 +74,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const hamburger = document.querySelector('.hamburger')
         expect(hamburger).not.toBeNull()
 
@@ -102,7 +102,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('[data-testid="drawer-toggle-left"]') as HTMLButtonElement
         expect(button).not.toBeNull()
         // Button is rendered, aria-label is set in JSX (may not be visible in JSDOM)
@@ -121,7 +121,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" ariaLabel="Toggle navigation menu" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('[data-testid="drawer-toggle-left"]') as HTMLButtonElement
         expect(button).not.toBeNull()
         // Button is rendered with custom ariaLabel prop (may not be visible in JSDOM)
@@ -143,7 +143,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('[data-testid="drawer-toggle-left"]') as HTMLButtonElement
         expect(button).not.toBeNull()
 
@@ -153,7 +153,7 @@ describe('DrawerToggleButton component', () => {
 
         // Close drawer
         layoutService.setDrawerOpen('left', false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Verify hamburger doesn't have open class when drawer is closed
         hamburger = document.querySelector('.hamburger')
@@ -173,7 +173,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('button')
         expect(button?.getAttribute('type')).toBe('button')
       })
@@ -196,19 +196,19 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
 
         // Click the button
         const button = document.querySelector('button') as HTMLButtonElement
         button.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(layoutService.drawerState.getValue().left?.open).toBe(false)
 
         // Click again
         button.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
       })
@@ -229,13 +229,13 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="right" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(layoutService.drawerState.getValue().right?.open).toBe(true)
 
         // Click the button
         const button = document.querySelector('button') as HTMLButtonElement
         button.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(layoutService.drawerState.getValue().right?.open).toBe(false)
       })
@@ -253,7 +253,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Should not throw when clicking even though drawer isn't initialized
         const button = document.querySelector('button') as HTMLButtonElement
@@ -278,7 +278,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const hamburger = document.querySelector('.hamburger')
         expect(hamburger?.classList.contains('open')).toBe(false)
       })
@@ -299,7 +299,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const hamburger = document.querySelector('.hamburger')
         expect(hamburger?.classList.contains('open')).toBe(true)
       })
@@ -320,13 +320,13 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         let hamburger = document.querySelector('.hamburger')
         expect(hamburger?.classList.contains('open')).toBe(true)
 
         // Close drawer via LayoutService
         layoutService.setDrawerOpen('left', false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         hamburger = document.querySelector('.hamburger')
         expect(hamburger?.classList.contains('open')).toBe(false)
@@ -347,7 +347,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="left" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('[data-testid="drawer-toggle-left"]')
         expect(button).not.toBeNull()
       })
@@ -365,7 +365,7 @@ describe('DrawerToggleButton component', () => {
           jsxElement: <DrawerToggleButton position="right" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = document.querySelector('[data-testid="drawer-toggle-right"]')
         expect(button).not.toBeNull()
       })