frame.select 1.2.6 → 1.2.7

package/dist/App.d.ts

@@ -1,5 +1,8 @@
 import './App.css';
-import React from 'react';
-declare function App(): React.JSX.Element;
+export type TBrandFrame = {
+    brand: string;
+    frames: string[];
+};
+declare function App(): import("react/jsx-runtime").JSX.Element;
 export default App;
 //# sourceMappingURL=App.d.ts.map

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;AAEnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,iBAAS,GAAG,sBAkNX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAMnB,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,iBAAS,GAAG,4CAoNX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -1,10 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './App.css';
 import { useState } from 'react';
-import React from 'react';
-import { BrandList } from './components/BrandList';
-import { FrameList } from './components/FrameList';
+import { FrameSelect } from './FrameSelect';
+import { Box } from '@mui/material';
 function App() {
     const [brand, setBrand] = useState('');
+    const [selectedFrames, setSelectedFrames] = useState(undefined);
     const brands = [
         {
             name: 'Adidas',
@@ -122,55 +123,34 @@ function App() {
         { brand: 'Alpina', frames: frameAlpina },
         { brand: 'Brooks', frames: frameBrooks },
     ];
-    function convertFrames(brand, frameArray) {
-        const foundFrames = frameArray.find((b) => b.brand === brand);
-        if (!foundFrames) {
-            return [];
-        }
+    function convertFrames(frames) {
         const stripLeadingZeros = (s) => s.replace(/^0+/, '');
         const stripOrZero = (s) => stripLeadingZeros(s) || '0';
-        return foundFrames.frames.map((frame) => ({
+        const res = frames?.frames.map((frame) => ({
             frame,
             name: stripLeadingZeros(frame.substring(3, 23)),
             sl: stripOrZero(frame.substring(23, 25)),
             bw: stripOrZero(frame.substring(25, 27)),
             rest: stripLeadingZeros(frame.substring(28, 33)),
         }));
+        return res || [];
     }
-    // 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) {
             setBrand(brand.name);
+            const foundFrames = frames.find((b) => b.brand === brand.name);
+            // const foundFrames = convertFrames(brand.name, frames);
+            setSelectedFrames(foundFrames);
         }
     };
     const onClickFrame = (cell, index) => {
         window.alert(`Frame clicked: ${JSON.stringify(cell.row.original)} at index ${index}`);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("h1", null, "Brand List"),
-        React.createElement(BrandList, { brandList: brands, onClick: onClickBrand }),
-        React.createElement("h2", null,
-            "Frame List for ",
-            brand),
-        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);
-            } })));
+    const width = 1100;
+    const height = 300;
+    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
+                border: '10px solid black',
+            }, children: [_jsx("h1", { children: "Brand List" }), _jsx(FrameSelect, { currentBrand: brand, brands: brands, frames: selectedFrames, onClickBrand: onClickBrand, onClickFrame: onClickFrame, convertFrames: convertFrames, width: width, height: height, backgroundColor: "#CCC" }), _jsxs("h2", { children: ["Selected Brand: ", brand] })] }) }));
 }
 export default App;

package/dist/FrameSelect.d.ts

