Version 0.9.1

CHANGELOG.md

@@ -5,23 +5,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.9.0] - 2026-02-20
+## [0.9.1] - 2026-02-14
 
-## Added
+### Changed
+- The structure of `IdentifiedFilterValue` is now the same as `ColumnFilter` from `@tanstack/react-table` to allow for easy integration 
+
+## [0.9.0] - 2026-02-14
+
+### Added
 - Search for `Select` and `MultiSelect`
 - Type ahead support for `Select` and `MultiSelect`npm
 - `Combobox` component
 - `FilterList` component for dynamically choosing and setting filters
 - `useSelectState`, `useMultiSelectState`, `useCombobox`, `useSingleSelection`, `useMultiSelection`
 - `useTypeAheadSearch` for getting the value of a timed type ahead search 
 
-## Changed
+### Changed
 - `useSearch` to require less parameter and only do a simple search and caching the result
 
-## Fixed
+### Fixed
 - imports in `TimePicker` and `DateTimeInput`
 
-## Security
+### Security
 - update packages
 
 ## [0.8.12] - 2026-02-15

package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "MPL-2.0",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "files": [
     "dist"
   ],
@@ -91,4 +91,4 @@
   "overrides": {
     "elliptic": "^6.6.1"
   }
-}
+}

src/components/user-interaction/data/FilterList.tsx

@@ -14,9 +14,10 @@ import { ComboboxOption } from '@/src/components/user-interaction/Combobox/Combo
 import { PopUpContext } from '../../layout/popup/PopUpContext'
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { FilterOperatorUtils } from './FilterOperator'
+import type { ColumnFilter } from '@tanstack/react-table'
 
