frame.select 1.1.4 → 1.2.1

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;AAInB,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,iBAAS,GAAG,sBA4KX;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,sBAuMX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -43,6 +43,11 @@ function App() {
             description: 'Description of New Balance',
             // item: ['New Balance'],
         },
+        {
+            name: 'Brooks',
+            id: 6,
+            description: 'Description of Brooks',
+        },
     ];
     const framesAdidas = [
         'ADI0000000000000000014362150000',
@@ -50,6 +55,19 @@ function App() {
         'ADI0000000000000000019362150000',
         // 3456789 123456789 12345678901
         'AFF000000000000000TMA4750190000',
+        'AFF000000000000000TMA4750190001',
+        'AFF000000000000000TMA4750190002',
+        'AFF000000000000000TMA4750190003',
+        'AFF000000000000000TMA4750190004',
+        'AFF000000000000000TMA4750190005',
+        'AFF000000000000000TMA4750190006',
+        'AFF000000000000000TMA4750190007',
+        'AFF000000000000000TMA4750190008',
+        'AFF000000000000000TMA4750190009',
+        'AFF000000000000000TMA4750190010',
+        'AFF000000000000000TMA4750190011',
+        'AFF000000000000000TMA4750190012',
+        'ADI000000000000000TODDC50190012',
     ];
     const frameNike = [
         'NIK0000000000000000030362150000',
@@ -71,6 +89,10 @@ function App() {
         'NEW000000000000000NEWBL62150000',
         'NEW000000000000000NWBLC62150000',
     ];
+    const frameBrooks = [
+        'BRO000000000000000BROOK62150000',
+        'BRO000000000000000ROOKS62150000',
+    ];
     const frames = [
         { brand: 'Adidas', frames: framesAdidas },
         { brand: 'Nike', frames: frameNike },
@@ -78,23 +100,26 @@ function App() {
         { brand: 'Reebok', frames: frameReebok },
         { brand: 'Under Armour', frames: frameUnderArmour },
         { brand: 'New Balance', frames: frameNewBalance },
+        { brand: 'Brooks', frames: frameBrooks },
     ];
-    function convertFrames(brand) {
-        const foundFrames = frames.find((b) => b.brand === brand);
+    function convertFrames(brand, frameArray) {
+        const foundFrames = frameArray.find((b) => b.brand === brand);
         if (!foundFrames) {
             return [];
         }
         return foundFrames.frames.map((frame) => ({
-            id: frame,
+            frame,
             name: frame.substring(18, 23),
-            length: parseInt(frame.substring(23, 25)),
-            width: parseInt(frame.substring(25, 27)),
+            height: frame.substring(23, 25),
+            width: frame.substring(25, 27),
+            rest: frame.substring(27),
         }));
     }
     const brandColumnHelper = createColumnHelper();
     const brandColumns = [
         brandColumnHelper.accessor((row) => row.description, {
             header: 'description',
+            size: 100,
             cell: (info) => React.createElement("div", null, info.getValue()),
         }),
     ];
@@ -105,13 +130,15 @@ function App() {
     ];
     const frameColumnHelper = createColumnHelper();
     const frameColumns = [
-        frameColumnHelper.accessor((row) => row.length.toString(), {
-            header: 'length',
+        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()),
         }),
     ];
@@ -123,10 +150,9 @@ function App() {
             column: frameColumns[1],
         },
     ];
-    const onClickBrand = (cell, index) => {
+    const onClickBrand = (cell) => {
         console.log(`cell:  ${JSON.stringify(cell.row.original, null, 2)}`);
         const brand = brands.find((b) => b.name === cell.row.original.name);
-        // window.alert(`Item clicked: ${index}\n${JSON.stringify(brand, null, 2)}`);
         if (brand) {
             setBrand(brand.name);
         }
@@ -134,20 +160,12 @@ function App() {
     const onClickFrame = (cell, index) => {
         window.alert(`Frame clicked: ${JSON.stringify(cell.row.original)} at index ${index}`);
     };
-    const [filter, setFilter] = useState('');
-    function filterMatches(item, fltr) {
-        const match = item.name
-            .toLowerCase()
-            .includes(fltr ? fltr.toLowerCase() : '');
-        return match;
-    }
-    const renderItem = (item) => React.createElement("h4", null, item);
     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), onClick: onClickFrame, extraColumns: extraFrameColumns, style: { border: '1px solid black', padding: '10px' } })));
