frame.select 1.2.1 → 1.2.3

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,sBAuMX;AAED,eAAe,GAAG,CAAC"}
+{"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"}

package/dist/App.js

@@ -6,6 +6,8 @@ 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',
@@ -38,16 +40,27 @@ function App() {
             // item: ['Under Armour'],
         },
         {
-            name: 'New Balance',
+            name: 'Alpina',
             id: 6,
-            description: 'Description of New Balance',
-            // item: ['New Balance'],
+            description: 'Description of Alpina',
         },
         {
             name: 'Brooks',
             id: 6,
             description: 'Description of Brooks',
         },
+        {
+            name: 'Brand 1',
+            id: 7,
+        },
+        {
+            name: 'Brand 2',
+            id: 8,
+        },
+        {
+            name: 'Brand 3',
+            id: 9,
+        },
     ];
     const framesAdidas = [
         'ADI0000000000000000014362150000',
@@ -70,8 +83,18 @@ function App() {
         'ADI000000000000000TODDC50190012',
     ];
     const frameNike = [
-        'NIK0000000000000000030362150000',
-        'NIK0000000000000000031362150000',
+        'AFF000000000000000TMA4750190000',
+        'AFF000000000000000TMA4948190000',
+        'AFF000000000000000TMA5046180000',
+        'AFF00000000000000AOE18036160000',
+        'AFF00000000000000AOE18038160000',
+        'AFF00000000000000AOE19043180000',
+        'AFF000000000000000TMA4750190000',
+        'AFF000000000000000TMA4948190000',
+        'AFF000000000000000TMA5046180000',
+        'AFF00000000000000AOE18036160000',
+        'AFF00000000000000AOE18038160000',
+        'AFF00000000000000AOE19043180000',
     ];
     const framePuma = [
         'PUM000000000000000PUMA162150000',
@@ -85,9 +108,9 @@ function App() {
         'UND000000000000000UARMR62150000',
         'UND000000000000000UNDER62150000',
     ];
-    const frameNewBalance = [
-        'NEW000000000000000NEWBL62150000',
-        'NEW000000000000000NWBLC62150000',
+    const frameAlpina = [
+        'ALP0000000000000000843471100000',
+        'ALP000000000008434-KURZ69100000',
     ];
     const frameBrooks = [
         'BRO000000000000000BROOK62150000',
@@ -99,7 +122,7 @@ function App() {
         { brand: 'Puma', frames: framePuma },
         { brand: 'Reebok', frames: frameReebok },
         { brand: 'Under Armour', frames: frameUnderArmour },
-        { brand: 'New Balance', frames: frameNewBalance },
+        { brand: 'Alpina', frames: frameAlpina },
         { brand: 'Brooks', frames: frameBrooks },
     ];
     function convertFrames(brand, frameArray) {
@@ -107,51 +130,30 @@ function App() {
         if (!foundFrames) {
             return [];
         }
+        const stripLeadingZeros = (s) => s.replace(/^0+/, '');
+        const stripOrZero = (s) => stripLeadingZeros(s) || '0';
         return foundFrames.frames.map((frame) => ({
             frame,
-            name: frame.substring(18, 23),
-            height: frame.substring(23, 25),
-            width: frame.substring(25, 27),
-            rest: frame.substring(27),
+            name: stripLeadingZeros(frame.substring(3, 23)),
+            sl: stripOrZero(frame.substring(23, 25)),
+            bw: stripOrZero(frame.substring(25, 27)),
+            rest: stripLeadingZeros(frame.substring(28, 33)),
         }));
     }
     const brandColumnHelper = createColumnHelper();
     const brandColumns = [
-        brandColumnHelper.accessor((row) => row.description, {
+        brandColumnHelper.accessor((row) => row.description ?? '', {
             header: 'description',
-            size: 100,
+            size: 300,
             cell: (info) => React.createElement("div", null, info.getValue()),
         }),
     ];
-    const extraBrandColumns = [
+    const _extraBrandColumns = [
         {
             column: brandColumns[0],
         },
     ];
-    const frameColumnHelper = createColumnHelper();
-    const frameColumns = [
-        frameColumnHelper.accessor((row) => row.height.toString(), {
-            header: 'height',
-            size: 120,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-        frameColumnHelper.accessor((row) => row.width.toString(), {
-            // Convert to string
-            header: 'width',
-            size: 20,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-    ];
-    const extraFrameColumns = [
-        {
-            column: frameColumns[0],
-        },
-        {
-            column: frameColumns[1],
-        },
-    ];
     const onClickBrand = (cell) => {
-        console.log(`cell:  ${JSON.stringify(cell.row.original, null, 2)}`);
         const brand = brands.find((b) => b.name === cell.row.original.name);
         if (brand) {
             setBrand(brand.name);
@@ -162,10 +164,12 @@ function App() {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("h1", null, "Brand List"),
-        React.createElement(BrandList, { brandList: brands, onClick: onClickBrand, 
-            // renderItem={renderItem}
-            extraColumns: extraBrandColumns }),
-        React.createElement("h2", null, "Frame List"),
-        React.createElement(FrameList, { frameList: convertFrames(brand, frames), onClick: onClickFrame, extraColumns: extraFrameColumns, style: { border: '1px solid black', padding: '10px' } })));
+        React.createElement(BrandList, { brandList: brands, onClick: onClickBrand }),
+        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' } })));
 }
 export default App;

package/dist/components/BrandList.d.ts

@@ -8,6 +8,7 @@ export declare function BrandList(props: {
     onClick?: (cell: Cell<TBrandObj, unknown>, index: number) => void;
     renderItem?: (item: string) => React.ReactNode;
     extraColumns?: TColumn<TBrandObj>[];
+    backgroundColor?: string;
     style?: React.CSSProperties;
 }): JSX.Element;
 //# sourceMappingURL=BrandList.d.ts.map

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,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAcd"}
+{"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"}

package/dist/components/BrandList.js

@@ -1,5 +1,5 @@
 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: "yellow", scrollbarWidth: 50, height: 300, placeholder: "Brands" }));
+    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" }));
 }

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,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,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAcd"}
+{"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"}

package/dist/components/FrameList.js

@@ -1,5 +1,86 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { useState } from 'react';
 import React from 'react';
+import { brueckenWeiteKey, scheibenFormKey, scheibenLaengeKey, } from './types';
 import { ItemList } from './ItemList';
 export function FrameList(props) {
-    return (React.createElement(ItemList, { itemList: props.frameList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns, style: props.style }));
+    const [filterWidth, setFilterWidth] = useState('');
+    const [filterHeight, setFilterHeight] = useState('');
+    const [filterForm, setFilterForm] = useState('');
+    const filterMatches = (item, property, filter) => {
+        const frame = item;
+        const value = frame[property];
+        if (typeof value === 'string') {
+            return value.toLowerCase().includes(filter.toLowerCase());
+        }
+        if (typeof value === 'number') {
+            return String(value).includes(filter);
+        }
+        // Handle other types (boolean, etc.)
+        return String(value).toLowerCase().includes(filter.toLowerCase());
+    };
+    function filterWidthMatches(item, filter) {
+        return filterMatches(item, brueckenWeiteKey, filter);
+    }
+    function filterHeightMatches(item, filter) {
+        return filterMatches(item, scheibenLaengeKey, filter);
+    }
+    function filterFormMatches(item, filter) {
+        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],
+            filter: {
+                property: brueckenWeiteKey,
+                filter: filterWidth,
+                setFilter: setFilterWidth,
+                filterMatches: filterWidthMatches,
+                placeholder: 'Brückenweite',
+            },
+        },
+        {
+            column: frameColumns[2],
+            filter: {
+                property: scheibenFormKey,
+                filter: filterForm,
+                setFilter: setFilterForm,
+                filterMatches: filterFormMatches,
+                placeholder: 'Scheibenform',
+            },
+        },
+    ];
+    return (React.createElement(ItemList, { itemList: props.frameList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns ? props.extraColumns : extraFrameColumns, style: props.style, 
+        // backgroundColor="lightgreen"
+        // scrollbarWidth={100}
+        // height={400}
+        placeholder: "Modellnummer", defaultHeader: "Frame" }));
 }

package/dist/components/ItemFilter.d.ts

@@ -1,6 +1,8 @@
 import { TItem, TItemFilter } from './itemTypes';
 import React from 'react';
 interface ItemFilterProps {
+    tableId: string;
+    id: string;
     itemFilter: TItemFilter<TItem>;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ItemFilter.d.ts","sourceRoot":"","sources":["../../src/components/ItemFilter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,eAAe;IACvB,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ItemFilter.d.ts","sourceRoot":"","sources":["../../src/components/ItemFilter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ItemFilter.js

@@ -32,8 +32,8 @@ const ItemFilter = (props) => {
         props.itemFilter.setFilter('');
     }
     return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement("input", { type: "text", placeholder: props.itemFilter.placeholder ?? 'Items', value: props.itemFilter.filter || '', onChange: handleInputChange, style: { width: '80%' } }),
-        props.itemFilter.filter !== '' ? (React.createElement(Button, { 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.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(CancelPresentationIcon, null))) : (React.createElement("div", null))));
 };
 export default ItemFilter;

package/dist/components/ItemList.d.ts

@@ -2,7 +2,7 @@ import { Cell } from '@tanstack/react-table';
 import { TColumn, TItem } from './itemTypes';
 import { JSX } from 'react';
 import React from 'react';
-export interface ItemListProps<T extends TItem> {
+export declare function ItemList<T extends TItem>(props: {
     itemList: T[];
     onClick?: (cell: Cell<T, unknown>, index: number) => void;
     renderItem?: (item: string) => React.ReactNode;
@@ -12,6 +12,6 @@ export interface ItemListProps<T extends TItem> {
     scrollbarWidth?: number;
     height?: number | string;
     placeholder?: string;
-}
-export declare function ItemList<T extends TItem>(props: ItemListProps<T>): JSX.Element;
+    defaultHeader?: 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":"AASA,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,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,KAAK;IAC5C,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;CACtB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,KAAK,EACtC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GACtB,GAAG,CAAC,OAAO,CA4Qb"}
+{"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"}

package/dist/components/ItemList.js

@@ -1,11 +1,11 @@
-import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, } from '@mui/material';
+import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, Box, } from '@mui/material';
 import { useReactTable, getCoreRowModel, getFilteredRowModel, createColumnHelper, flexRender, } from '@tanstack/react-table';
 import ItemFilter from './ItemFilter';
 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', } = props;
+    const { itemList, backgroundColor = 'lightgrey', scrollbarWidth = 50, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
     const scrollbarStyles = {
         '&::-webkit-scrollbar': {
             width: `${scrollbarWidth}px`,
@@ -67,16 +67,15 @@ export function ItemList(props) {
         return filteredList;
     }, [itemFilter, itemList, extraCols]);
     /****************************************************************************/
-    const defaultHeader = 'Name';
     const columnHelper = createColumnHelper();
     const defaultColumns = [
         columnHelper.accessor((row) => row.name, {
             header: defaultHeader,
             cell: (info) => (React.createElement("div", { style: { fontWeight: 'bold' } }, info.getValue())),
             footer: (info) => info.column.id,
-            size: 150,
-            minSize: 100,
-            maxSize: 300,
+            size: 130,
+            minSize: 130,
+            maxSize: 130,
         }),
     ];
     const columns = [...defaultColumns];
@@ -93,19 +92,34 @@ export function ItemList(props) {
             console.log(`Clicked item index: ${index}`);
         }
     }, [props]);
+    const cellWidth = useCallback((extraCol) => {
+        const clearButtonWidth = extraCol?.filter ? 20 : 0;
+        const baseWidth = (extraCol?.column.size || 100) + clearButtonWidth;
+        return baseWidth;
+    }, []);
     function displayHeader(header) {
         let filter = React.createElement("div", null);
         if (header.id === defaultHeader) {
             if (itemFilter) {
-                filter = (React.createElement("div", { style: { width: '100%' } },
-                    React.createElement(ItemFilter, { itemFilter: itemFilter })));
+                filter = (React.createElement("div", { style: {
+                        width: '130px',
+                        maxWidth: '130px',
+                        overflow: 'hidden',
+                        boxSizing: 'border-box',
+                    } },
+                    React.createElement(ItemFilter, { tableId: defaultHeader, id: defaultHeader, itemFilter: itemFilter })));
             }
         }
         else {
             extraCols.forEach((col) => {
                 if (col && header.id === col.column.header) {
-                    filter = col.filter ? (React.createElement("div", { style: { width: '100%' } },
-                        React.createElement(ItemFilter, { itemFilter: col.filter }))) : (React.createElement("div", null));
+                    filter = col.filter ? (React.createElement("div", { style: {
+                            width: '120px',
+                            maxWidth: '120px',
+                            overflow: 'hidden',
+                            boxSizing: 'border-box',
+                        } },
+                        React.createElement(ItemFilter, { tableId: header.id, id: col.column.header, itemFilter: col.filter }))) : (React.createElement("div", null));
                 }
             });
         }
@@ -117,61 +131,145 @@ export function ItemList(props) {
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         columnResizeMode: 'onChange',
-        enableColumnResizing: true,
+        enableColumnResizing: false,
         defaultColumn: {
-            size: 100,
-            minSize: 50,
-            maxSize: 500,
+            size: 120,
+            minSize: 120,
+            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
+            }
+        });
+        return width;
+    }, [extraCols]);
     const renderRows = React.useCallback((rows, bgColor = backgroundColor) => {
-        function displayBody(cell) {
+        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
+            let baseWidth;
             if (cell.column.columnDef.header === defaultHeader) {
-                cellContent = (React.createElement(TableCell, { style: { backgroundColor: bgColor, padding: 2 }, key: cell.id },
+                baseWidth = 160;
+            }
+            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);
+            }
+            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, { style: { backgroundColor: bgColor, padding: 2 }, key: cell.id }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll)));
+                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 rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-            return displayBody(cell);
+        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);
         }))));
