@etsoo/materialui 1.0.7 → 1.0.8

package/__tests__/SelectEx.tsx

@@ -2,6 +2,8 @@ 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 { act } from 'react-dom/test-utils';
 
 it('Render SelectEx', async () => {
     // Arrange
@@ -11,16 +13,41 @@ it('Render SelectEx', async () => {
         { id: 2, name: 'Name 2' }
     ];
 
+    Utils.addBlankItem(options, 'id', 'name');
+
+    const itemChangeCallback = jest.fn((option, userAction) => {
+        if (userAction) expect(option).toBeUndefined();
+        else expect(option.id).toBe(1);
+    });
+
     // Render component
     const { baseElement } = render(
-        <SelectEx<T> options={options} name="test" search labelField="name" />
+        <SelectEx<T>
+            options={options}
+            name="test"
+            onItemChange={itemChangeCallback}
+            value={1}
+            search
+            labelField="name"
+        />
     );
 
+    expect(itemChangeCallback).toBeCalled();
+
     // 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');
+    const itemName2 = await findByText(baseElement, 'Name 2');
+    expect(itemName2.nodeName).toBe('SPAN');
+
+    const itemBlank = await findByText(baseElement, '---');
+    expect(itemBlank.nodeName).toBe('SPAN');
+
+    act(() => {
+        itemBlank.click();
+    });
+
+    expect(itemChangeCallback).toBeCalledTimes(2);
 });

package/lib/HiSelector.d.ts

@@ -44,7 +44,7 @@ export declare type HiSelectorProps<T extends object, D extends DataTypes.Keys<T
     /**
      * Item change callback
      */
-    onItemChange?: (option?: T) => void;
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
     /**
      * Required
      */

package/lib/HiSelector.js

@@ -31,7 +31,7 @@ export function HiSelector(props) {
         if (!userAction &&
             (option == null || option[idField] !== values.at(-1)))
             return;
-        onItemChange(option);
+        onItemChange(option, userAction);
     };
     React.useEffect(() => {
         if (values.length > 0) {

package/lib/SelectEx.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
 /**
  * Extended select component
  * @param props Props
@@ -12,30 +11,33 @@ import { ReactUtils } from '@etsoo/react';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
-    const [localOptions, setOptions] = React.useState(options);
+    const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(true);
     const doItemChange = (options, value, userAction) => {
         if (onItemChange == null)
             return;
-        if (value == null || value === '')
+        if (value == null || value === '') {
             onItemChange(undefined, userAction);
+            return;
+        }
         const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
     const setOptionsAdd = (options) => {
         setOptions(options);
-        if (valueState != null && valueState !== '')
-            doItemChange(options, valueState, false);
+        if (localValue != null && localValue !== '')
+            doItemChange(options, localValue, false);
     };
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
-            setOptionsAdd(options);
-    }, [JSON.stringify(options), propertyWay]);
+        if (options == null || !propertyWay)
+            return;
+        setOptionsAdd(options);
+    }, [options, propertyWay]);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
     let localValue;
@@ -72,14 +74,15 @@ export function SelectEx(props) {
     };
     // Set item
     const setItemValue = (id) => {
-        var _a;
         if (id != valueState) {
             setValueState(id);
-            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            /*
+            const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                ReactUtils.triggerChange(input, id, false);
+                ReactUtils.triggerChange(input, id as string, false);
             }
+            */
         }
     };
     // Get option id
@@ -135,8 +138,7 @@ export function SelectEx(props) {
                 if (onChange)
                     onChange(event, child);
                 doItemChange(localOptions, event.target.value, true);
-                if (multiple)
-                    handleChange(event);
+                handleChange(event);
             }, renderValue: (selected) => {
                 // The text shows up
                 return localOptions
@@ -160,8 +162,6 @@ export function SelectEx(props) {
                         if (event.defaultPrevented)
                             return;
                     }
-                    if (!multiple)
-                        setItemValue(id);
                 }, style: itemStyle == null
                     ? undefined
                     : itemStyle(option) },

package/package.json

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

package/src/HiSelector.tsx

@@ -59,7 +59,7 @@ export type HiSelectorProps<
     /**
      * Item change callback
      */
-    onItemChange?: (option?: T) => void;
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
 
     /**
      * Required
@@ -125,7 +125,7 @@ export function HiSelector<
             (option == null || option[idField] !== values.at(-1))
         )
             return;
-        onItemChange(option);
+        onItemChange(option, userAction);
     };
 
     React.useEffect(() => {

package/src/SelectEx.tsx

@@ -20,7 +20,6 @@ import {
     ListType,
     Utils
 } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
 
 /**
  * Extended select component props
@@ -123,7 +122,7 @@ export function SelectEx<
         onLoadData,
         multiple = false,
         name,
-        options = [],
+        options,
         search = false,
         autoAddBlankItem = search,
         value,
@@ -133,7 +132,7 @@ export function SelectEx<
     } = props;
 
     // Options state
-    const [localOptions, setOptions] = React.useState(options);
+    const [localOptions, setOptions] = React.useState<readonly T[]>([]);
     const isMounted = React.useRef(true);
 
     const doItemChange = (
@@ -142,23 +141,27 @@ export function SelectEx<
         userAction: boolean
     ) => {
         if (onItemChange == null) return;
-        if (value == null || value === '') onItemChange(undefined, userAction);
+        if (value == null || value === '') {
+            onItemChange(undefined, userAction);
+            return;
+        }
         const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
 
     const setOptionsAdd = (options: readonly T[]) => {
         setOptions(options);
-        if (valueState != null && valueState !== '')
-            doItemChange(options, valueState, false);
+        if (localValue != null && localValue !== '')
+            doItemChange(options, localValue, false);
     };
 
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null) setOptionsAdd(options);
-    }, [JSON.stringify(options), propertyWay]);
+        if (options == null || !propertyWay) return;
+        setOptionsAdd(options);
+    }, [options, propertyWay]);
 
     // Local value
     const valueSource = defaultValue ?? value ?? '';
@@ -198,11 +201,13 @@ export function SelectEx<
         if (id != valueState) {
             setValueState(id);
 
+            /*
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
+            */
         }
     };
 
@@ -287,7 +292,7 @@ export function SelectEx<
                 onChange={(event, child) => {
                     if (onChange) onChange(event, child);
                     doItemChange(localOptions, event.target.value, true);
-                    if (multiple) handleChange(event);
+                    handleChange(event);
                 }}
                 renderValue={(selected) => {
                     // The text shows up
@@ -322,7 +327,6 @@ export function SelectEx<
                                     onItemClick(event, option);
                                     if (event.defaultPrevented) return;
                                 }
-                                if (!multiple) setItemValue(id);
                             }}
                             style={
                                 itemStyle == null