+        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.map

@@ -1 +1 @@
-{"version":3,"file":"BrandList.d.ts","sourceRoot":"","sources":["../../src/components/BrandList.tsx"],"names":[],"mappings":"AASA,OAAO,EAIL,IAAI,EAKL,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAe,OAAO,EAAS,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,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,CA8Ld"}
+{"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"}

package/dist/components/BrandList.js

@@ -1,122 +1,5 @@
-import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, } 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';
+import { ItemList } from './ItemList';
 export function BrandList(props) {
-    'use no memo'; // For React Compiler compatibility with TanStack Table
-    const [filter, setFilter] = useState('');
-    const filterMatches = useCallback((item, fltr) => {
-        const match = item.name
-            .toLowerCase()
-            .includes(fltr ? fltr.toLowerCase() : '');
-        return match;
-    }, []);
-    const tBrandFilter = useMemo(() => ({
-        property: 'name',
-        filter,
-        setFilter,
-        filterMatches,
-        placeholder: 'Brands',
-    }), [filter, filterMatches]);
-    const serializedExtraColumns = useMemo(() => JSON.stringify(props.extraColumns), [props.extraColumns]);
-    const extraCols = useMemo(() => {
-        if (props.extraColumns) {
-            return props.extraColumns.filter((col) => col !== undefined);
-        }
-        else {
-            return [];
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [serializedExtraColumns]); // Use the serialized version as a dependency
-    /***************************** filtered items *******************************/
-    const filteredItems = useMemo(() => {
-        if (!tBrandFilter) {
-            return props.brandList;
-        }
-        let filteredList = props.brandList;
-        if (tBrandFilter.filterMatches) {
-            filteredList = props.brandList.filter((item) => tBrandFilter.filterMatches(item, tBrandFilter.filter));
-        }
-        extraCols.forEach((col) => {
-            if (col?.filter) {
-                filteredList = filteredList.filter((item) => col.filter?.filterMatches(item, col.filter.filter));
-            }
-        });
-        // tBrandFilter.filterEvent?.(filteredList)
-        return filteredList;
-    }, [tBrandFilter, props.brandList, 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,
-        }),
-    ];
-    const columns = [...defaultColumns];
-    extraCols.forEach((col) => {
-        if (col) {
-            columns.push(col.column);
-        }
-    });
-    const onClick = (cell, index) => () => {
-        if (props.onClick) {
-            props.onClick?.(cell, index);
-        }
-        else {
-            console.log(`Clicked item index: ${index}`);
-        }
-    };
-    function displayHeader(header) {
-        let filter = React.createElement("div", null);
-        if (header.id === defaultHeader) {
-            if (tBrandFilter) {
-                filter = (React.createElement("div", { style: { width: '100%' } },
-                    React.createElement(ItemFilter, { itemFilter: tBrandFilter })));
-            }
-        }
-        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));
-                }
-            });
-        }
-        return filter;
-    }
-    const table = useReactTable({
-        data: filteredItems,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-    });
-    const paginatedRows = table.getRowModel().rows;
-    const renderRows = React.useCallback((rows) => {
-        function displayBody(cell) {
-            let cellContent = React.createElement("div", null);
-            const cll = cell.getValue();
-            if (cell.column.columnDef.header === defaultHeader) {
-                cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, 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: 'white', padding: 2 }, key: cell.id }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll)));
-            }
-            return cellContent;
-        }
-        return rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-            // console.log(`cell: ${JSON.stringify(cell, null)}`)
-            return displayBody(cell);
-        }))));
-    }, [onClick, props]);
-    return (React.createElement(TableContainer, { "data-testid": "frame.select-TableContainer", style: props.style },
-        React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table" },
-            React.createElement(TableHead, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id, "data-testid": headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(TableCell, { key: header.id }, displayHeader(header)))))))),
-            React.createElement(TableBody, { "data-testid": "table.list-of-brands" }, renderRows(paginatedRows)))));
+    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" }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FrameList.d.ts","sourceRoot":"","sources":["../../src/components/FrameList.tsx"],"names":[],"mappings":"AASA,OAAO,EAIL,IAAI,EAKL,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAe,OAAO,EAAS,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAA6C,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,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,CA8Ld"}
+{"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"}

