frame.select 1.2.4 → 1.2.6

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

package/dist/App.js

@@ -1,4 +1,3 @@
-import { createColumnHelper } from '@tanstack/react-table';
 import './App.css';
 import { useState } from 'react';
 import React from 'react';
@@ -138,19 +137,19 @@ function App() {
             rest: stripLeadingZeros(frame.substring(28, 33)),
         }));
     }
-    const brandColumnHelper = createColumnHelper();
-    const brandColumns = [
-        brandColumnHelper.accessor((row) => row.description ?? '', {
-            header: 'description',
-            size: 300,
-            cell: (info) => React.createElement("div", null, info.getValue()),
-        }),
-    ];
-    const _extraBrandColumns = [
-        {
-            column: brandColumns[0],
-        },
-    ];
+    // const brandColumnHelper = createColumnHelper<TBrandObj>();
+    // const brandColumns = [
+    //   brandColumnHelper.accessor((row) => row.description ?? '', {
+    //     header: 'description',
+    //     size: 300,
+    //     cell: (info) => <div>{info.getValue()}</div>,
+    //   }),
+    // ];
+    // const _extraBrandColumns: TColumn<TBrandObj>[] = [
+    //   {
+    //     column: brandColumns[0],
+    //   },
+    // ];
     const onClickBrand = (cell) => {
         const brand = brands.find((b) => b.name === cell.row.original.name);
         if (brand) {

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

package/dist/components/BrandList.js

@@ -2,5 +2,5 @@ import React from 'react';
 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" }));
+    return (React.createElement(ItemList, { itemList: props.brandList, onClick: props.onClick, renderItem: props.renderItem, extraColumns: props.extraColumns ? props.extraColumns : extraBrandColumns, style: props.style, backgroundColor: props.backgroundColor, scrollbarWidth: 50, height: 300, placeholder: "Brands", defaultHeader: "Brand", testId: "name" }));
 }

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

package/dist/components/FrameList.js

@@ -61,5 +61,5 @@ export function FrameList(props) {
         // backgroundColor="lightgreen"
         // scrollbarWidth={100}
         // height={400}
-        placeholder: "Modellnummer", defaultHeader: "Frame" }));
+        placeholder: "Modellnummer", defaultHeader: "Frame", testId: "frame" }));
 }

package/dist/components/ItemList.d.ts

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

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

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

package/dist/components/ItemList.js

@@ -5,7 +5,7 @@ import { useMemo, useState, useCallback } from 'react';
 import React from 'react';
 export function ItemList(props) {
     'use no memo'; // For React Compiler compatibility with TanStack Table
-    const { itemList, backgroundColor = 'lightgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
+    const { itemList, backgroundColor = 'lightgrey', selectColor = 'darkgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
     const scrollbarStyles = {
         '&::-webkit-scrollbar': {
             width: `${scrollbarWidth}px`,
@@ -27,6 +27,7 @@ export function ItemList(props) {
         scrollbarGutter: 'stable',
     };
     const [filter, setFilter] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(null);
     const filterMatches = useCallback((item, fltr) => {
         const match = item.name
             .toLowerCase()
@@ -84,6 +85,7 @@ export function ItemList(props) {
         }
     });
     const onClick = useCallback((cell, index) => () => {
+        setSelectedIndex(index);
         if (props.onClick) {
             props.onClick(cell, index);
         }
@@ -124,10 +126,6 @@ export function ItemList(props) {
         }
         return filter;
     }, [defaultHeader, itemFilter, extraCols]);
-    const renderItem = useCallback((cell) => {
-        const cll = cell.getValue();
-        return React.createElement("div", null, cll);
-    }, []);
     const displayHeaderCell = useCallback((header, baseWidth) => {
         return (React.createElement(TableCell, { "data-testid": `${defaultHeader}.th.cell.${header.id}`, key: header.id, sx: {
                 backgroundColor,
@@ -162,7 +160,7 @@ export function ItemList(props) {
                 // minWidth: baseWidth,
                 // maxWidth: baseWidth,
                 boxSizing: 'border-box',
-            }, key: cell.id }, cell.column.columnDef.header === defaultHeader ? (React.createElement(Button, { onClick: onClick(cell, cell.row.index) }, props.renderItem
+            }, key: cell.id }, cell.column.columnDef.header === defaultHeader ? (React.createElement(Button, { "data-testid": `${defaultHeader}.tb.cell.${cell.row.original[props.testId]}.button`, onClick: onClick(cell, cell.row.index) }, props.renderItem
             ? props.renderItem(cll)
             : flexRender(cell.column.columnDef.cell, cell.getContext()))) : props.renderItem ? (props.renderItem(cll)) : (flexRender(cell.column.columnDef.cell, cell.getContext()))));
     }, [cellWidth, defaultHeader, extraCols, onClick, props]);
@@ -209,10 +207,19 @@ export function ItemList(props) {
         }))));
     }, [cellWidth, defaultHeader, displayHeaderCell, extraCols]);
     const renderBody = React.useCallback((rows, width, bgColor = backgroundColor) => {
-        return rows.map((row, index) => (React.createElement(TableRow, { "data-testid": `${defaultHeader}.tb.row.${index}`, key: row.id }, row.getVisibleCells().map((cell) => {
-            return displayBodyCell(cell, index, width, bgColor);
-        }))));
-    }, [backgroundColor, defaultHeader, displayBodyCell]);
+        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);
+            })));
+        });
+    }, [
+        backgroundColor,
+        defaultHeader,
+        displayBodyCell,
+        selectColor,
+        selectedIndex,
+    ]);
     return (React.createElement("div", { "data-testid": `${defaultHeader}.table`, style: {
             height,
             overflow: 'hidden',

package/package.json

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