@etsoo/materialui 1.6.17 → 1.6.19

package/lib/cjs/ComboBoxMultiple.js

@@ -29,47 +29,40 @@ 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) {
             Object.assign(params, { readOnly });
         }
         Object.assign(params.inputProps, { "data-reset": inputReset });
+        params.inputProps.onInvalid = (event) => {
+            if (inputRequired && stateValue != null && stateValue.length > 0) {
+                event.preventDefault();
+            }
+        };
         if (dataReadonly) {
             params.inputProps.onKeyDown = (event) => {
                 if (shared_1.Keyboard.isTypingContent(event.key)) {

package/lib/cjs/custom/CustomFieldUI.js

@@ -1,10 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldUI = CustomFieldUI;
-const react_1 = __importDefault(require("react"));
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
 /**
  * CustomFieldUI component
@@ -13,17 +9,14 @@ const CustomFieldUtils_1 = require("./CustomFieldUtils");
  */
 function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value } = props;
-    const data = react_1.default.useRef({});
-    const getValue = react_1.default.useCallback((field) => {
+    const { fields, onChange, value = {} } = props;
+    // Layout
+    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, (field) => {
         if (!field.name)
             return undefined;
-        return value?.[field.name];
-    }, [value]);
-    const doChange = react_1.default.useCallback((name, value) => {
-        data.current[name] = value;
-        onChange?.(data.current, name, value);
-    }, []);
-    // Layout
-    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, getValue, doChange);
+        return value[field.name];
+    }, (name, fieldValue) => {
+        value[name] = fieldValue;
+        onChange?.(value, name, fieldValue);
+    });
 }

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, inputRequired: required || inputRequired, name: name, options: field.options, fullWidth: true, idValues: ids, 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,47 +23,40 @@ 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) {
             Object.assign(params, { readOnly });
         }
         Object.assign(params.inputProps, { "data-reset": inputReset });
+        params.inputProps.onInvalid = (event) => {
+            if (inputRequired && stateValue != null && stateValue.length > 0) {
+                event.preventDefault();
+            }
+        };
         if (dataReadonly) {
             params.inputProps.onKeyDown = (event) => {
                 if (Keyboard.isTypingContent(event.key)) {

package/lib/mjs/custom/CustomFieldUI.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 /**
  * CustomFieldUI component
@@ -7,17 +6,14 @@ import { CustomFieldUtils } from "./CustomFieldUtils";
  */
 export function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value } = props;
-    const data = React.useRef({});
-    const getValue = React.useCallback((field) => {
+    const { fields, onChange, value = {} } = props;
+    // Layout
+    return CustomFieldUtils.create(fields, {}, (field) => {
         if (!field.name)
             return undefined;
-        return value?.[field.name];
-    }, [value]);
-    const doChange = React.useCallback((name, value) => {
-        data.current[name] = value;
-        onChange?.(data.current, name, value);
-    }, []);
-    // Layout
-    return CustomFieldUtils.create(fields, {}, getValue, doChange);
+        return value[field.name];
+    }, (name, fieldValue) => {
+        value[name] = fieldValue;
+        onChange?.(value, name, fieldValue);
+    });
 }

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, inputRequired: required || inputRequired, name: name, options: field.options, fullWidth: true, idValues: ids, 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.19",
   "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]);
-
-  // When options change
-  // [options] will cause infinite loop
-  const propertyWay = loadData == null;
-  React.useEffect(() => {
-    if (propertyWay && options != null) {
-      setOptions(options);
+    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());
 
-      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) => {
@@ -183,6 +167,12 @@ export function ComboBoxMultiple<
 
     Object.assign(params.inputProps, { "data-reset": inputReset });
 
+    params.inputProps.onInvalid = (event) => {
+      if (inputRequired && stateValue != null && stateValue.length > 0) {
+        event.preventDefault();
+      }
+    };
+
     if (dataReadonly) {
       params.inputProps.onKeyDown = (event) => {
         if (Keyboard.isTypingContent(event.key)) {
@@ -258,8 +248,8 @@ export function ComboBoxMultiple<
           stateValue == null
             ? []
             : Array.isArray(stateValue)
-            ? stateValue
-            : [stateValue]
+              ? stateValue
+              : [stateValue]
         }
         disabled={disabled}
         disableCloseOnSelect={disableCloseOnSelect}

package/src/custom/CustomFieldUI.tsx

@@ -1,5 +1,4 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 
 /**
@@ -38,23 +37,19 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
   props: CustomFieldUIProps<D>
 ) {
   // Destruct
-  const { fields, onChange, value } = props;
+  const { fields, onChange, value = {} } = props;
 
-  const data = React.useRef<Record<string, unknown>>({});
-
-  const getValue = React.useCallback(
-    (field: CustomFieldData) => {
+  // Layout
+  return CustomFieldUtils.create(
+    fields,
+    {},
+    (field) => {
       if (!field.name) return undefined;
-      return value?.[field.name];
+      return value[field.name];
     },
-    [value]
+    (name, fieldValue) => {
+      value[name] = fieldValue;
+      onChange?.(value, name, fieldValue);
+    }
   );
-
-  const doChange = React.useCallback((name: string, value: unknown) => {
-    data.current[name] = value;
-    onChange?.(data.current, name, value);
-  }, []);
-
-  // Layout
-  return CustomFieldUtils.create(fields, {}, getValue, doChange);
 }

package/src/custom/FieldCombobox.tsx

@@ -44,10 +44,13 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
     );
   }
 
+  const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+
   return (
     <ComboBoxMultiple
       label={field.label ?? ""}
       inputHelperText={field.helperText}
+      inputRequired={required || inputRequired}
       name={name}
       options={field.options}
       fullWidth
@@ -57,7 +60,7 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
         setIds(ids);
         onChange(name, ids);
       }}
-      {...field.mainSlotProps}
+      {...mainRests}
     />
   );
 };