@@ -0,0 +1,22 @@
+import { Cell } from '@tanstack/react-table';
+import { TBrandObj, TFrameObj } from './components/types';
+type TBrandFrame = {
+    brand: string;
+    frames: string[];
+};
+export declare function FrameSelect(props: {
+    currentBrand: string;
+    brands: TBrandObj[];
+    frames?: TBrandFrame;
+    onClickBrand: (cell: Cell<{
+        name: string;
+        id: number;
+    }, unknown>, index: number) => void;
+    onClickFrame: (cell: Cell<TFrameObj, unknown>, index: number) => void;
+    convertFrames: (frameArray: TBrandFrame | undefined) => TFrameObj[];
+    width: number;
+    height: number;
+    backgroundColor: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FrameSelect.d.ts.map

package/dist/FrameSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameSelect.d.ts","sourceRoot":"","sources":["../src/FrameSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,CACZ,IAAI,EAAE,IAAI,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,CAAC,EACjD,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK,SAAS,EAAE,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;CACzB,2CA6DA"}

package/dist/FrameSelect.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { BrandList } from './components/BrandList';
+import { FrameList } from './components/FrameList';
+export function FrameSelect(props) {
+    const jsx = 'FrameSelect';
+    const listHeight = Math.max(props.height - 20, 0);
+    return (_jsxs(Box, { "data-testid": `${jsx}.box`, sx: {
+            display: 'flex',
+            width: props.width,
+            height: props.height,
+            overflow: 'hidden',
+            backgroundColor: props.backgroundColor,
+            // border: '10px solid black',
+            padding: '10px 50px 10px 30px',
+            gap: '40px',
+        }, children: [_jsx(Box, { "data-testid": `${jsx}.brand.box`, sx: {
+                    height: '100%',
+                    minHeight: 0,
+                }, children: _jsx(BrandList, { brandList: props.brands.map((brand, index) => {
+                        console.log(`Mapping brand: ${brand.name} at index ${index}`);
+                        return {
+                            name: brand.name,
+                            id: index,
+                        };
+                    }), onClick: props.onClickBrand, height: listHeight }) }), _jsx(Box, { "data-testid": `${jsx}.frame.box`, children: _jsx(FrameList, { frameList: props.convertFrames(props.frames), onClick: props.onClickFrame, slSize: 120, slFormat: (value) => {
+                        return _jsx("div", { children: value });
+                    }, bwSize: 160, bwFormat: (value) => {
+                        return _jsx("span", { style: { fontWeight: 'bold' }, children: value });
+                    }, formSize: 320, formFormat: (value) => {
+                        return _jsx("div", { style: { color: 'red' }, children: value });
+                    }, 
+                    // extraColumns={extraFrameColumns}
+                    // style={{ border: '1px solid black', padding: '0px' }}
+                    height: listHeight }) })] }));
+}

package/dist/components/BrandList.d.ts

@@ -9,6 +9,7 @@ export declare function BrandList(props: {
     renderItem?: (item: string) => React.ReactNode;
     extraColumns?: TColumn<TBrandObj>[];
     backgroundColor?: string;
+    height: number;
     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,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAkBd"}
+{"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,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAkBd"}

package/dist/components/BrandList.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ItemList } from './ItemList';
 export function BrandList(props) {
     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" }));
+    return (_jsx(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: props.height, placeholder: "Brands", defaultHeader: "Brand", testId: "name" }));
 }

package/dist/components/FrameList.d.ts

@@ -15,5 +15,6 @@ export declare function FrameList(props: {
     formFormat?: (value: string) => React.ReactNode;
     extraColumns?: TColumn<TFrameObj>[];
     style?: React.CSSProperties;
+    height: number;
 }): JSX.Element;
 //# sourceMappingURL=FrameList.d.ts.map

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,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"}
+{"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;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,GAAG,CAAC,OAAO,CAmHd"}

package/dist/components/FrameList.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 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) {
@@ -36,7 +36,7 @@ export function FrameList(props) {
                 size: colSize,
                 cell: (info) => {
                     const value = info.getValue();
-                    return colFormat ? colFormat(value) : React.createElement("div", null, value); // Handle undefined case
+                    return colFormat ? colFormat(value) : _jsx("div", { children: value }); // Handle undefined case
                 },
             }),
             filter: {
@@ -55,11 +55,11 @@ export function FrameList(props) {
         brueckenWeite,
         scheibenForm,
     ];
-    return (React.createElement(ItemList, { itemList: props.frameList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns && props.extraColumns.length > 0
+    return (_jsx(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", testId: "frame" }));
+        height: props.height, placeholder: "Modellnummer", defaultHeader: "Frame", testId: "frame" }));
 }

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,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"}
+{"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,CAwCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ItemFilter.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
 import { Button } from '@mui/material';
-import React from 'react';
 /**
  * A React functional component that provides a filter input for items.
  *
@@ -25,15 +25,17 @@ import React from 'react';
  * ```
  */
 const ItemFilter = (props) => {
+    const jsx = 'ItemFilter';
     function handleInputChange(e) {
         props.itemFilter.filterHook.setValue(e.target.value);
     }
     function clearFilter() {
         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.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))));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("input", { id: props.id, "data-testid": `${jsx}.input.filter.${props.id}`, type: "text", placeholder: props.itemFilter.placeholder ?? 'Items', value: props.itemFilter.filterHook.value || '', onChange: handleInputChange, style: { width: '80%' } }), _jsx(Button, { "data-testid": `${props.tableId}.button.clearFilter.${props.id}`, style: {
+                    minWidth: 'unset',
+                    padding: '1px',
+                    visibility: props.itemFilter.filterHook.value !== '' ? 'visible' : 'hidden',
+                }, onClick: clearFilter, children: _jsx(CancelPresentationIcon, { sx: { color: 'white' } }) })] }));
 };
 export default ItemFilter;

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,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAqad"}
+{"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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAiad"}

