@etsoo/materialui 1.6.18 → 1.6.20

package/lib/cjs/ComboBoxMultiple.js

@@ -32,6 +32,7 @@ function ComboBoxMultiple(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();
+    const localRef = react_1.default.useRef(undefined);
     // Options state
     const [localOptions, setOptions] = react_1.default.useState(options ?? []);
     const isMounted = react_1.default.useRef(true);
@@ -44,6 +45,11 @@ function ComboBoxMultiple(props) {
     // State
     // null for controlled
     const [stateValue, setStateValue] = react_1.default.useState(null);
+    const selectedCount = stateValue?.length ?? 0;
+    react_1.default.useEffect(() => {
+        if (localRef.current && inputRequired)
+            localRef.current.required = selectedCount === 0;
+    }, [inputRequired, selectedCount]);
     react_1.default.useEffect(() => {
         const localValue = idValue != null
             ? localOptions.filter((o) => o[idField] === idValue)
@@ -119,5 +125,5 @@ function ComboBoxMultiple(props) {
                     // Custom
                     if (onChange != null)
                         onChange(event, value, reason, details);
-                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
 }

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

@@ -39,7 +39,7 @@ const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
     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) => {
+    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);

package/lib/mjs/ComboBoxMultiple.js

@@ -26,6 +26,7 @@ export function ComboBoxMultiple(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();
+    const localRef = React.useRef(undefined);
     // Options state
     const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
@@ -38,6 +39,11 @@ export function ComboBoxMultiple(props) {
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
+    const selectedCount = stateValue?.length ?? 0;
+    React.useEffect(() => {
+        if (localRef.current && inputRequired)
+            localRef.current.required = selectedCount === 0;
+    }, [inputRequired, selectedCount]);
     React.useEffect(() => {
         const localValue = idValue != null
             ? localOptions.filter((o) => o[idField] === idValue)
@@ -113,5 +119,5 @@ export function ComboBoxMultiple(props) {
                     // Custom
                     if (onChange != null)
                         onChange(event, value, reason, details);
-                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
 }

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

@@ -33,7 +33,7 @@ export const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
         return (_jsxs(Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
     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) => {
+    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);

package/package.json

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

package/src/ComboBoxMultiple.tsx

@@ -132,6 +132,7 @@ export function ComboBoxMultiple<
 
   // Value input ref
   const inputRef = React.createRef<HTMLInputElement>();
+  const localRef = React.useRef<HTMLInputElement>(undefined);
 
   // Options state
   const [localOptions, setOptions] = React.useState(options ?? []);
@@ -148,6 +149,12 @@ export function ComboBoxMultiple<
   // null for controlled
   const [stateValue, setStateValue] = React.useState<T[] | null>(null);
 
+  const selectedCount = stateValue?.length ?? 0;
+  React.useEffect(() => {
+    if (localRef.current && inputRequired)
+      localRef.current.required = selectedCount === 0;
+  }, [inputRequired, selectedCount]);
+
   React.useEffect(() => {
     const localValue: T[] | null | undefined =
       idValue != null
@@ -273,6 +280,7 @@ export function ComboBoxMultiple<
               required={inputRequired}
               error={inputError}
               helperText={inputHelperText}
+              inputRef={localRef}
             />
           ) : (
             <InputField
@@ -284,6 +292,7 @@ export function ComboBoxMultiple<
               required={inputRequired}
               error={inputError}
               helperText={inputHelperText}
+              inputRef={localRef}
             />
           )
         }

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

@@ -50,11 +50,11 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
     <ComboBoxMultiple
       label={field.label ?? ""}
       inputHelperText={field.helperText}
+      inputRequired={required || inputRequired}
       name={name}
       options={field.options}
       fullWidth
       idValues={ids}
-      inputRequired={required || inputRequired}
       onChange={(_event, value) => {
         const ids = value.map((v) => v.id);
         setIds(ids);