@etsoo/materialui 1.2.62 → 1.2.63

package/lib/HiSelector.js

@@ -17,7 +17,6 @@ export function HiSelector(props) {
     const doChange = (event, index) => {
         const value = event.target.value;
         const itemValue = value === "" ? undefined : value;
-        updateValue(itemValue);
         const newValues = [...localValues.slice(0, index)];
         if (itemValue != null)
             newValues.push(itemValue);
@@ -33,12 +32,12 @@ export function HiSelector(props) {
         onItemChange(option, userAction);
     };
     React.useEffect(() => {
-        if (values.length > 0) {
-            setValues(values);
-            updateValue(values.at(-1));
-        }
+        setValues(values);
     }, [values]);
     const currentValue = localValues.at(-1);
+    React.useEffect(() => {
+        updateValue(currentValue);
+    }, [currentValue]);
     return (React.createElement(React.Fragment, null,
         label && (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),

package/lib/HiSelectorTL.js

@@ -20,20 +20,18 @@ export function HiSelectorTL(props) {
             if (event.isDefaultPrevented())
                 return;
         }
-        const itemValue = value ? value[idField] : undefined;
-        updateValue(itemValue);
         const newValues = [...localValues.slice(0, index)];
-        if (itemValue != null)
-            newValues.push(itemValue);
+        if (value)
+            newValues.push(value[idField]);
         setValues(newValues);
     };
     React.useEffect(() => {
-        if (values.length > 0) {
-            setValues(values);
-            updateValue(values.at(-1));
-        }
-    }, [values.toString()]);
+        setValues(values);
+    }, [values]);
     const currentValue = localValues.at(-1);
+    React.useEffect(() => {
+        updateValue(currentValue);
+    }, [currentValue]);
     return (React.createElement(React.Fragment, null,
         label && (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),

package/lib/ListChooser.d.ts

@@ -14,6 +14,10 @@ export interface ListChooserButtonProps<T extends object, D extends DataTypes.Ke
  * List chooser props
  */
 export type ListChooserProps<T extends object, D extends DataTypes.Keys<T>, Q extends object> = ListProps & {
+    /**
+     * Condition field name
+     */
+    conditionField?: string;
     /**
      * Condition renderer
      */

package/lib/ListChooser.js

@@ -29,7 +29,7 @@ export function ListChooser(props) {
         }
     });
     // Destruct
-    const { conditionRenderer = (rq, delayed) => (React.createElement(TextField, { autoFocus: true, margin: "dense", name: "title", label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
+    const { conditionField = "title", conditionRenderer = (rq, delayed) => (React.createElement(TextField, { autoFocus: true, margin: "dense", name: conditionField, label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
             Reflect.set(rq, "title", event.target.value);
             delayed.call();
         } })), itemRenderer = (item, selectProps) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.62",
+  "version": "1.2.63",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,11 +55,11 @@
     "@etsoo/react": "^1.6.94",
     "@etsoo/shared": "^1.2.7",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "@mui/x-data-grid": "^6.9.0",
+    "@mui/material": "^5.13.6",
+    "@mui/x-data-grid": "^6.9.1",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.2.13",
+    "@types/react": "^18.2.14",
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.2.6",
     "@types/react-input-mask": "^3.0.2",
@@ -85,8 +85,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^5.1.3"

package/src/HiSelector.tsx

@@ -126,7 +126,6 @@ export function HiSelector<
   const doChange = (event: SelectChangeEvent<unknown>, index: number) => {
     const value = event.target.value;
     const itemValue = value === "" ? undefined : (value as T[D]);
-    updateValue(itemValue);
 
     const newValues = [...localValues.slice(0, index)];
     if (itemValue != null) newValues.push(itemValue);
@@ -143,13 +142,13 @@ export function HiSelector<
   };
 
   React.useEffect(() => {
-    if (values.length > 0) {
-      setValues(values);
-      updateValue(values.at(-1));
-    }
+    setValues(values);
   }, [values]);
 
   const currentValue = localValues.at(-1);
+  React.useEffect(() => {
+    updateValue(currentValue);
+  }, [currentValue]);
 
   return (
     <React.Fragment>

package/src/HiSelectorTL.tsx

@@ -130,22 +130,20 @@ export function HiSelectorTL<
       if (event.isDefaultPrevented()) return;
     }
 
-    const itemValue = value ? value[idField] : undefined;
-    updateValue(itemValue);
-
     const newValues = [...localValues.slice(0, index)];
-    if (itemValue != null) newValues.push(itemValue);
+    if (value) newValues.push(value[idField]);
+
     setValues(newValues);
   };
 
   React.useEffect(() => {
-    if (values.length > 0) {
-      setValues(values);
-      updateValue(values.at(-1));
-    }
-  }, [values.toString()]);
+    setValues(values);
+  }, [values]);
 
   const currentValue = localValues.at(-1);
+  React.useEffect(() => {
+    updateValue(currentValue);
+  }, [currentValue]);
 
   return (
     <React.Fragment>

package/src/ListChooser.tsx

@@ -35,6 +35,11 @@ export type ListChooserProps<
   D extends DataTypes.Keys<T>,
   Q extends object
 > = ListProps & {
+  /**
+   * Condition field name
+   */
+  conditionField?: string;
+
   /**
    * Condition renderer
    */
@@ -116,11 +121,12 @@ export function ListChooser<
 
   // Destruct
   const {
+    conditionField = "title",
     conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
       <TextField
         autoFocus
         margin="dense"
-        name="title"
+        name={conditionField}
         label={title}
         fullWidth
         variant="standard"