@etsoo/react 1.5.79 → 1.5.80

package/__tests__/mu/ComboBox.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ComboBox } from '../../src';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+it('Render ComboBox', async () => {
+    // Arrange
+    type T = { id: number; name: string };
+    const options: T[] = [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' }
+    ];
+
+    render(
+        <ComboBox<T>
+            name="Test"
+            options={options}
+            labelField="name"
+            label="Test"
+        />
+    );
+
+    // Act, click the list
+    const clicked = fireEvent.click(screen.getByRole('button'));
+    expect(clicked).toBeTruthy();
+
+    // Get list item
+    const item = screen.getByText('Name 1');
+    expect(item.nodeName).toBe('LI');
+});

package/__tests__/mu/NotifierMUTests.tsx

@@ -14,7 +14,7 @@ root.append(container);
 
 // The state provider
 const Provider = NotifierMU.setup();
-const reactRoot = createRoot(container); // createRoot(container!) if you use TypeScript
+const reactRoot = createRoot(container);
 
 act(() => {
     // Concorrent renderer needs act block

package/__tests__/mu/SelectEx.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SelectEx } from '../../src';
+import { findByText, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+it('Render SelectEx', async () => {
+    // Arrange
+    type T = { id: number; name: string };
+    const options: T[] = [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' }
+    ];
+
+    // Render component
+    const { baseElement } = render(
+        <SelectEx<T> options={options} name="test" search labelField="name" />
+    );
+
+    // Act, click to show the list
+    const button = screen.getByRole('button');
+    fireEvent.mouseDown(button); // Not click
+
+    // Get list item
+    const item = await findByText(baseElement, 'Name 2');
+    expect(item.nodeName).toBe('SPAN');
+});

package/lib/mu/SelectEx.d.ts

@@ -16,7 +16,7 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
     /**
      * Item icon renderer
      */
-    itemIconRenderer?: (id: unknown) => React.ReactNode;
+    itemIconRenderer?: (id: T[D]) => React.ReactNode;
     /**
      * Label field
      */
@@ -28,7 +28,7 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
     /**
      * Item click handler
      */
-    onItemClick?: (event: React.MouseEvent, id: unknown) => void;
+    onItemClick?: (event: React.MouseEvent, option: T) => void;
     /**
      * On load data handler
      */

package/lib/mu/SelectEx.js

@@ -77,7 +77,7 @@ export function SelectEx(props) {
     const getLabel = (option) => {
         return typeof labelField === 'function'
             ? labelField(option)
-            : new String(option[labelField]);
+            : option[labelField];
     };
     // Refs
     const divRef = React.useRef();
@@ -142,7 +142,7 @@ export function SelectEx(props) {
             // Option
             return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
                     if (onItemClick) {
-                        onItemClick(event, id);
+                        onItemClick(event, option);
                         if (event.defaultPrevented)
                             return;
                     }
@@ -151,6 +151,6 @@ export function SelectEx(props) {
                 } },
                 multiple && React.createElement(Checkbox, { checked: itemChecked(id) }),
                 React.createElement(ListItemText, { primary: label }),
-                itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(id)))));
+                itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
         }))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.79",
+    "version": "1.5.80",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,9 +51,9 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.82",
+        "@etsoo/appscript": "^1.2.85",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/shared": "^1.1.48",
+        "@etsoo/shared": "^1.1.51",
         "@mui/icons-material": "^5.10.2",
         "@mui/material": "^5.10.2",
         "@types/pica": "^9.0.1",
@@ -79,17 +79,17 @@
         "@babel/plugin-transform-runtime": "^7.18.10",
         "@babel/preset-env": "^7.18.10",
         "@babel/runtime-corejs3": "^7.18.9",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.3.0",
         "@types/jest": "^28.1.8",
-        "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^5.35.1",
         "@typescript-eslint/parser": "^5.35.1",
-        "eslint": "^8.22.0",
+        "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.0",
+        "eslint-plugin-react": "^7.31.1",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
-        "react-test-renderer": "^18.2.0",
         "ts-jest": "^28.0.8",
         "typescript": "^4.8.2"
     }

package/src/mu/SelectEx.tsx

@@ -42,7 +42,7 @@ export type SelectExProps<
     /**
      * Item icon renderer
      */
-    itemIconRenderer?: (id: unknown) => React.ReactNode;
+    itemIconRenderer?: (id: T[D]) => React.ReactNode;
 
     /**
      * Label field
@@ -57,7 +57,7 @@ export type SelectExProps<
     /**
      * Item click handler
      */
-    onItemClick?: (event: React.MouseEvent, id: unknown) => void;
+    onItemClick?: (event: React.MouseEvent, option: T) => void;
 
     /**
      * On load data handler
@@ -172,7 +172,7 @@ export function SelectEx<
     const getLabel = (option: T) => {
         return typeof labelField === 'function'
             ? labelField(option)
-            : new String(option[labelField]);
+            : (option[labelField] as string);
     };
 
     // Refs
@@ -268,7 +268,7 @@ export function SelectEx<
                             value={id}
                             onClick={(event) => {
                                 if (onItemClick) {
-                                    onItemClick(event, id);
+                                    onItemClick(event, option);
                                     if (event.defaultPrevented) return;
                                 }
                                 if (!multiple) setItemValue(id);
@@ -278,7 +278,7 @@ export function SelectEx<
                             <ListItemText primary={label} />
                             {itemIconRenderer && (
                                 <ListItemRightIcon>
-                                    {itemIconRenderer(id)}
+                                    {itemIconRenderer(option[idField])}
                                 </ListItemRightIcon>
                             )}
                         </MenuItem>