-    }, [backgroundColor, onClick, props]);
-    return (React.createElement("div", { style: {
+    }, [backgroundColor, cellWidth, defaultHeader, extraCols, onClick, props]);
+    return (React.createElement("div", { "data-testid": `${defaultHeader}.table`, style: {
             height,
             overflow: 'hidden',
             backgroundColor,
-            width: '100%',
+            width: 'fit-content',
             minWidth: 200,
             boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
         } },
-        React.createElement(TableContainer, { "data-testid": "item-list-TableContainer", style: {
-                height,
+        React.createElement(TableContainer, { "data-testid": `${defaultHeader}.tableContainer`, style: {
                 minWidth: 200,
-                overflow: 'auto',
                 backgroundColor,
-                width: '100%',
+                width: 'fit-content',
                 boxSizing: 'border-box',
+                overflow: 'visible',
                 ...props.style,
-            }, sx: scrollbarStyles },
+            } },
             React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table", sx: {
                     backgroundColor,
-                    width: '100%',
-                    minWidth: 200,
+                    width: `${totalTableWidth}px`,
+                    tableLayout: 'fixed',
+                    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(Box, { sx: {
+                flex: 1,
+                overflow: 'auto',
+                backgroundColor,
+                ...scrollbarStyles,
+            } },
+            React.createElement(Table, { sx: {
+                    backgroundColor,
+                    width: `${totalTableWidth}px`,
                     tableLayout: 'fixed',
+                    borderCollapse: 'separate',
+                    borderSpacing: 0,
                 } },
-                React.createElement(TableHead, { sx: { backgroundColor } }, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id, "data-testid": headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(TableCell, { key: header.id, sx: {
-                        backgroundColor,
-                        width: header.id === defaultHeader ? 150 : 'auto',
-                        minWidth: header.id === defaultHeader ? 100 : 50,
-                        maxWidth: header.id === defaultHeader ? 300 : 'none',
-                    } }, displayHeader(header)))))))),
                 React.createElement(TableBody, { "data-testid": "table.list-of-items", sx: { backgroundColor } }, renderRows(paginatedRows, backgroundColor))))));
 }

