frame.select 1.0.4 → 1.0.6

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ItemFilter.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemFilter.test.d.ts","sourceRoot":"","sources":["../../src/components/ItemFilter.test.tsx"],"names":[],"mappings":""}

package/dist/components/ItemFilter.test.js

@@ -0,0 +1,41 @@
+import { render, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import ItemFilter from './ItemFilter';
+import React from 'react';
+describe('ItemFilter', () => {
+    it('should clear the filter when clearFilter is called', () => {
+        const setFilterMock = vi.fn();
+        const itemFilter = {
+            filter: 'test',
+            setFilter: setFilterMock,
+            placeholder: 'Filter Items',
+            property: 'name',
+            filterMatches: vi.fn(),
+        };
+        const { getByPlaceholderText, getByRole } = render(React.createElement(ItemFilter, { itemFilter: itemFilter }));
+        const input = getByPlaceholderText('Filter Items');
+        const button = getByRole('button');
+        // Ensure the input has the initial filter value
+        expect(input.value).toBe('test');
+        // Click the clear button
+        fireEvent.click(button);
+        // Ensure the setFilter function was called with an empty string
+        expect(setFilterMock).toHaveBeenCalledWith('');
+    });
+    it('should update the filter when handleInputChange is called', () => {
+        const setFilterMock = vi.fn();
+        const itemFilter = {
+            filter: '',
+            setFilter: setFilterMock,
+            placeholder: 'Filter Items',
+            property: 'name',
+            filterMatches: vi.fn(),
+        };
+        const { getByPlaceholderText } = render(React.createElement(ItemFilter, { itemFilter: itemFilter }));
+        const input = getByPlaceholderText('Filter Items');
+        // Simulate typing in the input field
+        fireEvent.change(input, { target: { value: 'new filter' } });
+        // Ensure the setFilter function was called with the new value
+        expect(setFilterMock).toHaveBeenCalledWith('new filter');
+    });
+});

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

package/dist/components/ItemList.js

@@ -86,13 +86,12 @@ function ItemList({ itemList, renderItem, itemFilter, clickFunc, extraColumns =
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
     });
-    return (React.createElement("div", null,
-        React.createElement(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);
-                })))))))));
+    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);
+            }))))))));
 }
 export default ItemList;

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

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=ItemList.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemList.test.d.ts","sourceRoot":"","sources":["../../src/components/ItemList.test.tsx"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC"}

package/dist/components/ItemList.test.js

@@ -0,0 +1,74 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { createColumnHelper } from '@tanstack/react-table';
+import React from 'react';
+import ItemList from './ItemList';
+describe('ItemList', () => {
+    const itemList = [
+        { name: 'Item 1' },
+        { name: 'Item 2' },
+        { name: 'Item 3' },
+    ];
+    const filterMatches = (item, filter) => item.name.includes(filter);
+    // const filterEvent = vi.fn()
+    const renderItem = (item) => React.createElement("span", null, item);
+    const clickFunc = vi.fn();
+    const itemFilter = {
+        filter: 'Item',
+        setFilter: vi.fn(),
+        property: 'name',
+        filterMatches,
+        placeholder: 'Filter Items',
+    };
+    it('renders the item list', () => {
+        render(React.createElement(ItemList, { itemList: itemList }));
+        itemList.forEach((item) => {
+            expect(screen.getByText(item.name)).toBeInTheDocument();
+        });
+    });
+    it('filters the item list based on filterMatches', () => {
+        render(React.createElement(ItemList, { itemList: itemList, itemFilter: itemFilter }));
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+        expect(screen.getByText('Item 2')).toBeInTheDocument();
+        expect(screen.getByText('Item 3')).toBeInTheDocument();
+    });
+    // it('calls filterEvent when filter is applied', () => {
+    //   render(<ItemList itemList={itemList} filterEvent={filterEvent} itemFilter={itemFilter} />)
+    //   expect(filterEvent).toHaveBeenCalledWith(itemList)
+    // })
+    it('renders custom item using renderItem', () => {
+        render(React.createElement(ItemList, { itemList: itemList, renderItem: renderItem }));
+        itemList.forEach((item) => {
+            expect(screen.getByText(item.name)).toBeInTheDocument();
+        });
+    });
+    it('calls clickFunc with the correct cell when an item is clicked', () => {
+        render(React.createElement(ItemList, { itemList: itemList, clickFunc: clickFunc }));
+        const itemButton = screen.getByText('Item 1').closest('button');
+        fireEvent.click(itemButton);
+        expect(clickFunc).toHaveBeenCalled();
+        expect(clickFunc.mock.calls[0][0].getValue()).toBe('Item 1');
+    });
+});
+describe('ItemList - createColumnHelper', () => {
+    it('creates columns correctly', () => {
+        const columnHelper = createColumnHelper();
+        const columns = [
+            columnHelper.accessor('name', {
+                header: 'Name',
+                cell: (info) => React.createElement("span", null, info.getValue()),
+            }),
+            columnHelper.accessor('age', {
+                header: 'Age',
+                cell: (info) => React.createElement("span", null, info.getValue()),
+            }),
+        ];
+        expect(columns).toHaveLength(2);
+        expect(columns[0].accessorKey).toBe('name');
+        expect(columns[0].header).toBe('Name');
+        expect(typeof columns[0].cell).toBe('function');
+        expect(columns[1].header).toBe('Age');
+        expect(typeof columns[1].cell).toBe('function');
+    });
+});

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/app.tsx","../src/index.ts","../src/main.tsx","../src/vite-env.d.ts","../src/components/itemfilter.tsx","../src/components/itemlist.tsx","../src/components/itemtypes.ts"],"version":"5.8.3"}
+{"root":["../src/app.tsx","../src/index.ts","../src/main.tsx","../src/vite-env.d.ts","../src/components/itemfilter.test.tsx","../src/components/itemfilter.tsx","../src/components/itemlist.test.tsx","../src/components/itemlist.tsx","../src/components/itemtypes.ts"],"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,7 @@
     "build": "tsc -b",
     "build-and-vite": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest --config vitest.config.ts",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -28,6 +29,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
@@ -35,8 +39,10 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vitest": "^3.0.9"
   }
 }