@etsoo/materialui 1.0.57 → 1.0.59

package/__tests__/SelectEx.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SelectEx } from '../src';
 import { findByText, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { Utils } from '@etsoo/shared';
+import { ListType1, Utils } from '@etsoo/shared';
 import { act } from 'react-dom/test-utils';
 
 it('Render SelectEx', async () => {
@@ -54,16 +54,16 @@ it('Render SelectEx', async () => {
 
 it('Render multiple SelectEx', async () => {
     // Arrange
-    type T = { id: number; name: string };
+    type T = ListType1;
     const options: T[] = [
-        { id: 1, name: 'Name 1' },
-        { id: 2, name: 'Name 2' },
-        { id: 3, name: 'Name 3' }
+        { id: '1', label: 'Name 1' },
+        { id: '2', label: 'Name 2' },
+        { id: '3', label: 'Name 3' }
     ];
 
     const itemChangeCallback = jest.fn((option, userAction) => {
-        if (userAction) expect(option.id).toBe(3);
-        else expect(option.id).toBe(1);
+        if (userAction) expect(option.id).toBe('3');
+        else expect(option.id).toBe('1');
     });
 
     // Render component
@@ -72,10 +72,8 @@ it('Render multiple SelectEx', async () => {
             options={options}
             name="test"
             onItemChange={itemChangeCallback}
-            value={[1, 2]}
+            value={['1', '2']}
             multiple
-            search
-            labelField="name"
         />
     );
 
@@ -86,15 +84,22 @@ it('Render multiple SelectEx', async () => {
     fireEvent.mouseDown(button); // Not click
 
     // Get list item
+    const itemName1 = await findByText(baseElement, 'Name 1');
+    const checkbox1 = itemName1.closest('li')?.querySelector('input');
+
+    expect(checkbox1?.checked).toBeTruthy();
+
     const itemName3 = await findByText(baseElement, 'Name 3');
     expect(itemName3.nodeName).toBe('SPAN');
 
     // Checkbox
-    const checkbox = itemName3.closest('li')?.querySelector('input');
+    const checkbox3 = itemName3.closest('li')?.querySelector('input');
 
     act(() => {
-        checkbox?.click();
+        checkbox3?.click();
     });
 
+    expect(checkbox3?.checked).toBeTruthy();
+
     expect(itemChangeCallback).toBeCalledTimes(2);
 });

package/lib/SelectEx.js

@@ -46,13 +46,7 @@ export function SelectEx(props) {
     }, [options, propertyWay]);
     // Local value
     const v = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    const valueSource = multiple
-        ? v
-            ? Array.isArray(v)
-                ? v
-                : [v]
-            : []
-        : v !== null && v !== void 0 ? v : '';
+    const valueSource = React.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v !== null && v !== void 0 ? v : ''), [multiple, v]);
     // Value state
     const [valueState, setValueStateBase] = React.useState(valueSource);
     const valueRef = React.useRef();
@@ -66,16 +60,10 @@ export function SelectEx(props) {
     }, [valueSource]);
     // Label id
     const labelId = `selectex-label-${name}`;
-    // Item checked or not
-    const itemChecked = (id) => {
-        if (Array.isArray(valueState))
-            return valueState.indexOf(id) !== -1;
-        return valueState === id;
-    };
     // Set item
     const setItemValue = (id) => {
         var _a;
-        if (id != valueRef.current) {
+        if (id !== valueRef.current) {
             // Difference
             const diff = multiple
                 ? Utils.arrayDifferences(id, valueRef.current)
@@ -136,7 +124,7 @@ export function SelectEx(props) {
             isMounted.current = false;
             input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
         };
-    }, []);
+    }, [multiple]);
     // Layout
     return (React.createElement(Stack, { direction: "row" },
         React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
@@ -155,7 +143,10 @@ export function SelectEx(props) {
                             return;
                     }
                     // Set item value
-                    const diff = setItemValue(event.target.value);
+                    const value = event.target.value;
+                    if (multiple && !Array.isArray(value))
+                        return;
+                    const diff = setItemValue(value);
                     if (diff != null) {
                         doItemChange(localOptions, diff, true);
                     }
@@ -183,7 +174,9 @@ export function SelectEx(props) {
                     }, style: itemStyle == null
                         ? undefined
                         : itemStyle(option) },
-                    multiple && (React.createElement(Checkbox, { checked: itemChecked(id) })),
+                    multiple && (React.createElement(Checkbox, { checked: Array.isArray(valueState)
+                            ? valueState.includes(id)
+                            : valueState === id })),
                     React.createElement(ListItemText, { primary: label }),
                     itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
             })),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.57",
+    "version": "1.0.59",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/SelectEx.tsx

@@ -8,7 +8,6 @@ import {
     MenuItem,
     OutlinedInput,
     Select,
-    SelectChangeEvent,
     SelectProps,
     Stack
 } from '@mui/material';
@@ -178,13 +177,10 @@ export function SelectEx<
 
     // Local value
     const v = defaultValue ?? value;
-    const valueSource = multiple
-        ? v
-            ? Array.isArray(v)
-                ? v
-                : [v]
-            : []
-        : v ?? '';
+    const valueSource = React.useMemo(
+        () => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ''),
+        [multiple, v]
+    );
 
     // Value state
     const [valueState, setValueStateBase] =
@@ -202,15 +198,9 @@ export function SelectEx<
     // Label id
     const labelId = `selectex-label-${name}`;
 
-    // Item checked or not
-    const itemChecked = (id: unknown) => {
-        if (Array.isArray(valueState)) return valueState.indexOf(id) !== -1;
-        return valueState === id;
-    };
-
     // Set item
     const setItemValue = (id: unknown) => {
-        if (id != valueRef.current) {
+        if (id !== valueRef.current) {
             // Difference
             const diff = multiple
                 ? Utils.arrayDifferences(
@@ -279,7 +269,7 @@ export function SelectEx<
             isMounted.current = false;
             input?.removeEventListener('change', inputChange);
         };
-    }, []);
+    }, [multiple]);
 
     // Layout
     return (
@@ -331,7 +321,10 @@ export function SelectEx<
                         }
 
                         // Set item value
-                        const diff = setItemValue(event.target.value);
+                        const value = event.target.value;
+                        if (multiple && !Array.isArray(value)) return;
+
+                        const diff = setItemValue(value);
                         if (diff != null) {
                             doItemChange(localOptions, diff, true);
                         }
@@ -376,7 +369,13 @@ export function SelectEx<
                                 }
                             >
                                 {multiple && (
-                                    <Checkbox checked={itemChecked(id)} />
+                                    <Checkbox
+                                        checked={
+                                            Array.isArray(valueState)
+                                                ? valueState.includes(id)
+                                                : valueState === id
+                                        }
+                                    />
                                 )}
                                 <ListItemText primary={label} />
                                 {itemIconRenderer && (