package/dist/components/types.d.ts

@@ -1,13 +1,16 @@
 export type TBrandObj = {
     name: string;
     id: number;
-    description: string;
+    description?: string;
 };
 export type TFrameObj = {
     frame: string;
     name: string;
-    width: string;
-    height: string;
+    bw: string;
+    sl: string;
     rest: string;
 };
+export declare const brueckenWeiteKey = "bw";
+export declare const scheibenLaengeKey = "sl";
+export declare const scheibenFormKey = "rest";
 //# sourceMappingURL=types.d.ts.map

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,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,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,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,eAAe,SAAS,CAAC"}

package/dist/components/types.js

@@ -1 +1,3 @@
-export {};
+export const brueckenWeiteKey = 'bw';
+export const scheibenLaengeKey = 'sl';
+export const scheibenFormKey = 'rest';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",
@@ -16,6 +16,9 @@
     "build-and-vite": "tsc -b && vite build",
     "lint": "eslint .",
     "test": "vitest --config vitest.config.ts",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -30,22 +33,25 @@
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
     "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.57.0",
     "@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/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "globals": "^16.5.0",
-    "jsdom": "^27.3.0",
+    "globals": "^17.0.0",
+    "jsdom": "^27.4.0",
+    "playwright": "^1.57.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.50.0",
+    "typescript-eslint": "^8.51.0",
     "vite": "^7.3.0",
     "vitest": "^4.0.16"
   }