frame.select 1.2.3 → 1.2.5

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,iBAAS,GAAG,sBAwMX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAEnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,iBAAS,GAAG,sBAkNX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -1,4 +1,3 @@
-import { createColumnHelper } from '@tanstack/react-table';
 import './App.css';
 import { useState } from 'react';
 import React from 'react';
@@ -6,8 +5,6 @@ import { BrandList } from './components/BrandList';
 import { FrameList } from './components/FrameList';
 function App() {
     const [brand, setBrand] = useState('');
-    const [filterWidth, setFilterWidth] = useState('');
-    const [filterHeight, setFilterHeight] = useState('');
     const brands = [
         {
             name: 'Adidas',
@@ -80,7 +77,7 @@ function App() {
         'AFF000000000000000TMA4750190010',
         'AFF000000000000000TMA4750190011',
         'AFF000000000000000TMA4750190012',
-        'ADI000000000000000TODDC50190012',
+        'ADI000000000000000TXDDC50190012',
     ];
     const frameNike = [
         'AFF000000000000000TMA4750190000',
@@ -140,19 +137,19 @@ function App() {
             rest: stripLeadingZeros(frame.substring(28, 33)),
         }));
     }
-    const brandColumnHelper = createColumnHelper();
-    const brandColumns = [
-        brandColumnHelper.accessor((row) => row.description ?? '', {
-            header: 'description',
-            size: 300,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-    ];
-    const _extraBrandColumns = [
-        {
-            column: brandColumns[0],
-        },
-    ];
+    // const brandColumnHelper = createColumnHelper<TBrandObj>();
+    // const brandColumns = [
+    //   brandColumnHelper.accessor((row) => row.description ?? '', {
+    //     header: 'description',
+    //     size: 300,
+    //     cell: (info) => <div>{info.getValue()}</div>,
+    //   }),
+    // ];
+    // const _extraBrandColumns: TColumn<TBrandObj>[] = [
+    //   {
+    //     column: brandColumns[0],
+    //   },
+    // ];
     const onClickBrand = (cell) => {
         const brand = brands.find((b) => b.name === cell.row.original.name);
         if (brand) {
@@ -168,8 +165,12 @@ function App() {
         React.createElement("h2", null,
             "Frame List for ",
             brand),
-        React.createElement(FrameList, { frameList: convertFrames(brand, frames), onClick: onClickFrame, 
-            // extraColumns={extraFrameColumns}
-            style: { border: '1px solid black', padding: '10px' } })));
+        React.createElement(FrameList, { frameList: convertFrames(brand, frames), onClick: onClickFrame, slSize: 120, slFormat: (value) => {
+                return React.createElement("div", null, value);
+            }, bwSize: 160, bwFormat: (value) => {
+                return React.createElement("span", { style: { fontWeight: 'bold' } }, value);
+            }, formSize: 320, formFormat: (value) => {
+                return React.createElement("div", { style: { color: 'red' } }, value);
+            } })));
 }
 export default App;

package/dist/components/BrandList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrandList.d.ts","sourceRoot":"","sources":["../../src/components/BrandList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAed"}
+{"version":3,"file":"BrandList.d.ts","sourceRoot":"","sources":["../../src/components/BrandList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAkBd"}

package/dist/components/BrandList.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ItemList } from './ItemList';
 export function BrandList(props) {
-    return (React.createElement(ItemList, { itemList: props.brandList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns, style: props.style, backgroundColor: props.backgroundColor, scrollbarWidth: 50, height: 300, placeholder: "Brands", defaultHeader: "Brand" }));
+    const extraBrandColumns = [];
+    return (React.createElement(ItemList, { itemList: props.brandList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns ? props.extraColumns : extraBrandColumns, style: props.style, backgroundColor: props.backgroundColor, scrollbarWidth: 50, height: 300, placeholder: "Brands", defaultHeader: "Brand", testId: "name" }));
 }

package/dist/components/FrameList.d.ts

@@ -7,6 +7,12 @@ export declare function FrameList(props: {
     frameList: TFrameObj[];
     onClick?: (cell: Cell<TFrameObj, unknown>, index: number) => void;
     renderItem?: (item: string) => React.ReactNode;
+    slSize?: number;
+    slFormat?: (value: string) => React.ReactNode;
+    bwSize?: number;
+    bwFormat?: (value: string) => React.ReactNode;
+    formSize?: number;
+    formFormat?: (value: string) => React.ReactNode;
     extraColumns?: TColumn<TFrameObj>[];
     style?: React.CSSProperties;
 }): JSX.Element;

package/dist/components/FrameList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrameList.d.ts","sourceRoot":"","sources":["../../src/components/FrameList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,SAAS,EACV,MAAM,SAAS,CAAC;AAGjB,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAuGd"}
+{"version":3,"file":"FrameList.d.ts","sourceRoot":"","sources":["../../src/components/FrameList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,SAAS,EACV,MAAM,SAAS,CAAC;AAGjB,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAkHd"}

package/dist/components/FrameList.js

@@ -29,58 +29,37 @@ export function FrameList(props) {
         return filterMatches(item, scheibenFormKey, filter);
     }
     const frameColumnHelper = createColumnHelper();
-    const frameColumns = [
-        frameColumnHelper.accessor((row) => row[scheibenLaengeKey].toString(), {
-            header: scheibenLaengeKey,
-            size: 120,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-        frameColumnHelper.accessor((row) => row[brueckenWeiteKey].toString(), {
-            header: brueckenWeiteKey,
-            size: 120,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-        frameColumnHelper.accessor((row) => row[scheibenFormKey].toString(), {
-            header: scheibenFormKey,
-            size: 120,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-    ];
-    const extraFrameColumns = [
-        {
-            column: frameColumns[0],
-            filter: {
-                property: scheibenLaengeKey,
-                filter: filterHeight,
-                setFilter: setFilterHeight,
-                filterMatches: filterHeightMatches,
-                placeholder: 'Scheibenlänge',
-            },
-        },
-        {
-            column: frameColumns[1],
+    function createColumn(key, filterHook, filterMatches, placeholder, colSize = 120, colFormat) {
+        return {
+            column: frameColumnHelper.accessor((row) => row[key].toString(), {
+                header: key,
+                size: colSize,
+                cell: (info) => {
+                    const value = info.getValue();
+                    return colFormat ? colFormat(value) : React.createElement("div", null, value); // Handle undefined case
+                },
+            }),
             filter: {
-                property: brueckenWeiteKey,
-                filter: filterWidth,
-                setFilter: setFilterWidth,
-                filterMatches: filterWidthMatches,
-                placeholder: 'Brückenweite',
+                property: key,
+                filterHook: filterHook,
+                filterMatches,
+                placeholder,
             },
-        },
-        {
-            column: frameColumns[2],
-            filter: {
-                property: scheibenFormKey,
-                filter: filterForm,
-                setFilter: setFilterForm,
-                filterMatches: filterFormMatches,
-                placeholder: 'Scheibenform',
-            },
-        },
+        };
+    }
+    const scheibenLaenge = createColumn(scheibenLaengeKey, { value: filterHeight, setValue: setFilterHeight }, filterHeightMatches, 'Scheibenlänge', props.slSize, props.slFormat);
+    const brueckenWeite = createColumn(brueckenWeiteKey, { value: filterWidth, setValue: setFilterWidth }, filterWidthMatches, 'Brückenweite', props.bwSize, props.bwFormat);
+    const scheibenForm = createColumn(scheibenFormKey, { value: filterForm, setValue: setFilterForm }, filterFormMatches, 'Scheibenform', props.formSize, props.formFormat);
+    const extraFrameColumns = [
+        scheibenLaenge,
+        brueckenWeite,
+        scheibenForm,
     ];
-    return (React.createElement(ItemList, { itemList: props.frameList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns ? props.extraColumns : extraFrameColumns, style: props.style, 
+    return (React.createElement(ItemList, { itemList: props.frameList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns && props.extraColumns.length > 0
+            ? props.extraColumns
+            : extraFrameColumns, style: props.style, 
         // backgroundColor="lightgreen"
         // scrollbarWidth={100}
         // height={400}
-        placeholder: "Modellnummer", defaultHeader: "Frame" }));
+        placeholder: "Modellnummer", defaultHeader: "Frame", testId: "frame" }));
 }

package/dist/components/ItemFilter.js

@@ -26,14 +26,14 @@ import React from 'react';
  */
 const ItemFilter = (props) => {
     function handleInputChange(e) {
-        props.itemFilter.setFilter(e.target.value);
+        props.itemFilter.filterHook.setValue(e.target.value);
     }
     function clearFilter() {
-        props.itemFilter.setFilter('');
+        props.itemFilter.filterHook.setValue('');
     }
     return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement("input", { id: props.id, "data-testid": `input.filter.${props.id}`, type: "text", placeholder: props.itemFilter.placeholder ?? 'Items', value: props.itemFilter.filter || '', onChange: handleInputChange, style: { width: '80%' } }),
-        props.itemFilter.filter !== '' ? (React.createElement(Button, { "data-testid": `${props.tableId}.button.clearFilter.${props.id}`, style: { minWidth: 'unset', padding: '1px' }, onClick: clearFilter },
+        React.createElement("input", { id: props.id, "data-testid": `input.filter.${props.id}`, type: "text", placeholder: props.itemFilter.placeholder ?? 'Items', value: props.itemFilter.filterHook.value || '', onChange: handleInputChange, style: { width: '80%' } }),
+        props.itemFilter.filterHook.value !== '' ? (React.createElement(Button, { "data-testid": `${props.tableId}.button.clearFilter.${props.id}`, style: { minWidth: 'unset', padding: '1px' }, onClick: clearFilter },
             React.createElement(CancelPresentationIcon, null))) : (React.createElement("div", null))));
 };
 export default ItemFilter;

package/dist/components/ItemList.d.ts

@@ -10,8 +10,10 @@ export declare function ItemList<T extends TItem>(props: {
     style?: React.CSSProperties;
     backgroundColor?: string;
     scrollbarWidth?: number;
+    mainColumnWidth?: number;
     height?: number | string;
     placeholder?: string;
     defaultHeader?: string;
+    testId: string;
 }): JSX.Element;
 //# sourceMappingURL=ItemList.d.ts.map

package/dist/components/ItemList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemList.d.ts","sourceRoot":"","sources":["../../src/components/ItemList.tsx"],"names":[],"mappings":"AAUA,OAAO,EAIL,IAAI,EAKL,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAe,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,QAAQ,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE;IAC/C,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,GAAG,CAAC,OAAO,CA+Yd"}
+{"version":3,"file":"ItemList.d.ts","sourceRoot":"","sources":["../../src/components/ItemList.tsx"],"names":[],"mappings":"AAUA,OAAO,EAIL,IAAI,EAML,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAe,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,QAAQ,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE;IAC/C,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,GAAG,CAAC,OAAO,CAsZd"}

package/dist/components/ItemList.js

@@ -5,7 +5,7 @@ import { useMemo, useState, useCallback } from 'react';
 import React from 'react';
 export function ItemList(props) {
     'use no memo'; // For React Compiler compatibility with TanStack Table
-    const { itemList, backgroundColor = 'lightgrey', scrollbarWidth = 50, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
+    const { itemList, backgroundColor = 'lightgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
     const scrollbarStyles = {
         '&::-webkit-scrollbar': {
             width: `${scrollbarWidth}px`,
@@ -35,14 +35,13 @@ export function ItemList(props) {
     }, []);
     const itemFilter = useMemo(() => ({
         property: 'name',
-        filter,
-        setFilter,
-        filterMatches,
+        filterHook: { value: filter, setValue: setFilter },
+        filterMatches: filterMatches,
         placeholder,
     }), [filter, filterMatches, placeholder]);
     const serializedExtraColumns = useMemo(() => JSON.stringify(props.extraColumns), [props.extraColumns]);
     const extraCols = useMemo(() => {
-        if (props.extraColumns) {
+        if (props.extraColumns && props.extraColumns.length > 0) {
             return props.extraColumns.filter((col) => col !== undefined);
         }
         else {
@@ -57,11 +56,11 @@ export function ItemList(props) {
         }
         let filteredList = itemList;
         if (itemFilter.filterMatches) {
-            filteredList = itemList.filter((item) => itemFilter.filterMatches(item, itemFilter.filter));
+            filteredList = itemList.filter((item) => itemFilter.filterMatches(item, itemFilter.filterHook.value));
         }
         extraCols.forEach((col) => {
             if (col?.filter) {
-                filteredList = filteredList.filter((item) => col.filter?.filterMatches(item, col.filter.filter));
+                filteredList = filteredList.filter((item) => col.filter?.filterMatches(item, col.filter.filterHook.value));
             }
         });
         return filteredList;
@@ -97,7 +96,7 @@ export function ItemList(props) {
         const baseWidth = (extraCol?.column.size || 100) + clearButtonWidth;
         return baseWidth;
     }, []);
-    function displayHeader(header) {
+    const displayHeader = useCallback((header) => {
         let filter = React.createElement("div", null);
         if (header.id === defaultHeader) {
             if (itemFilter) {
@@ -124,7 +123,45 @@ export function ItemList(props) {
             });
         }
         return filter;
-    }
+    }, [defaultHeader, itemFilter, extraCols]);
+    const displayHeaderCell = useCallback((header, baseWidth) => {
+        return (React.createElement(TableCell, { "data-testid": `${defaultHeader}.th.cell.${header.id}`, key: header.id, sx: {
+                backgroundColor,
+                width: baseWidth,
+                borderRight: '1px solid #999',
+                paddingLeft: '16px',
+                paddingRight: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                boxSizing: 'border-box',
+            } }, displayHeader(header)));
+    }, [backgroundColor, defaultHeader, displayHeader]);
+    const displayBodyCell = useCallback((cell, index, width, bgColor) => {
+        const cll = cell.getValue();
+        // Calculate width to match header cells exactly
+        let baseWidth;
+        if (cell.column.columnDef.header === defaultHeader) {
+            baseWidth = width;
+        }
+        else {
+            // Check if this extra column has a filter
+            const extraCol = extraCols.find((col) => col && cell.column.columnDef.header === col.column.header);
+            baseWidth = cellWidth(extraCol);
+        }
+        return (React.createElement(TableCell, { "data-testid": `${defaultHeader}.tb.cell.${index}`, style: { backgroundColor: bgColor }, sx: {
+                borderRight: '1px solid #999',
+                paddingLeft: '16px',
+                paddingRight: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                width: baseWidth,
+                // minWidth: baseWidth,
+                // maxWidth: baseWidth,
+                boxSizing: 'border-box',
+            }, key: cell.id }, cell.column.columnDef.header === defaultHeader ? (React.createElement(Button, { "data-testid": `${defaultHeader}.tb.cell.${cell.row.original[props.testId]}.button`, onClick: onClick(cell, cell.row.index) }, props.renderItem
+            ? props.renderItem(cll)
+            : flexRender(cell.column.columnDef.cell, cell.getContext()))) : props.renderItem ? (props.renderItem(cll)) : (flexRender(cell.column.columnDef.cell, cell.getContext()))));
+    }, [cellWidth, defaultHeader, extraCols, onClick, props]);
     const table = useReactTable({
         data: filteredItems,
         columns,
@@ -138,75 +175,40 @@ export function ItemList(props) {
             maxSize: 120,
         },
     });
-    const paginatedRows = table.getRowModel().rows;
     // Calculate total table width for consistent alignment
     const totalTableWidth = useMemo(() => {
         let width = 130; // Default header width
         extraCols.forEach((col) => {
-            if (col && col.filter) {
-                width += 120; // Width for filtered extra columns
-            }
-            else if (col) {
-                width += 100; // Width for non-filtered extra columns
+            if (col) {
+                width += col.column.size || 120;
+                if (col.filter) {
+                    // add extra width for filter clear button
+                    width += 20;
+                }
             }
         });
         return width;
     }, [extraCols]);
-    const renderRows = React.useCallback((rows, bgColor = backgroundColor) => {
-        function renderItem(cell) {
-            const cll = cell.getValue();
-            return React.createElement("div", null, cll);
-        }
-        function displayBody(cell, index) {
-            let cellContent = React.createElement("div", null);
-            const cll = cell.getValue();
-            // Calculate width to match header cells exactly
+    const renderHeader = React.useCallback((headerGroups, width) => {
+        return headerGroups.map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+            // Calculate width accounting for ItemFilter with CancelPresentationIcon
             let baseWidth;
-            if (cell.column.columnDef.header === defaultHeader) {
-                baseWidth = 160;
+            if (header.id === defaultHeader) {
+                baseWidth = width;
             }
             else {
                 // Check if this extra column has a filter
-                const extraCol = extraCols.find((col) => col && cell.column.columnDef.header === col.column.header);
+                const extraCol = extraCols.find((col) => col && header.id === col.column.header);
                 baseWidth = cellWidth(extraCol);
             }
-            const minWidth = baseWidth;
-            const maxWidth = baseWidth;
-            if (cell.column.columnDef.header === defaultHeader) {
-                cellContent = (React.createElement(TableCell, { "data-testid": `${defaultHeader}.tb.${index}`, style: { backgroundColor: bgColor }, sx: {
-                        borderRight: '1px solid #999',
-                        paddingLeft: '16px',
-                        paddingRight: 0,
-                        paddingTop: 0,
-                        paddingBottom: 0,
-                        width: baseWidth,
-                        minWidth: minWidth,
-                        maxWidth: maxWidth,
-                        boxSizing: 'border-box',
-                    }, key: cell.id },
-                    React.createElement(Button, { onClick: onClick(cell, cell.row.index) }, props.renderItem
-                        ? props.renderItem(cll)
-                        : flexRender(cell.column.columnDef.cell, cell.getContext()))));
-            }
-            else {
-                cellContent = (React.createElement(TableCell, { "data-testid": `${defaultHeader}.tb.${index}`, style: { backgroundColor: bgColor }, sx: {
-                        borderRight: '1px solid #999',
-                        paddingLeft: '16px',
-                        paddingRight: 0,
-                        paddingTop: 0,
-                        paddingBottom: 0,
-                        width: baseWidth,
-                        minWidth: minWidth,
-                        maxWidth: maxWidth,
-                        boxSizing: 'border-box',
-                    }, key: cell.id }, props.renderItem ? props.renderItem(cll) : renderItem(cell)));
-            }
-            return cellContent;
-        }
+            return displayHeaderCell(header, baseWidth);
+        }))));
+    }, [cellWidth, defaultHeader, displayHeaderCell, extraCols]);
+    const renderBody = React.useCallback((rows, width, bgColor = backgroundColor) => {
         return rows.map((row, index) => (React.createElement(TableRow, { "data-testid": `${defaultHeader}.tb.row.${index}`, key: row.id }, row.getVisibleCells().map((cell) => {
-            return displayBody(cell, index);
+            return displayBodyCell(cell, index, width, bgColor);
         }))));
-    }, [backgroundColor, cellWidth, defaultHeader, extraCols, onClick, props]);
+    }, [backgroundColor, defaultHeader, displayBodyCell]);
     return (React.createElement("div", { "data-testid": `${defaultHeader}.table`, style: {
             height,
             overflow: 'hidden',
@@ -232,32 +234,7 @@ export function ItemList(props) {
                     borderCollapse: 'separate',
                     borderSpacing: 0,
                 } },
-                React.createElement(TableHead, { "data-testid": `${defaultHeader}.tableHeader`, sx: { backgroundColor } }, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-                    // Calculate width accounting for ItemFilter with CancelPresentationIcon
-                    let baseWidth;
-                    if (header.id === defaultHeader) {
-                        baseWidth = 150;
-                    }
-                    else {
-                        // Check if this extra column has a filter
-                        const extraCol = extraCols.find((col) => col && header.id === col.column.header);
-                        baseWidth = cellWidth(extraCol);
-                    }
-                    const minWidth = baseWidth;
-                    const maxWidth = baseWidth;
-                    return (React.createElement(TableCell, { "data-testid": `${defaultHeader}.th.cell.${header.id}`, key: header.id, sx: {
-                            backgroundColor,
-                            width: baseWidth,
-                            minWidth: minWidth,
-                            maxWidth: maxWidth,
-                            borderRight: '1px solid #999',
-                            paddingLeft: '16px',
-                            paddingRight: 0,
-                            paddingTop: 0,
-                            paddingBottom: 0,
-                            boxSizing: 'border-box',
-                        } }, displayHeader(header)));
-                }))))))),
+                React.createElement(TableHead, { "data-testid": `${defaultHeader}.tableHeader`, sx: { backgroundColor } }, renderHeader(table.getHeaderGroups(), mainColumnWidth)))),
         React.createElement(Box, { sx: {
                 flex: 1,
                 overflow: 'auto',
@@ -271,5 +248,5 @@ export function ItemList(props) {
                     borderCollapse: 'separate',
                     borderSpacing: 0,
                 } },
-                React.createElement(TableBody, { "data-testid": "table.list-of-items", sx: { backgroundColor } }, renderRows(paginatedRows, backgroundColor))))));
+                React.createElement(TableBody, { "data-testid": `${defaultHeader}.tableBody`, sx: { backgroundColor } }, renderBody(table.getRowModel().rows, mainColumnWidth, backgroundColor))))));
 }