package/dist/components/FrameList.js

@@ -1,122 +1,5 @@
-import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, } 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';
+import { ItemList } from './ItemList';
 export function FrameList(props) {
-    'use no memo'; // For React Compiler compatibility with TanStack Table
-    const [filter, setFilter] = useState('');
-    const filterMatches = useCallback((item, fltr) => {
-        const match = item.name
-            .toLowerCase()
-            .includes(fltr ? fltr.toLowerCase() : '');
-        return match;
-    }, []);
-    const tFrameFilter = useMemo(() => ({
-        property: 'name',
-        filter,
-        setFilter,
-        filterMatches,
-        placeholder: 'Frames',
-    }), [filter, filterMatches]);
-    const serializedExtraColumns = useMemo(() => JSON.stringify(props.extraColumns), [props.extraColumns]);
-    const extraCols = useMemo(() => {
-        if (props.extraColumns) {
-            return props.extraColumns.filter((col) => col !== undefined);
-        }
-        else {
-            return [];
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [serializedExtraColumns]); // Use the serialized version as a dependency
-    /***************************** filtered items *******************************/
-    const filteredItems = useMemo(() => {
-        if (!tFrameFilter) {
-            return props.frameList;
-        }
-        let filteredList = props.frameList;
-        if (tFrameFilter.filterMatches) {
-            filteredList = props.frameList.filter((item) => tFrameFilter.filterMatches(item, tFrameFilter.filter));
-        }
-        extraCols.forEach((col) => {
-            if (col?.filter) {
-                filteredList = filteredList.filter((item) => col.filter?.filterMatches(item, col.filter.filter));
-            }
-        });
-        // tBrandFilter.filterEvent?.(filteredList)
-        return filteredList;
-    }, [tFrameFilter, props.frameList, 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,
-        }),
-    ];
-    const columns = [...defaultColumns];
-    extraCols.forEach((col) => {
-        if (col) {
-            columns.push(col.column);
-        }
-    });
-    const onClick = (cell, index) => () => {
-        if (props.onClick) {
-            props.onClick?.(cell, index);
-        }
-        else {
-            console.log(`Clicked item index: ${index}`);
-        }
-    };
-    function displayHeader(header) {
-        let filter = React.createElement("div", null);
-        if (header.id === defaultHeader) {
-            if (tFrameFilter) {
-                filter = (React.createElement("div", { style: { width: '100%' } },
-                    React.createElement(ItemFilter, { itemFilter: tFrameFilter })));
-            }
-        }
-        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));
-                }
-            });
-        }
-        return filter;
-    }
-    const table = useReactTable({
-        data: filteredItems,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-    });
-    const paginatedRows = table.getRowModel().rows;
-    const renderRows = React.useCallback((rows) => {
-        function displayBody(cell) {
-            let cellContent = React.createElement("div", null);
-            const cll = cell.getValue();
-            if (cell.column.columnDef.header === defaultHeader) {
-                cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, 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: 'white', padding: 2 }, key: cell.id }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll)));
-            }
-            return cellContent;
-        }
-        return rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-            // console.log(`cell: ${JSON.stringify(cell, null)}`)
-            return displayBody(cell);
-        }))));
-    }, [onClick, props]);
-    return (React.createElement(TableContainer, { "data-testid": "frame.select-TableContainer", style: props.style },
-        React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table" },
-            React.createElement(TableHead, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id, "data-testid": headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(TableCell, { key: header.id }, displayHeader(header)))))))),
-            React.createElement(TableBody, { "data-testid": "table.list-of-frames" }, renderRows(paginatedRows)))));
+    return (React.createElement(ItemList, { itemList: props.frameList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns, style: props.style }));
 }

package/dist/components/ItemList.d.ts

@@ -1,17 +1,17 @@
 import { Cell } from '@tanstack/react-table';
-import { TItemFilter, TColumn } from './itemTypes';
+import { TColumn, TItem } from './itemTypes';
 import { JSX } from 'react';
 import React from 'react';