package/dist/components/ItemList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -5,7 +6,10 @@ 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', selectColor = 'darkgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
+    const jsx = 'ItemList';
+    const backgroundColorTable = '#EEE';
+    const backgroundColorHeader = 'grey';
+    const { itemList, backgroundColor = backgroundColorTable, selectColor = 'lightgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
     const scrollbarStyles = {
         '&::-webkit-scrollbar': {
             width: `${scrollbarWidth}px`,
@@ -16,13 +20,13 @@ export function ItemList(props) {
             margin: '2px',
         },
         '&::-webkit-scrollbar-thumb': {
-            backgroundColor: '#888',
+            backgroundColor: '#BBB',
             borderRadius: '10px',
             border: '2px solid transparent',
             backgroundClip: 'content-box',
         },
         '&::-webkit-scrollbar-thumb:hover': {
-            backgroundColor: '#555',
+            backgroundColor: '#AAA',
         },
         scrollbarGutter: 'stable',
     };
@@ -71,7 +75,7 @@ export function ItemList(props) {
     const defaultColumns = [
         columnHelper.accessor((row) => row.name, {
             header: defaultHeader,
-            cell: (info) => (React.createElement("div", { style: { fontWeight: 'bold' } }, info.getValue())),
+            cell: (info) => (_jsx("div", { style: { fontWeight: 'bold' }, children: info.getValue() })),
             footer: (info) => info.column.id,
             size: 130,
             minSize: 130,
@@ -99,45 +103,44 @@ export function ItemList(props) {
         return baseWidth;
     }, []);
     const displayHeader = useCallback((header) => {
-        let filter = React.createElement("div", null);
+        let filter = _jsx("div", {});
         if (header.id === defaultHeader) {
             if (itemFilter) {
-                filter = (React.createElement("div", { style: {
+                filter = (_jsx("div", { style: {
                         width: '130px',
                         maxWidth: '130px',
                         overflow: 'hidden',
                         boxSizing: 'border-box',
-                    } },
-                    React.createElement(ItemFilter, { tableId: defaultHeader, id: defaultHeader, itemFilter: itemFilter })));
+                    }, children: _jsx(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: {
+                    filter = col.filter ? (_jsx("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));
+                        }, children: _jsx(ItemFilter, { tableId: header.id, id: col.column.header, itemFilter: col.filter }) })) : (_jsx("div", {}));
                 }
             });
         }
         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,
+        return (_jsx(TableCell, { "data-testid": `${defaultHeader}.th.cell.${header.id}`, sx: {
+                backgroundColor: backgroundColorHeader,
                 width: baseWidth,
-                borderRight: '1px solid #999',
+                // borderRight: '1px solid #999',
+                borderBottom: '1px solid #999',
                 paddingLeft: '16px',
                 paddingRight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
+                paddingTop: '10px',
+                paddingBottom: '10px',
                 boxSizing: 'border-box',
-            } }, displayHeader(header)));
-    }, [backgroundColor, defaultHeader, displayHeader]);
+            }, children: displayHeader(header) }, header.id));
+    }, [defaultHeader, displayHeader]);
     const displayBodyCell = useCallback((cell, index, width, bgColor) => {
         const cll = cell.getValue();
         // Calculate width to match header cells exactly
@@ -150,7 +153,7 @@ export function ItemList(props) {
             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: {
+        return (_jsx(TableCell, { "data-testid": `${defaultHeader}.tb.cell.${index}`, style: { backgroundColor: bgColor }, sx: {
                 borderRight: '1px solid #999',
                 paddingLeft: '16px',
                 paddingRight: 0,
@@ -160,9 +163,9 @@ export function ItemList(props) {
                 // 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()))));
+            }, children: cell.column.columnDef.header === defaultHeader ? (_jsx(Button, { "data-testid": `${defaultHeader}.tb.cell.${cell.row.original[props.testId]}.button`, onClick: onClick(cell, cell.row.index), children: props.renderItem
+                    ? props.renderItem(cll)
+                    : flexRender(cell.column.columnDef.cell, cell.getContext()) })) : props.renderItem ? (props.renderItem(cll)) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id));
     }, [cellWidth, defaultHeader, extraCols, onClick, props]);
     const table = useReactTable({
         data: filteredItems,
@@ -192,26 +195,26 @@ export function ItemList(props) {
         return width;
     }, [extraCols]);
     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 (header.id === defaultHeader) {
-                baseWidth = width;
-            }
-            else {
-                // Check if this extra column has a filter
-                const extraCol = extraCols.find((col) => col && header.id === col.column.header);
-                baseWidth = cellWidth(extraCol);
-            }
-            return displayHeaderCell(header, baseWidth);
-        }))));
+        return headerGroups.map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                // Calculate width accounting for ItemFilter with CancelPresentationIcon
+                let baseWidth;
+                if (header.id === defaultHeader) {
+                    baseWidth = width;
+                }
+                else {
+                    // Check if this extra column has a filter
+                    const extraCol = extraCols.find((col) => col && header.id === col.column.header);
+                    baseWidth = cellWidth(extraCol);
+                }
+                return displayHeaderCell(header, baseWidth);
+            }) }, headerGroup.id)));
     }, [cellWidth, defaultHeader, displayHeaderCell, extraCols]);
     const renderBody = React.useCallback((rows, width, bgColor = backgroundColor) => {
         return rows.map((row, index) => {
             const rowBgColor = selectedIndex === index ? selectColor : bgColor;
-            return (React.createElement(TableRow, { "data-testid": `${defaultHeader}.tb.row.${index}`, key: row.id }, row.getVisibleCells().map((cell) => {
-                return displayBodyCell(cell, index, width, rowBgColor);
-            })));
+            return (_jsx(TableRow, { "data-testid": `${defaultHeader}.tb.row.${index}`, children: row.getVisibleCells().map((cell) => {
+                    return displayBodyCell(cell, index, width, rowBgColor);
+                }) }, row.id));
         });
     }, [
         backgroundColor,
@@ -220,44 +223,31 @@ export function ItemList(props) {
         selectColor,
         selectedIndex,
     ]);
-    return (React.createElement("div", { "data-testid": `${defaultHeader}.table`, style: {
+    return (_jsxs("div", { "data-testid": `${jsx}.${defaultHeader}.table`, style: {
             height,
             overflow: 'hidden',
-            backgroundColor,
+            backgroundColor: backgroundColorHeader,
             width: 'fit-content',
             minWidth: 200,
             boxSizing: 'border-box',
             display: 'flex',
             flexDirection: 'column',
-        } },
-        React.createElement(TableContainer, { "data-testid": `${defaultHeader}.tableContainer`, style: {
-                minWidth: 200,
-                backgroundColor,
-                width: 'fit-content',
-                boxSizing: 'border-box',
-                overflow: 'visible',
-                ...props.style,
-            } },
-            React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table", sx: {
-                    backgroundColor,
-                    width: `${totalTableWidth}px`,
-                    tableLayout: 'fixed',
-                    borderCollapse: 'separate',
-                    borderSpacing: 0,
-                } },
-                React.createElement(TableHead, { "data-testid": `${defaultHeader}.tableHeader`, sx: { backgroundColor } }, renderHeader(table.getHeaderGroups(), mainColumnWidth)))),
-        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(TableBody, { "data-testid": `${defaultHeader}.tableBody`, sx: { backgroundColor } }, renderBody(table.getRowModel().rows, mainColumnWidth, backgroundColor))))));
+        }, children: [_jsx(TableContainer, { "data-testid": `${jsx}.${defaultHeader}.tableContainer`, children: _jsx(Table, { stickyHeader: true, "aria-label": "sticky table", sx: {
+                        backgroundColor: backgroundColor,
+                        width: `${totalTableWidth}px`,
+                        tableLayout: 'fixed',
+                        borderCollapse: 'separate',
+                        borderSpacing: 0,
+                    }, children: _jsx(TableHead, { "data-testid": `${jsx}.${defaultHeader}.tableHeader`, sx: { backgroundColor: backgroundColor }, children: renderHeader(table.getHeaderGroups(), mainColumnWidth) }) }) }), _jsx(Box, { sx: {
+                    flex: 1,
+                    overflow: 'auto',
+                    backgroundColor: backgroundColor,
+                    ...scrollbarStyles,
+                }, children: _jsx(Table, { sx: {
+                        backgroundColor: backgroundColor,
+                        width: `${totalTableWidth}px`,
+                        tableLayout: 'fixed',
+                        borderCollapse: 'separate',
+                        borderSpacing: 0,
+                    }, children: _jsx(TableBody, { "data-testid": `${jsx}.${defaultHeader}.tableBody`, sx: { backgroundColor: backgroundColor }, children: renderBody(table.getRowModel().rows, mainColumnWidth, backgroundColor) }) }) })] }));
 }

package/dist/main.js

@@ -1,7 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
-import React from 'react';
-createRoot(document.getElementById('root')).render(React.createElement(StrictMode, null,
-    React.createElement(App, null)));
+createRoot(document.getElementById('root')).render(_jsx(StrictMode, { children: _jsx(App, {}) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",
@@ -24,33 +24,38 @@
   "peerDependencies": {
     "@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",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.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",
-    "@playwright/test": "^1.57.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@eslint/js": "^10.0.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@playwright/test": "^1.59.1",
+    "@tanstack/react-table": "^8.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.8",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.39.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "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.53.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.17"
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "jsdom": "^29.0.2",
+    "playwright": "^1.59.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.4"
   }
 }