package/dist/components/itemTypes.d.ts

@@ -1,11 +1,11 @@
 import { AccessorFnColumnDef } from '@tanstack/react-table';
+import { TFilterHook } from './types';
 export type TItem = {
     name: string;
 };
 export type TItemFilter<T> = {
     property: keyof T;
-    filter: string;
-    setFilter: (filter: string) => void;
+    filterHook: TFilterHook;
     filterMatches: (item: T, filter: string) => boolean;
     placeholder?: string;
 };

package/dist/components/itemTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"itemTypes.d.ts","sourceRoot":"","sources":["../../src/components/itemTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC"}
+{"version":3,"file":"itemTypes.d.ts","sourceRoot":"","sources":["../../src/components/itemTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,UAAU,EAAE,WAAW,CAAC;IACxB,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC"}

package/dist/components/types.d.ts

@@ -10,6 +10,10 @@ export type TFrameObj = {
     sl: string;
     rest: string;
 };
+export type TFilterHook = {
+    value: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+};
 export declare const brueckenWeiteKey = "bw";
 export declare const scheibenLaengeKey = "sl";
 export declare const scheibenFormKey = "rest";

package/dist/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",
@@ -21,16 +21,14 @@
     "test:e2e:debug": "playwright test --debug",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
-    "@tanstack/react-table": "^8.21.3"
-  },
   "peerDependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
@@ -38,8 +36,8 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.2",
@@ -51,8 +49,8 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.51.0",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "typescript-eslint": "^8.53.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17"
   }
 }