-interface ItemListProps<T> {
+export interface ItemListProps<T extends TItem> {
     itemList: T[];
+    onClick?: (cell: Cell<T, unknown>, index: number) => void;
     renderItem?: (item: string) => React.ReactNode;
-    itemFilter?: TItemFilter<T>;
-    clickFunc?: (item: Cell<T, unknown>) => void;
     extraColumns?: TColumn<T>[];
     style?: React.CSSProperties;
+    backgroundColor?: string;
+    scrollbarWidth?: number;
+    height?: number | string;
+    placeholder?: string;
 }
-declare function ItemList<T extends {
-    name: string;
-}>({ itemList, renderItem, itemFilter, clickFunc, extraColumns, style, }: ItemListProps<T>): JSX.Element;
-export default ItemList;
+export declare function ItemList<T extends TItem>(props: ItemListProps<T>): 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,EAGL,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAsB,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa,CAAC,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,UAAU,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,EAC5C,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAiB,EACjB,KAA8D,GAC/D,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAsJhC;AAED,eAAe,QAAQ,CAAC"}
+{"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"}

package/dist/components/ItemList.js

@@ -1,19 +1,56 @@
 import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, } from '@mui/material';
-import { useReactTable, getCoreRowModel, getFilteredRowModel, createColumnHelper, } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getFilteredRowModel, createColumnHelper, flexRender, } from '@tanstack/react-table';
 import ItemFilter from './ItemFilter';
-import { useMemo } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import React from 'react';
-function ItemList({ itemList, renderItem, itemFilter, clickFunc, extraColumns = [], style = { height: '500px', overflowY: 'auto', width: '400px' }, }) {
-    const serializedExtraColumns = useMemo(() => JSON.stringify(extraColumns), [extraColumns]);
+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 scrollbarStyles = {
+        '&::-webkit-scrollbar': {
+            width: `${scrollbarWidth}px`,
+            backgroundColor: 'transparent',
+        },
+        '&::-webkit-scrollbar-track': {
+            backgroundColor: '#f1f1f1',
+            margin: '2px',
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#888',
+            borderRadius: '10px',
+            border: '2px solid transparent',
+            backgroundClip: 'content-box',
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: '#555',
+        },
+        scrollbarGutter: 'stable',
+    };
+    const [filter, setFilter] = useState('');
+    const filterMatches = useCallback((item, fltr) => {
+        const match = item.name
+            .toLowerCase()
+            .includes(fltr ? fltr.toLowerCase() : '');
+        return match;
+    }, []);
+    const itemFilter = useMemo(() => ({
+        property: 'name',
+        filter,
+        setFilter,
+        filterMatches,
+        placeholder,
+    }), [filter, filterMatches, placeholder]);
+    const serializedExtraColumns = useMemo(() => JSON.stringify(props.extraColumns), [props.extraColumns]);
     const extraCols = useMemo(() => {
-        if (extraColumns) {
-            return extraColumns.filter((col) => col !== undefined);
+        if (props.extraColumns) {
+            return props.extraColumns.filter((col) => col !== undefined);
         }
         else {
             return [];
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [serializedExtraColumns]); // Use the serialized version as a dependency
+    }, [serializedExtraColumns]);
+    /***************************** filtered items *******************************/
     const filteredItems = useMemo(() => {
         if (!itemFilter) {
             return itemList;
@@ -27,14 +64,9 @@ function ItemList({ itemList, renderItem, itemFilter, clickFunc, extraColumns =
                 filteredList = filteredList.filter((item) => col.filter?.filterMatches(item, col.filter.filter));
             }
         });
-        // itemFilter.filterEvent?.(filteredList)
         return filteredList;
     }, [itemFilter, itemList, extraCols]);
-    function handleItemClick(cell) {
-        if (clickFunc) {
-            clickFunc(cell);
-        }
-    }
+    /****************************************************************************/
     const defaultHeader = 'Name';
     const columnHelper = createColumnHelper();
     const defaultColumns = [
@@ -42,6 +74,9 @@ function ItemList({ itemList, renderItem, itemFilter, clickFunc, extraColumns =
             header: defaultHeader,
             cell: (info) => (React.createElement("div", { style: { fontWeight: 'bold' } }, info.getValue())),
             footer: (info) => info.column.id,
+            size: 150,
+            minSize: 100,
+            maxSize: 300,
         }),
     ];
     const columns = [...defaultColumns];
@@ -50,6 +85,14 @@ function ItemList({ itemList, renderItem, itemFilter, clickFunc, extraColumns =
             columns.push(col.column);
         }
     });
+    const onClick = useCallback((cell, index) => () => {
+        if (props.onClick) {
+            props.onClick(cell, index);
+        }
+        else {
+            console.log(`Clicked item index: ${index}`);
+        }
+    }, [props]);
     function displayHeader(header) {
         let filter = React.createElement("div", null);
         if (header.id === defaultHeader) {
@@ -68,30 +111,67 @@ function ItemList({ itemList, renderItem, itemFilter, clickFunc, extraColumns =
         }
         return filter;
     }
-    function displayBody(cell) {
-        let cellContent = React.createElement("div", null);
-        const cll = cell.getValue();
-        if (cell.column.columnDef.header === defaultHeader) {
-            cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id },
-                React.createElement(Button, { onClick: () => handleItemClick(cell) }, renderItem ? renderItem(cll) : React.createElement("div", null, cll))));
-        }
-        else {
-            cellContent = (React.createElement(TableCell, { style: { backgroundColor: 'white', padding: 2 }, key: cell.id }, renderItem ? renderItem(cll) : React.createElement("div", null, cll)));
-        }
-        return cellContent;
-    }
     const table = useReactTable({
         data: filteredItems,
         columns,
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        columnResizeMode: 'onChange',
+        enableColumnResizing: true,
+        defaultColumn: {
+            size: 100,
+            minSize: 50,
+            maxSize: 500,
+        },
     });
