frame.select 1.2.5 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/ItemList.d.ts +1 -0
  2. package/dist/components/ItemList.d.ts.map +1 -1
  3. package/dist/components/ItemList.js +16 -5
  4. package/package.json +1 -1
package/dist/components/ItemList.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare function ItemList<T extends TItem>(props: {
9
9
  extraColumns?: TColumn<T>[];
10
10
  style?: React.CSSProperties;
11
11
  backgroundColor?: string;
12
+ selectColor?: string;
12
13
  scrollbarWidth?: number;
13
14
  mainColumnWidth?: number;
14
15
  height?: number | string;
package/dist/components/ItemList.d.ts.map CHANGED
@@ -1 +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;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,GAAG,CAAC,OAAO,CAsZd"}
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,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 CHANGED
@@ -5,7 +5,7 @@ import { useMemo, useState, useCallback } from 'react';
5
5
  import React from 'react';
6
6
  export function ItemList(props) {
7
7
  'use no memo'; // For React Compiler compatibility with TanStack Table
8
- const { itemList, backgroundColor = 'lightgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
8
+ const { itemList, backgroundColor = 'lightgrey', selectColor = 'darkgrey', scrollbarWidth = 50, mainColumnWidth = 160, height = 300, placeholder = 'Items', defaultHeader = 'Name', } = props;
9
9
  const scrollbarStyles = {
10
10
  '&::-webkit-scrollbar': {
11
11
  width: `${scrollbarWidth}px`,
@@ -27,6 +27,7 @@ export function ItemList(props) {
27
27
  scrollbarGutter: 'stable',
28
28
  };
29
29
  const [filter, setFilter] = useState('');
30
+ const [selectedIndex, setSelectedIndex] = useState(null);
30
31
  const filterMatches = useCallback((item, fltr) => {
31
32
  const match = item.name
32
33
  .toLowerCase()
@@ -84,6 +85,7 @@ export function ItemList(props) {
84
85
  }
85
86
  });
86
87
  const onClick = useCallback((cell, index) => () => {
88
+ setSelectedIndex(index);
87
89
  if (props.onClick) {
88
90
  props.onClick(cell, index);
89
91
  }
@@ -205,10 +207,19 @@ export function ItemList(props) {
205
207
  }))));
206
208
  }, [cellWidth, defaultHeader, displayHeaderCell, extraCols]);
207
209
  const renderBody = React.useCallback((rows, width, bgColor = backgroundColor) => {
208
- return rows.map((row, index) => (React.createElement(TableRow, { "data-testid": `${defaultHeader}.tb.row.${index}`, key: row.id }, row.getVisibleCells().map((cell) => {
209
- return displayBodyCell(cell, index, width, bgColor);
210
- }))));
211
- }, [backgroundColor, defaultHeader, displayBodyCell]);
210
+ return rows.map((row, index) => {
211
+ const rowBgColor = selectedIndex === index ? selectColor : bgColor;
212
+ return (React.createElement(TableRow, { "data-testid": `${defaultHeader}.tb.row.${index}`, key: row.id }, row.getVisibleCells().map((cell) => {
213
+ return displayBodyCell(cell, index, width, rowBgColor);
214
+ })));
215
+ });
216
+ }, [
217
+ backgroundColor,
218
+ defaultHeader,
219
+ displayBodyCell,
220
+ selectColor,
221
+ selectedIndex,
222
+ ]);
212
223
  return (React.createElement("div", { "data-testid": `${defaultHeader}.table`, style: {
213
224
  height,
214
225
  overflow: 'hidden',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frame.select",
3
- "version": "1.2.5",
3
+ "version": "1.2.6",
4
4
  "description": "A React component for selecting items from a list with a search bar.",
5
5
  "license": "MIT",
6
6
  "type": "module",