frame.select 1.1.0 → 1.1.1

package/dist/App.js

@@ -10,43 +10,37 @@ function App() {
             name: 'Adidas',
             id: 1,
             description: 'Description of Adidas',
-            logo: 'https://via.placeholder.com/150',
-            item: ['Adidas'],
+            // item: ['Adidas'],
         },
         {
             name: 'Nike',
             id: 2,
             description: 'Description of Nike',
-            logo: 'https://via.placeholder.com/150',
-            item: ['Nike'],
+            // item: ['Nike'],
         },
         {
             name: 'Puma',
             id: 3,
             description: 'Description of Puma',
-            logo: 'https://via.placeholder.com/150',
-            item: ['Puma'],
+            // item: ['Puma'],
         },
         {
             name: 'Reebok',
             id: 4,
             description: 'Description of Reebok',
-            logo: 'https://via.placeholder.com/150',
-            item: ['Reebok'],
+            // item: ['Reebok'],
         },
         {
             name: 'Under Armour',
             id: 5,
             description: 'Description of Under Armour',
-            logo: 'https://via.placeholder.com/150',
-            item: ['Under Armour'],
+            // item: ['Under Armour'],
         },
         {
             name: 'New Balance',
             id: 6,
             description: 'Description of New Balance',
-            logo: 'https://via.placeholder.com/150',
-            item: ['New Balance'],
+            // item: ['New Balance'],
         },
     ];
     const columnHelper = createColumnHelper();
@@ -64,6 +58,9 @@ function App() {
     const onClickItem = (item) => {
         window.alert(`Item clicked: ${item.getValue()}\n${JSON.stringify(item.row.original)}`);
     };
+    const onClickBrand = (index) => {
+        window.alert(`Item clicked: ${index}\n${JSON.stringify(brands[index], null, 2)}`);
+    };
     const [filter, setFilter] = useState('');
     function filterMatches(item, fltr) {
         const match = item.name
@@ -82,6 +79,8 @@ function App() {
     return (React.createElement(React.Fragment, null,
         React.createElement("h1", null, "Brand List"),
         React.createElement(ItemList, { itemList: brands, renderItem: renderItem, clickFunc: onClickItem, itemFilter: tItemFilter, extraColumns: colWidth }),
-        React.createElement(BrandList, { brandList: brands, renderItem: renderItem, clickFunc: onClickItem, extraColumns: colWidth })));
+        React.createElement(BrandList, { brandList: brands, onClick: onClickBrand, 
+            // renderItem={renderItem}
+            extraColumns: colWidth })));
 }
 export default App;

package/dist/components/BrandList.d.ts

@@ -1,13 +1,12 @@
-import { Cell } from '@tanstack/react-table';
 import { TColumn } from './itemTypes';
 import { JSX } from 'react';
 import React from 'react';
-import { TBrand } from './types';
+import { TBrandObj } from './types';
 export declare function BrandList(props: {
-    brandList: TBrand[];
+    brandList: TBrandObj[];
+    onClick?: (index: number) => void;
     renderItem?: (item: string) => React.ReactNode;
-    clickFunc?: (item: Cell<TBrand, unknown>) => void;
-    extraColumns?: TColumn<TBrand>[];
+    extraColumns?: TColumn<TBrandObj>[];
     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":"AASA,OAAO,EAIL,IAAI,EAGL,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,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CAgLd"}
+{"version":3,"file":"BrandList.d.ts","sourceRoot":"","sources":["../../src/components/BrandList.tsx"],"names":[],"mappings":"AAmBA,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,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,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,CAmLd"}

package/dist/components/BrandList.js

@@ -1,5 +1,5 @@
 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, useState, useCallback } from 'react';
 import React from 'react';
@@ -60,9 +60,12 @@ export function BrandList(props) {
             columns.push(col.column);
         }
     });
-    const onClick = (cell) => () => {
-        if (props.clickFunc) {
-            props.clickFunc?.(cell);
+    const onClick = (index) => () => {
+        if (props.onClick) {
+            props.onClick?.(index);
+        }
+        else {
+            console.log(`Clicked item index: ${index}`);
         }
     };
     function displayHeader(header) {
@@ -88,7 +91,9 @@ export function BrandList(props) {
         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) }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll))));
+                React.createElement(Button, { onClick: onClick(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)));

package/dist/components/types.d.ts

@@ -1,7 +1,6 @@
-export type TBrand = {
+export type TBrandObj = {
     name: string;
     id: number;
     description: string;
-    logo: 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,MAAM,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,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,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { default as ItemList } from './components/ItemList';
 export type { TColumn, TItem, TItemFilter } from './components/itemTypes';
 export { BrandList } from './components/BrandList';
-export type { TBrand } from './components/types';
+export type { TBrandObj } from './components/types';
 //# sourceMappingURL=index.d.ts.map

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,YAAY,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}
+{"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,YAAY,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",
@@ -32,16 +32,16 @@
   "devDependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.25",
     "globals": "^16.5.0",
     "jsdom": "^27.3.0",
     "typescript": "~5.9.3",