-export interface IdentifierFilterValue extends FilterValue {
-  id: string,
+export interface IdentifierFilterValue extends ColumnFilter {
+  value: FilterValue,
 }
 
 export interface FilterListPopUpBuilderProps {
@@ -57,13 +58,13 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
 
   const valueWithEditState = useMemo(() => {
     let foundEditValue = false
-    for(const item of value) {
-      if(item.id === editState?.id) {
+    for (const item of value) {
+      if (item.id === editState?.id) {
         foundEditValue = true
         break
       }
     }
-    if(!foundEditValue && editState) {
+    if (!foundEditValue && editState) {
       return [...value, editState]
     }
     return value
@@ -86,12 +87,14 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
               <Combobox
                 onItemClick={(id) => {
                   const item = itemRecord[id]
-                  if(!item) return
+                  if (!item) return
                   const newValue: IdentifierFilterValue = {
                     id: item.id,
-                    dataType: item.dataType,
-                    operator: FilterOperatorUtils.getDefaultOperator(item.dataType),
-                    parameter: {}
+                    value: {
+                      dataType: item.dataType,
+                      operator: FilterOperatorUtils.getDefaultOperator(item.dataType),
+                      parameter: {}
+                    },
                   }
                   setEditState(newValue)
                   setIsOpen(false)
@@ -108,31 +111,31 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
           </PopUpContext.Consumer>
         </PopUp>
       </PopUpRoot>
-      {valueWithEditState.map(filterValue => {
-        const item = itemRecord[filterValue.id]
-        if(!item) return null
+      {valueWithEditState.map(columnFilter => {
+        const item = itemRecord[columnFilter.id]
+        if (!item) return null
         return (
           <PopUpRoot
-            key={filterValue.id}
-            isOpen={editState?.id === filterValue.id}
+            key={columnFilter.id}
+            isOpen={editState?.id === columnFilter.id}
             onIsOpenChange={isOpen => {
               if (!isOpen) {
-                const isEditStateValid = editState ? FilterValueUtils.isValid(editState) : false
-                if(isEditStateValid) {
-                  onValueChange(valueWithEditState.map(prevItem => prevItem.id === filterValue.id ? { ...prevItem, ...editState } : prevItem))
+                const isEditStateValid = editState ? FilterValueUtils.isValid(editState.value) : false
+                if (isEditStateValid) {
+                  onValueChange(valueWithEditState.map(prevItem => prevItem.id === columnFilter.id ? { ...prevItem, ...editState } : prevItem))
                 }
                 setEditState(undefined)
               } else {
-                const valueItem = value.find(prevItem => prevItem.id === filterValue.id)
-                if(!valueItem) return
+                const valueItem = value.find(prevItem => prevItem.id === columnFilter.id)
+                if (!valueItem) return
                 setEditState({ ...valueItem })
               }
             }}
           >
             <PopUpOpener>
               {({ toggleOpen, props, isOpen }) => (
                 <Button {...props} onClick={toggleOpen} color="primary" coloringStyle="tonal" size="sm">
-                  {item.label + ': ' + filterValueToLabel(filterValue, { tags: item.tags })}
+                  {item.label + ': ' + filterValueToLabel(columnFilter.value, { tags: item.tags })}
                   <ExpansionIcon isExpanded={isOpen} />
                 </Button>
               )}
@@ -141,10 +144,10 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
               <PopUpContext.Consumer>
                 {({ isOpen, setIsOpen }) => (
                   item.popUpBuilder({
-                    value: editState?.id === filterValue.id ? editState : filterValue,
-                    onValueChange: value => setEditState({ ...filterValue, ...value }),
+                    value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
+                    onValueChange: value => setEditState({ ...columnFilter, value }),
                     onRemove: () => {
-                      onValueChange(value.filter(prevItem => prevItem.id !== filterValue.id))
+                      onValueChange(value.filter(prevItem => prevItem.id !== columnFilter.id))
                       setEditState(undefined)
                     },
                     dataType: item.dataType,
@@ -158,14 +161,14 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
             ) : (
               <FilterPopUp
                 name={item.label}
-                value={editState?.id === filterValue.id ? editState : filterValue}
+                value={editState?.id === columnFilter.id ? editState.value : columnFilter.value}
                 dataType={item.dataType}
                 tags={item.tags}
                 onValueChange={value => {
-                  setEditState({ ...filterValue, ...value })
+                  setEditState({ ...columnFilter, value })
                 }}
                 onRemove={() => {
-                  onValueChange(value.filter(prevItem => prevItem.id !== filterValue.id))
+                  onValueChange(value.filter(prevItem => prevItem.id !== columnFilter.id))
                   setEditState(undefined)
                 }}
               />

stories/Layout/Table/FilterListTable.stories.tsx

@@ -74,7 +74,7 @@ const AgeFilterPopUp = ({ value, onValueChange, onRemove, name }: FilterListPopU
               onValueChange({ ...value, parameter: { ...parameter, minNumber: newRange[0], maxNumber: newRange[1] } })
             }}
             compareFunction={(a, b) => {
-              if(a === null || b === null) return false
+              if (a === null || b === null) return false
               return a[0] === b[0] && a[1] === b[1]
             }}
           >
@@ -141,9 +141,9 @@ function filterData(data: Row[], filters: IdentifierFilterValue[]): Row[] {
   return data.filter(row => {
     return filters.every(f => {
       const rowValue = row[f.id as keyof Row]
-      const fn = FilterFunctions[f.dataType as DataType]
+      const fn = FilterFunctions[f.value.dataType as DataType]
       if (!fn) return true
-      return fn(rowValue, f.operator, f.parameter)
+      return fn(rowValue, f.value.operator, f.value.parameter)
     })
   })
 }

stories/User Interaction/MultiSelect/MultiSelect.stories.tsx

@@ -43,9 +43,9 @@ export const multiSelect: Story = {
 }
 
 export interface User {
-  uuid: string
-  name: string
-  email: string
+  uuid: string,
+  name: string,
+  email: string,
 }
 
 const users: User[] = [

stories/User Interaction/Select/Select.stories.tsx

@@ -44,9 +44,9 @@ export const select: Story = {
 }
 
 export interface User {
-  uuid: string
-  name: string
-  email: string
+  uuid: string,
+  name: string,
+  email: string,
 }
 
 const users: User[] = [