frame.select 1.0.8 → 1.1.0

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

package/dist/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import ItemList from './components/ItemList';
 import { useState } from 'react';
 import React from 'react';
+import { BrandList } from './components/BrandList';
 function App() {
     const brands = [
         {
@@ -10,36 +11,42 @@ function App() {
             id: 1,
             description: 'Description of Adidas',
             logo: 'https://via.placeholder.com/150',
+            item: ['Adidas'],
         },
         {
             name: 'Nike',
             id: 2,
             description: 'Description of Nike',
             logo: 'https://via.placeholder.com/150',
+            item: ['Nike'],
         },
         {
             name: 'Puma',
             id: 3,
             description: 'Description of Puma',
             logo: 'https://via.placeholder.com/150',
+            item: ['Puma'],
         },
         {
             name: 'Reebok',
             id: 4,
             description: 'Description of Reebok',
             logo: 'https://via.placeholder.com/150',
+            item: ['Reebok'],
         },
         {
             name: 'Under Armour',
             id: 5,
             description: 'Description of Under Armour',
             logo: 'https://via.placeholder.com/150',
+            item: ['Under Armour'],
         },
         {
             name: 'New Balance',
             id: 6,
             description: 'Description of New Balance',
             logo: 'https://via.placeholder.com/150',
+            item: ['New Balance'],
         },
     ];
     const columnHelper = createColumnHelper();
@@ -74,6 +81,7 @@ function App() {
     const renderItem = (item) => React.createElement("h4", null, item);
     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(ItemList, { itemList: brands, renderItem: renderItem, clickFunc: onClickItem, itemFilter: tItemFilter, extraColumns: colWidth }),
+        React.createElement(BrandList, { brandList: brands, renderItem: renderItem, clickFunc: onClickItem, extraColumns: colWidth })));
 }
 export default App;

package/dist/components/BrandFilter.d.ts

@@ -0,0 +1,6 @@
+import { Column } from '@tanstack/react-table';
+import React from 'react';
+export declare function BrandFilter({ column }: {
+    column: Column<any, unknown>;
+}): React.JSX.Element;
+//# sourceMappingURL=BrandFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrandFilter.d.ts","sourceRoot":"","sources":["../../src/components/BrandFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAI/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;CAAE,qBAgDvE"}

package/dist/components/BrandFilter.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { DebouncedInput } from './DebounceInput';
+// import { Message } from '../../../../common/commands';
+import React from 'react';
+export function BrandFilter({ column }) {
+    const columnFilterValue = column.getFilterValue();
+    const [value, setFilterValue] = React.useState('');
+    // const { filterVariant } = column.columnDef.meta ?? {};
+    React.useEffect(() => {
+        console.log(`has changed`);
+        setFilterValue(columnFilterValue);
+    }, [columnFilterValue]);
+    React.useEffect(() => {
+        console.log(`BrandFilter.CommandDBBrandFilter`);
+        // window.electron.ipcRenderer.on(
+        //   Message.CommandDBBrandFilter,
+        //   (_event: unknown, data: string) => {
+        //     setVal(data);
+        //     setFilterValue(data);
+        //   }
+        // );
+    }, []);
+    // setFilterValue((columnFilterValue ?? '') as string);
+    const setVal = React.useCallback((str) => {
+        column.setFilterValue(str);
+    }, [column]);
+    return useMemo(() => (React.createElement(DebouncedInput, { className: "w-36 border shadow rounded", title: "brand", onChange: (value) => {
+            document.body.style.cursor = 'wait';
+            setVal(value);
+            document.body.style.cursor = 'default';
+        }, placeholder: `Search...`, type: "text", value: value })), [setVal, value]);
+}

package/dist/components/BrandList.d.ts

@@ -0,0 +1,13 @@
+import { Cell } from '@tanstack/react-table';
+import { TColumn } from './itemTypes';
+import { JSX } from 'react';
+import React from 'react';
+import { TBrand } from './types';
+export declare function BrandList(props: {
+    brandList: TBrand[];
+    renderItem?: (item: string) => React.ReactNode;
+    clickFunc?: (item: Cell<TBrand, unknown>) => void;
+    extraColumns?: TColumn<TBrand>[];
+    style?: React.CSSProperties;
+}): JSX.Element;
+//# sourceMappingURL=BrandList.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/BrandList.js

@@ -0,0 +1,111 @@
+import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Button, } from '@mui/material';
+import { useReactTable, getCoreRowModel, getFilteredRowModel, createColumnHelper, } from '@tanstack/react-table';
+import ItemFilter from './ItemFilter';
+import { useMemo, useState, useCallback } from 'react';
+import React from 'react';
+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
+    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) => () => {
+        if (props.clickFunc) {
+            props.clickFunc?.(cell);
+        }
+    };
+    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;
+    }
+    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) }, props.renderItem ? props.renderItem(cll) : React.createElement("div", null, cll))));
+        }
+        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;
+    }
+    const table = useReactTable({
+        data: filteredItems,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+    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, 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);
+            }))))))));
+}