-    return (React.createElement(TableContainer, { "data-testid": "frame.select-TableContainer", style: style },
-        React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table" },
-            React.createElement(TableHead, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id, "data-testid": headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(TableCell, { key: header.id }, displayHeader(header)))))))),
-            React.createElement(TableBody, null, table.getRowModel().rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-                // console.log(`cell: ${JSON.stringify(cell, null)}`)
-                return displayBody(cell);
-            }))))))));
+    const paginatedRows = table.getRowModel().rows;
+    const renderRows = React.useCallback((rows, bgColor = backgroundColor) => {
+        function displayBody(cell) {
+            let cellContent = React.createElement("div", null);
+            const cll = cell.getValue();
+            if (cell.column.columnDef.header === defaultHeader) {
+                cellContent = (React.createElement(TableCell, { style: { backgroundColor: bgColor, padding: 2 }, 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)));
+            }
+            return cellContent;
+        }
+        return rows.map((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
+            return displayBody(cell);
+        }))));
+    }, [backgroundColor, onClick, props]);
+    return (React.createElement("div", { style: {
+            height,
+            overflow: 'hidden',
+            backgroundColor,
+            width: '100%',
+            minWidth: 200,
+            boxSizing: 'border-box',
+        } },
+        React.createElement(TableContainer, { "data-testid": "item-list-TableContainer", style: {
+                height,
+                minWidth: 200,
+                overflow: 'auto',
+                backgroundColor,
+                width: '100%',
+                boxSizing: 'border-box',
+                ...props.style,
+            }, sx: scrollbarStyles },
+            React.createElement(Table, { stickyHeader: true, "aria-label": "sticky table", sx: {
+                    backgroundColor,
+                    width: '100%',
+                    minWidth: 200,
+                    tableLayout: 'fixed',
+                } },
+                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))))));
 }
-export default ItemList;

package/dist/components/types.d.ts

@@ -4,9 +4,10 @@ export type TBrandObj = {
     description: string;
 };
 export type TFrameObj = {
+    frame: string;
     name: string;
-    length: number;
-    width: number;
-    id: string;
+    width: string;
+    height: string;
+    rest: string;
 };
 //# 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,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,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,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"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ItemList } from './components/ItemList';
+export { ItemList } from './components/ItemList';
 export type { TColumn, TItem, TItemFilter } from './components/itemTypes';
 export { BrandList } from './components/BrandList';
 export { FrameList } from './components/FrameList';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -1,3 +1,3 @@
-export { default as ItemList } from './components/ItemList';
+export { ItemList } from './components/ItemList';
 export { BrandList } from './components/BrandList';
 export { FrameList } from './components/FrameList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",