@etsoo/materialui 1.6.17 → 1.6.18

package/lib/cjs/ComboBoxMultiple.js

@@ -29,41 +29,29 @@ function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...restProps, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
     const [localOptions, setOptions] = react_1.default.useState(options ?? []);
     const isMounted = react_1.default.useRef(true);
-    // Local default value
-    const localValue = idValue != null
-        ? localOptions.filter((o) => o[idField] === idValue)
-        : idValues != null
-            ? localOptions.filter((o) => idValues?.includes(o[idField]))
-            : defaultValue?.concat() ?? value?.concat();
-    // State
-    // null for controlled
-    const [stateValue, setStateValue] = react_1.default.useState(null);
-    react_1.default.useEffect(() => {
-        setStateValue(localValue ?? []);
-    }, [localValue]);
-    // When options change
-    // [options] will cause infinite loop
     const propertyWay = loadData == null;
     react_1.default.useEffect(() => {
         if (propertyWay && options != null) {
             setOptions(options);
-            if (stateValue != null) {
-                if (Array.isArray(stateValue)) {
-                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
-                    setStateValue(newState);
-                }
-                else if (!options.some((option) => option[idField] === stateValue[idField])) {
-                    setStateValue(null);
-                }
-            }
         }
     }, [options, propertyWay]);
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = react_1.default.useState(null);
+    react_1.default.useEffect(() => {
+        const localValue = idValue != null
+            ? localOptions.filter((o) => o[idField] === idValue)
+            : idValues != null
+                ? localOptions.filter((o) => idValues?.includes(o[idField]))
+                : (defaultValue?.concat() ?? value?.concat());
+        setStateValue(localValue ?? []);
+    }, [localOptions, idField, idValue, idValues, defaultValue, value]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

package/lib/cjs/custom/FieldCombobox.js

@@ -38,10 +38,11 @@ const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
-    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
+    const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, inputRequired: required || inputRequired, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);
             setIds(ids);
             onChange(name, ids);
-        }, ...field.mainSlotProps }));
+        }, ...mainRests }));
 };
 exports.FieldCombobox = FieldCombobox;

package/lib/mjs/ComboBoxMultiple.js

@@ -23,41 +23,29 @@ export function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => (_jsxs("li", { ...restProps, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
     const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
-    // Local default value
-    const localValue = idValue != null
-        ? localOptions.filter((o) => o[idField] === idValue)
-        : idValues != null
-            ? localOptions.filter((o) => idValues?.includes(o[idField]))
-            : defaultValue?.concat() ?? value?.concat();
-    // State
-    // null for controlled
-    const [stateValue, setStateValue] = React.useState(null);
-    React.useEffect(() => {
-        setStateValue(localValue ?? []);
-    }, [localValue]);
-    // When options change
-    // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
         if (propertyWay && options != null) {
             setOptions(options);
-            if (stateValue != null) {
-                if (Array.isArray(stateValue)) {
-                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
-                    setStateValue(newState);
-                }
-                else if (!options.some((option) => option[idField] === stateValue[idField])) {
-                    setStateValue(null);
-                }
-            }
         }
     }, [options, propertyWay]);
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = React.useState(null);
+    React.useEffect(() => {
+        const localValue = idValue != null
+            ? localOptions.filter((o) => o[idField] === idValue)
+            : idValues != null
+                ? localOptions.filter((o) => idValues?.includes(o[idField]))
+                : (defaultValue?.concat() ?? value?.concat());
+        setStateValue(localValue ?? []);
+    }, [localOptions, idField, idValue, idValues, defaultValue, value]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

package/lib/mjs/custom/FieldCombobox.js

@@ -32,9 +32,10 @@ export const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return (_jsxs(Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
-    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
+    const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, inputRequired: required || inputRequired, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);
             setIds(ids);
             onChange(name, ids);
-        }, ...field.mainSlotProps }));
+        }, ...mainRests }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.17",
+  "version": "1.6.18",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ComboBoxMultiple.tsx

@@ -110,8 +110,8 @@ export function ComboBoxMultiple<
     openOnFocus = true,
     value,
     disableCloseOnSelect = true,
-    renderOption = (props, option, { selected }) => (
-      <li {...props}>
+    renderOption = ({ key, ...restProps }, option, { selected }) => (
+      <li key={key} {...restProps}>
         <Checkbox
           icon={icon}
           checkedIcon={checkedIcon}
@@ -137,43 +137,27 @@ export function ComboBoxMultiple<
   const [localOptions, setOptions] = React.useState(options ?? []);
   const isMounted = React.useRef(true);
 
-  // Local default value
-  const localValue: T[] | null | undefined =
-    idValue != null
-      ? localOptions.filter((o) => o[idField] === idValue)
-      : idValues != null
-      ? localOptions.filter((o) => idValues?.includes(o[idField]))
-      : defaultValue?.concat() ?? value?.concat();
+  const propertyWay = loadData == null;
+  React.useEffect(() => {
+    if (propertyWay && options != null) {
+      setOptions(options);
+    }
+  }, [options, propertyWay]);
 
   // State
   // null for controlled
   const [stateValue, setStateValue] = React.useState<T[] | null>(null);
 
   React.useEffect(() => {
-    setStateValue(localValue ?? []);
-  }, [localValue]);
+    const localValue: T[] | null | undefined =
+      idValue != null
+        ? localOptions.filter((o) => o[idField] === idValue)
+        : idValues != null
+          ? localOptions.filter((o) => idValues?.includes(o[idField]))
+          : (defaultValue?.concat() ?? value?.concat());
 
-  // When options change
-  // [options] will cause infinite loop
-  const propertyWay = loadData == null;
-  React.useEffect(() => {
-    if (propertyWay && options != null) {
-      setOptions(options);
-
-      if (stateValue != null) {
-        if (Array.isArray(stateValue)) {
-          const newState = stateValue.filter((item) =>
-            options.some((option) => option[idField] === item[idField])
-          );
-          setStateValue(newState);
-        } else if (
-          !options.some((option) => option[idField] === stateValue[idField])
-        ) {
-          setStateValue(null);
-        }
-      }
-    }
-  }, [options, propertyWay]);
+    setStateValue(localValue ?? []);
+  }, [localOptions, idField, idValue, idValues, defaultValue, value]);
 
   // Add readOnly
   const addReadOnly = (params: AutocompleteRenderInputParams) => {
@@ -258,8 +242,8 @@ export function ComboBoxMultiple<
           stateValue == null
             ? []
             : Array.isArray(stateValue)
-            ? stateValue
-            : [stateValue]
+              ? stateValue
+              : [stateValue]
         }
         disabled={disabled}
         disableCloseOnSelect={disableCloseOnSelect}

package/src/custom/FieldCombobox.tsx

@@ -44,6 +44,8 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
     );
   }
 
+  const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+
   return (
     <ComboBoxMultiple
       label={field.label ?? ""}
@@ -52,12 +54,13 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
       options={field.options}
       fullWidth
       idValues={ids}
+      inputRequired={required || inputRequired}
       onChange={(_event, value) => {
         const ids = value.map((v) => v.id);
         setIds(ids);
         onChange(name, ids);
       }}
-      {...field.mainSlotProps}
+      {...mainRests}
     />
   );
 };