package/dist/components/DebounceInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function DebouncedInput({ value: initialValue, title, onChange, debounce, }: {
+    value: string | number;
+    title: string;
+    onChange: (value: string | number) => void;
+    debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>): React.JSX.Element;
+//# sourceMappingURL=DebounceInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DebounceInput.d.ts","sourceRoot":"","sources":["../../src/components/DebounceInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EAAE,YAAY,EACnB,KAAK,EACL,QAAQ,EACR,QAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,qBAkEhE"}

package/dist/components/DebounceInput.js

@@ -0,0 +1,41 @@
+import { Box, Button, TextField } from '@mui/material';
+import CancelPresentationRounded from '@mui/icons-material/CancelPresentationRounded';
+import React from 'react';
+// import { Message } from '../../../../common/commands';
+export function DebouncedInput({ value: initialValue, title, onChange, debounce = 0, }) {
+    const [value, setValue] = React.useState(initialValue);
+    React.useEffect(() => {
+        console.log(`DebounceInput.clearTextField`);
+        // window.electron.ipcRenderer.on(
+        //   Message.CommandDBBrandClearFilter,
+        //   (_event: unknown, _data: string) => {
+        //     clearTextField();
+        //   }
+        // );
+    }, []);
+    React.useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            onChange(value);
+        }, debounce);
+        return () => clearTimeout(timeout);
+    }, [value]);
+    function clearTextField() {
+        setValue('');
+    }
+    return (React.createElement("div", null,
+        React.createElement(Box, { sx: { display: 'flex', alignItems: 'flex-end' } },
+            React.createElement(Button, { "data-testid": `button.clear-${title}`, style: {
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginLeft: '8px',
+                }, onClick: clearTextField },
+                React.createElement(CancelPresentationRounded, null)),
+            React.createElement(TextField, { id: "input-with-sx", label: title, variant: "standard", value: value, onChange: (e) => {
+                    console.log(e.target.value);
+                    setValue(e.target.value);
+                }, sx: { width: '100px' } }))));
+}

package/dist/components/ItemFilter.js

@@ -32,7 +32,7 @@ const ItemFilter = (props) => {
         props.itemFilter.setFilter('');
     }
     return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement("input", { type: "text", placeholder: props.itemFilter.placeholder ?? 'Items', value: props.itemFilter.filter, onChange: handleInputChange, style: { width: '80%' } }),
+        React.createElement("input", { type: "text", placeholder: props.itemFilter.placeholder ?? 'Items', value: props.itemFilter.filter || '', onChange: handleInputChange, style: { width: '80%' } }),
         props.itemFilter.filter !== '' ? (React.createElement(Button, { style: { minWidth: 'unset', padding: '1px' }, onClick: clearFilter },
             React.createElement(CancelPresentationIcon, null))) : (React.createElement("div", null))));
 };

package/dist/components/types.d.ts

@@ -0,0 +1,7 @@
+export type TBrand = {
+    name: string;
+    id: number;
+    description: string;
+    logo: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,3 +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';
 //# 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"}
+{"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"}

package/dist/index.js

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

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"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.9.2"}
+{"root":["../src/app.tsx","../src/index.ts","../src/main.tsx","../src/vite-env.d.ts","../src/components/brandfilter.tsx","../src/components/brandlist.tsx","../src/components/debounceinput.tsx","../src/components/itemfilter.test.tsx","../src/components/itemfilter.tsx","../src/components/itemlist.test.tsx","../src/components/itemlist.tsx","../src/components/itemtypes.ts","../src/components/types.ts"],"version":"5.9.3"}

package/package.json

@@ -1,48 +1,52 @@
-{
-  "name": "frame.select",
-  "version": "1.0.8",
-  "description": "A React component for selecting items from a list with a search bar.",
-  "license": "MIT",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b",
-    "build-and-vite": "tsc -b && vite build",
-    "lint": "eslint .",
-    "test": "vitest --config vitest.config.ts",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@tanstack/react-table": "^8.21.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.34.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.2.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^5.0.1",
-    "eslint": "^9.34.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "jsdom": "^26.1.0",
-    "typescript": "~5.9.2",
-    "typescript-eslint": "^8.40.0",
-    "vite": "^7.1.3",
-    "vitest": "^3.2.4"
-  }
-}
+{
+  "name": "frame.select",
+  "version": "1.1.0",
+  "description": "A React component for selecting items from a list with a search bar.",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b",
+    "build-and-vite": "tsc -b && vite build",
+    "lint": "eslint .",
+    "test": "vitest --config vitest.config.ts",
+    "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"
+  },
+  "devDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@eslint/js": "^9.39.1",
+    "@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-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jsdom": "^27.3.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15"
+  }
+}